前言
如果我们的webpack工程变得越来越大，我们会发现，我们工程打包的速度会变得越来越慢。为了提升我们的开发效率，我们应该要做一些优化。
CommonsChunkPlugin
一般来说，如果我们的工程涉及了很多的第三方库，而我们的第三方库一般来说都是不会被修改的，因此，我们的做法就是把第三方库作为一个文件提取出来，避免每次修改代码都会对第三方库重新构建，而且业务代码本身的模块体积也会小很多，页面的加载速度也可以有提升。
webpack.config.js
entry: {
app:[
"babel-polyfill", //babel只能转换新的js句法，例如let这些，但是不会转换新的api，例如Iterator、Generator、Set、Maps等，因此要加入babel-polyfill用于支持。
path.join(__dirname, 'src/index.js')
],
vendor: ['react', 'react-router-dom', 'redux', 'react-dom', 'react-redux'] //第三方库，一般不会改变，定义在vendor中分离出来。
}, 在入口添加多一个key：vendor，指定第三方库文件名称。
使用commonschunkplugin插件，把vendor作为公共代码提取出来。
new webpack.optimize.CommonsChunkPlugin({ //对应entry里面的vendor,公共代码提取
name: ['vendor','runtime'] //公共使用的chunk名称，一个entry入口对应一个chunk。原来vendor是包含runtime，这样子会把runtime从vendor中再提取出来
}),我们是将将公用的第三方库通过 CommonsChunkPlugin 来打包成为一个 common.js。
根据这个 common.js 的内容来看，这里面存放的就是各个 entry 引用的公有的代码，比如，我们的很多组件都会用到 React 或者 Redux 这些第三方库。通过将公有的代码单独打包成一个文件，然后再将业务代码打包成一个文件，这样一来，业务代码模块本身的体积就会减小很多，页面的加载速度也能够得到很大的提升。
虽然这样打包的方式能够在一定程度上提升页面的加载速度，但是，我们简单的想一想也知道，CommonsChunkPlugin 会去将所有 entry 中的公有模块遍历出来再进行编译压缩混淆，这个过程是非常缓慢的（我们的项目以前在使用这种方式的时候，在这一步会花上至少十二分钟的时间，你可以想象这个过程有多么漫长）。
DllPlugin
使用DllPlugin可以大大提升我们工程的构建速度，Dllplugin不是单独使用的，它要和DllReferencePlugin结合一起使用。先看看它的使用方法。
1、先单独创建一个webpack.dll.config.js文件
const path = require('path');
const webpack = require('webpack');
module.exports = {
entry: {
vendor: ['react', 'react-router-dom', 'redux', 'react-dom', 'react-redux'] //将用到的第三方插件添加到vendor中
},
output: {
path:path.resolve('./dist'),
filename: '[name].dll.js',
library: '[name]_library'
},
plugins:[
new webpack.DllPlugin({
path: path.resolve('./dist','[name]-manifest.json'),
name: '[name]_library'
})
]
}可以看到，我们主要的操作是在 plugins 配置中，生成的文件名就是我们所定义的 entry 的名称，JSON 文件名可以根据自己的需要来命名。像上面这样，我们就可以将我们的一些公用模块打包出来了。
2、package.json中添加打包命令
“scripts”:{
"build:dll": "webpack --config webpack.dll.config.js"
}运行此命令，会生成两个文件，分别是vendor-manifest.json和vendor.dll.js。
3、在原来的webpack配置文件中，添加DllReferencePlugin的配置
plugins:[
...
new webpack.DllReferencePlugin({
manifest: require('./dist/vendor-manifest.json'),
})
],然后，再运行我们的打包命令，可以看出，我们工程的构建速度是有提升。不过由于我的工程本来就很小，只是由原来的4s提升到2s。
注意，我们必须要再index.html里面手动引入<script src="/vendor.dll.js"></script>，vendor.dll.js必须在bundle.js之前引入，因为bundle.js依赖vendor.dll.js。