问题
用ReactJs+Redux+Webpack开发已经有一年多了，因为项目基本上是在内网访问的，所以也就没有怎么去注意打包后生成文件的大小了。现在，项目在外网的情况收到的反馈是加载速度慢，发现一个bundle已经有好几M了，这是不可忍受的~！也就有了去优化打包的想法。
优化
合并公共代码
将一些公共的代码和共同引用的第三方类库单独打包，同时将reactJs相关的类库单独打包。
如：
entry: {
index: [
'./src/index.js'
],
antd: ['antd'],
react: ['react', 'react-dom', 'react-redux', 'react-router', 'redux', 'redux-router', 'redux-thunk'],
vendors: ['crypto-js', 'history', 'isomorphic-fetch', 'jquery', 'lodash']
},
以上将antd、react以及一些工具类分别单独打包出来。具体的使用可以参考：
devtool 中的 source-map
source-map在调试的时候非常好用。但是在生产环境下应该关闭它，设置为：devtool: false。
这些source-map有哪些区别呢？可以参考：webpack sourcemap 选项多种模式的一些解释
使用UglifyJsPlugin压缩文件
使用UglifyJsPlugin压缩文件，并且去掉注释。可以让打包后的文件大小少了很多。
new webpack.optimize.UglifyJsPlugin({
comments: false, //去掉注释
compress: {
warnings: false //忽略警告,要不然会有一大堆的黄色字体出现……
}
}),
分离CSS样式
分离CSS样式原先就这么做了，这里还是再拿出来讲一下。
new ExtractTextPlugin('index_[contenthash].css', {
allChunks: true
}),
使用DedupePlugin
使用DedupePlugin插件可以找到Js的依赖树，并且删除这些重复的依赖
开启gzip压缩
经过以上的步骤以后打包出来的文件已经小了很多了，但还是不太满意。通过使用gzip压缩可以进一步减少文件的大小，就是有个缺点是打包的时候会慢一些。
new CompressionWebpackPlugin({ //gzip 压缩
asset: '[path].gz[query]',
algorithm: 'gzip',
test: new RegExp(
'\\.(js|css)$' //压缩 js 与 css
),
threshold: 10240,
minRatio: 0.8
})
HtmlWebpackPlugin中的设置
设置minify属性的值：
new HtmlWebpackPlugin({
title: '项目官网 3.0',
template: 'index-template.html',
inject: 'body',
minify: {
removeComments: true, //去注释
collapseWhitespace: true, //压缩空格
removeAttributeQuotes: true //去除属性引用
}
}),
还可以再次进行的优化
完成以上的方法以后，打包文件已经小了很多了。但依旧还是存在优化的空间，比如说可以使用externals然后采用cdn加载react、antd等。
参考：