Vue cli項目開啟Gzip

安裝 compression-webpack-plugin

目錄

• 安裝 compression-webpack-plugin
• 更改配置文件
• 服務器開啟gzip功能

建議安裝v1.1.11版本，最新版本可能會報錯

cnpm i compression-webpack-plugin@1.1.11 -D

更改配置文件

開啟生產環境gzip功能。

/config/index.js：

productionGzip: true,

/build/webpack.prod.config.js：

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

最后重新構建項目

npm run build

可以看到構建后的項目 /static中的靜態資源目錄中多了后綴 .gz的壓縮文件。

服務器開啟gzip功能

我們服務器使用Express，安裝插件 compression

cnpm i compression -S

添加中間件

app.js：

const compression = require('compression');
app.use(compression())

最后重啟服務器，瀏覽頁面可以看到加載的資源文件大小比之前明顯減小了。