webpack体积优化篇二（GZ压缩）

这里我列举几个常用的能够用于减少包体大小的插件，我们可以根据项目需求选择性的使用：

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文件，并且根据客户端的需求按需加载。

插件介绍：https://github.com/webpack-contrib/compression-webpack-plugin

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

成功就看可以看到：

看到你就成功了，塌坑路上不孤独。。。。。。