webpack坑之二

之前没有注意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会把作者信息一并删除，为了压缩体积不得不这么做，因此将作者信息放在单独文件中统一声明