前文介绍了借助webpack完成代码分割和异步加载, 本文将重点关注代码的按需加载,

  1. 首先说一下tree-shaking, 就是在打包的时候将没有引用的模块内容删除, 只保留模块中有用的部分 , 其原理简单但是实现起来受影响因素很多, 又有兴趣的同学可以看一下这篇文章: 你的tree-shaking并没有什么卵用
    webpack中可以使用uglifyjs-webpack-plugin对代码进行压缩,webpack4在设置mode为production,并且package.json中设置sideEffects为false的情况下会自动触发tree-shaking,但是亲自尝试之后没有生效, 只有在显示使用的uglifyjs的时候才进行了压缩。

  2. 项目中引用了cytoscape.js , 是通过npm安装的 , 在组件中直接引用的方式是:

    1
    import cytoscape from 'cytoscape';

    这种引入方式将会导致在打包的时候将node_modules/cytoscape/dist整个目录的文件打入chunk中,改为一下方式:

    1
    import cytoscape from 'cytoscape/dist/cytoscape.min.js';
  1. lodash的按需加载需要使用babel-plugin-lodash插件, 并在.babelrc中添加:
1
2
3
4
5
6
7
{
// ...
"plugins": [
"lodash",
// ...
]
}
  1. moment库的体积开销主要是 i18n 文件,配置 webpack 将用不到 i18n 文件不打包即可。
1
.plugin('moment').use(webpack.ContextReplacementPlugin, [/moment[/\\]locale$/, /zh-cn/]).end();
  1. antd库使用官网推荐的babel-plugin-import插件, 并给babel添加配置
1
2
3
4
5
6
7
plugin:{
["import", {
"libraryName": "antd",
"libraryDirectory": "es",
"style": "less"
}]
}
  1. css的抽离也是非常重要的 , webpack4可以使用mini-css-extract-plugin ;生产环境为了进一步压缩css代码, 可以使用optimize-css-assets-webpack-plugin插件, 以下是使用前和使用后的css大小, 鉴于本身css体积就比较小, 所以压缩的体积不是很明显, 不过聊胜于无。
1
2
3
4
5
6
7
-rw-r--r--  1 chenjian  staff   289B  9 28 15:27 Iframe.76c71cc25ad38a8c4eaf.css
-rw-r--r-- 1 chenjian staff 324B 9 28 15:27 RTCScheduleConfig.76c71cc25ad38a8c4eaf.css
-rw-r--r-- 1 chenjian staff 372B 9 28 15:27 ScheduleConfig.76c71cc25ad38a8c4eaf.css
-rw-r--r-- 1 chenjian staff 360B 9 28 15:27 Service.76c71cc25ad38a8c4eaf.css
-rw-r--r-- 1 chenjian staff 1.1K 9 28 15:27 StreamsStatus.76c71cc25ad38a8c4eaf.css
-rw-r--r-- 1 chenjian staff 195B 9 28 15:27 TaskHLZT.76c71cc25ad38a8c4eaf.css
drwxr-xr-x 3 chenjian staff 96B 9 28 15:27 app/
1
2
3
4
5
6
7
-rw-r--r--  1 chenjian  staff   226B  9 28 15:36 Iframe.76c71cc25ad38a8c4eaf.css
-rw-r--r-- 1 chenjian staff 253B 9 28 15:36 RTCScheduleConfig.76c71cc25ad38a8c4eaf.css
-rw-r--r-- 1 chenjian staff 287B 9 28 15:36 ScheduleConfig.76c71cc25ad38a8c4eaf.css
-rw-r--r-- 1 chenjian staff 287B 9 28 15:36 Service.76c71cc25ad38a8c4eaf.css
-rw-r--r-- 1 chenjian staff 903B 9 28 15:36 StreamsStatus.76c71cc25ad38a8c4eaf.css
-rw-r--r-- 1 chenjian staff 150B 9 28 15:36 TaskHLZT.76c71cc25ad38a8c4eaf.css
drwxr-xr-x 3 chenjian staff 96B 9 28 15:36 app/