这里我列举几个常用的能够用于减少包体大小的插件，我们可以根据项目需求选择性的使用：
compression-webpack-plugin :该插件能够将资源文件压缩为.gz文件，并且根据客户端的需求按需加载。
dedupeplugin :抽取出输出包体中的相同或者近似的文件或者代码，可能对于 Entry Chunk 有所负担，不过能有效地减少包体大小。
uglifyjsplugin :压缩输出块的大小，可以参考官方文档。
ignoreplugin :用于忽略引入模块中并不需要的内容，譬如当我们引入moment.js时，我们并不需要引入该库中所有的区域设置，因此可以利用该插件忽略不必要的代码。
...
var CompressionPlugin = require("compression-webpack-plugin");
...
let config = {
entry: path.join(__dirname, '../app/index'),
cache: false,
devtool: 'cheap-module-source-map',
plugins: [
new webpack.DefinePlugin({
'process.env.NODE_ENV': '"production"'
}),
new webpack.optimize.DedupePlugin(),
new webpack.optimize.UglifyJsPlugin({
mangle: true,
compress: {
warnings: false, // Suppress uglification warnings
pure_getters: true,
unsafe: true,
unsafe_comps: true,
screw_ie8: true
},
output: {
comments: false,
},
exclude: [/.min.js$/gi] // skip pre-minified libs
}),
new webpack.IgnorePlugin(/^./locale$/, [/moment$/]),
new webpack.NoErrorsPlugin(),
new CompressionPlugin({
asset: "[path].gz[query]",
algorithm: "gzip",
test: /.js$|.css$|.html$/,
threshold: 10240,
minRatio: 0
})
...
]
整体压缩的一些配置
重点：简单介绍下其中的GZ压缩
compression-webpack-plugin :该插件能够将资源文件压缩为.gz文件，并且根据客户端的需求按需加载。
var CompressionPlugin = require("compression-webpack-plugin");
module.exports = {
plugins: [
new CompressionPlugin({
asset: "[path].gz[query]",
algorithm: "gzip",
test: /.(js|html)$/,
threshold: 10240,
minRatio: 0.8
})
]
}
参数：
- asset：目标资产名称。[file]被替换为原始资产。[path]被替换为原始资产的路径和[query]查询。默认为"[path].gz[query]"。
- filename：A function(asset)接收资产名称（处理后的asset选项）并返回新的资产名称。默认为false。
- algorithm：可以是一个function(buf, callback)或一个字符串。对于一个字符串，算法取自zlib（或zopfli for zopfli）。默认为"gzip"。
- test：处理与此RegExp相匹配的所有资产。默认为每个资产。
- threshold：只处理大于此大小的资产。以字节为单位 默认为0。
- minRatio：只有压缩得更好的资产才能处理这个比率。默认为0.8。
- deleteOriginalAssets：是否删除原始资产？默认为false。
Zopfli的选项参数（有关详细信息，请参阅node-zopfli doc）：
- verbose：默认值：false，
- verbose_more：默认值：false，
- 编号：默认值：15，
- blocksplitting：默认值：true，
- blocksplittinglast：默认值：false，
- blocksplittingmax：默认值：15
成功就看可以看到：
.png)
看到你就成功了，塌坑路上不孤独。。。。。。