webpack優化 -- compression-webpack-plugin 開啟gzip

打包的時候開啟gzip可以大大減少體積，非常適合於上線部署。下面以vue-cli2.x項目為例，介紹如何在vue中開啟gzip。😄

步驟

安裝 compression-webpack-plugin

注意，目前最新版需要運行在webpack4.0以上，如果你的webpack是3.x版本的，請安裝compression-webpack-plugin的1.x版本(筆者安裝的是1.1.12)。

npm install compression-webpack-plugin -D

改造vue項目配置

1. 在config/index.js文件中修改productionGzip: true;

2. 在build/webpack.prod.conf.js文件中的plugins添加下面的代碼, vue-cli2.x默認已經寫好了，則不用管

new CompressionWebpackPlugin({
      asset: '[path].gz[query]',
      algorithm: 'gzip',
      test: new RegExp(
        '\\.(' +
        config.build.productionGzipExtensions.join('|') +
        ')$'
      ),
      threshold: 10240,
      minRatio: 0.8
    })

查看壓縮前后的大小對比

如果想知道壓縮前后的大小情況，可以使用webpack-bundle-analyzer插件，vue-cli2.x默認引進的不用管。然后在package.json文件中添加下面的script命令:

"report":"npm run build --report=true"