webpack坑之二
2016-06-18 本文已影响0人
树荫下的胡桃
之前没有注意webpack打包后的文件的大小,直到某次用firebug无意中发现,天呐,居然有1MB+,这么大的文件在线上项目显然是不可以的,于是开始研究如何压缩文件。
文件压缩
- Uglify
webpack自带了Uglify插件,通过插件我们可以对代码进行压缩合并并去除注释,请看代码:
plugins: [
new webpack.optimize.UglifyJsPlugin({
output: {
comments: false,
},
compress: {
warnings: false
}
})
],
其中output是删除注释的
合并共同依赖
- CommonsChunkPlugin
同样在plugins中设置
plugins: [
new webpack.optimize.CommonsChunkPlugin('vender','vender.js')
]
在entry中设置:
entry: {
vender:['react','react-dom']
}
entry中的key是plugins中的文件名
结果
通过这两种方法,文件有效压缩到了7KB,vender大小为211KB,应该还有其他办法,继续探索中...
Tips: UglifyJsPlugin中的comments会把作者信息一并删除,为了压缩体积不得不这么做,因此将作者信息放在单独文件中统一声明