這里我列舉幾個常用的能夠用於減少包體大小的插件，我們可以根據項目需求選擇性的使用：
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
成功就看可以看到：
看到你就成功了，塌坑路上不孤獨。。。。。。