正文
new webpack.optimize.CommonsChunkPlugin({
names: ['vendor'],
filename: '[name].js',
minChunks: Infinity
})
3.Defineplugin
这个插件用来定义全局变量，在webpack打包的时候会对这些变量做替换。这里替换成了production，react代码中有很多的NODE_ENV变量判断
new webpack.DefinePlugin({ //
'process.env': {
NODE_ENV: JSON.stringify('production')
}
})
2. 从代码层面入手
1.首先你应该要知道code splitting这个东西，这个是代码层面优化的根基。
code splitting，就是代码分割，简而言之就是代码分割成一个个小块，每次页面加载时，我只需要加载那些我需要的部分(加载包的体积变小了)，这样可以让页面加载的更快。
那么如何实现呢？
-
route层面入手
route2-3中有一个叫做getComponent的方法，可以配置按需加载route，即原来A,B,C三个界面生成一个bundle.js的包，使用了按需加载之后，会变为一个bundle.js包加上3个chunk包，这个时候bundle.js包加上三个chunk包的总大小会比原来的bundle.js包稍微大一点，但是我想进入A界面，我只需要加载bundle.js包和A的chunk包，那么我的A页面加载速度便会变得快许多。
可以参考另一篇文章React-router 4 按需加载的实现方式及原理(Code Splitting)
-
实际代码入手1.先学会分析代码，分析代码结构，分析你的包中到底是什么东西如此之大。
借助工具：
npm install webpack-visualizer-plugin webpack-stats-plugin --save-dev
配置：
import:
const StatsWriterPlugin = require('webpack-stats-plugin').StatsWriterPlugin;
const Visualizer = require('webpack-visualizer-plugin');
plugin:
new StatsWriterPlugin({
fields: null,
stats: { chunkModules: true }
}),
new Visualizer({
filename: './statistics.html'
})
正常的webpack run 之后，会在你的output的地方出现statistics.html这个文件，直接用网页打开就可以了
这样就可以分析出你到底是什么导致你bundle.js报如此之大了，但有一些包我们是无法缩减的，例如react-dom,react,但是绝大部分的包都是可以进行缩减的.
那么如何缩减呢？
加入你这个界面中用到了一个三方的图形控件，例如你用了Echart,那么这个包总是很大的，即使是最小的也有300k左右，其实你其他的代码可能都不到100k，那么这300k将会非常影响你这个界面的加载速度，所以需要给这个控件做一个按需加载，这样可以先展示其余的这100k所展示的界面，等待其余的300k下载好了再把Echart给补上。
