之前两篇文章中介绍了两种实现代码分离的方法。但是如果我们在一个工程中同时存在多个应用,这些应用可能同时引用了同一个UI组件库例如ant design;那我们在分离成多个chunk时岂不是每一个chunk都会引入了组件库,每一个chunk的size都大于ant design的size如下图:
对于这种情况我们可以使用webpack中Tree shake的功能,将javaScript上下文中未引用的代码(dead code)进行移除,主要依赖于es2015模块系统中的静态结构的特性如 import 和 export。Tree shake功能内置在webpack2中的压缩工具(minifier) -UglifyJSPlugin
代码如下:
安装:uglifyjs-webpack-plugin
npm install --save-dev uglifyjs-webpack-plugin
在webpack配置中的配置如下:
const UglifyJSPlugin = require('uglifyjs-webpack-plugin'); const webpack = require('webpack'); module.exports = merge(common, { plugins: [ new UglifyJSPlugin({ sourceMap: true //内部参数如果不穿react会警告, }), new webpack.optimize.CommonsChunkPlugin({ // minChunks: 2, name: 'shared', filename: 'shared.[chunkhash:5].js' }), ] });
因为打包之后是部署生产环境的所以我们可以打包压缩的配置放到webpack生产环境的配置中。
这样就可以实现tree shake的功能;通过下图可以查看效果:
可以看到chunk的size得到了极大的降低。
未使用treeShake之前我们的逻辑代码即分离之后的chunk的size 大小以及加载时间:
使用treeShake之后我们的逻辑代码chunk的size 大小以及加载时间: