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

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;

1. 在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"