webpack+react-router实现代码拆分按需加载(下)

    之前两篇文章中介绍了两种实现代码分离的方法。但是如果我们在一个工程中同时存在多个应用，这些应用可能同时引用了同一个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 大小以及加载时间：

webpack+react-router实现代码拆分按需加载(中)

webpack+react-router实现代码拆分按需加载(上)