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

1
2
1npm install --save-dev uglifyjs-webpack-plugin

2

在webpack配置中的配置如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
1const UglifyJSPlugin = require('uglifyjs-webpack-plugin');

2const webpack = require('webpack');

3

4module.exports = merge(common, {

5   plugins: [

6      new UglifyJSPlugin({

7            sourceMap: true //内部参数如果不穿react会警告，

8      }),

9      new webpack.optimize.CommonsChunkPlugin({

10         // minChunks: 2,

11         name: 'shared',

12         filename: 'shared.[chunkhash:5].js'

13      }),

14   ]

15});

16

因为打包之后是部署生产环境的所以我们可以打包压缩的配置放到webpack生产环境的配置中。

这样就可以实现tree shake的功能；通过下图可以查看效果：

可以看到chunk的size得到了极大的降低。

未使用treeShake之前我们的逻辑代码即分离之后的chunk的size 大小以及加载时间：

使用treeShake之后我们的逻辑代码chunk的size 大小以及加载时间：

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

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