什么是Gzip

前端優化：開啟Gzip壓縮_前端開啟gzip壓縮-CSDN博客

Gzip是一種文件壓縮算法，減少文件大小，節省帶寬從而提減少網絡傳輸時間，網站會更快地加載。

如何判斷是否開啟：

請求頭：服務端會通過客戶端發送的請求頭中的 Accept-Encoding 字段來確定是否支持

安裝compression-webpack-plugin

npm install?compression-webpack-plugin --save-dev

如果打包時候出現Cannot read property 'tapPromise' of undefined 這個報錯，是compression-webpack-plugin版本問題，通過降低版本就可以解

在vue.config.js中配置，引入插件

const CompressionPlugin = require('compression-webpack-plugin')

使用插件，在vue.config.js文件中configureWebpack的plugins中添加配置new CompressionPlugin(…)或如下在最后加入

module.exports = {configureWebpack: {plugins: [// gzipnew CompressionWebpackPlugin({cache: false,                   // 不啟用文件緩存filename: '[path].gz[query]',// 壓縮后的文件名algorithm: 'gzip',       // 使用gzip壓縮test: new RegExp('\\.(' + ['js', 'css'].join('|') + ')$'), // 壓縮文件格式threshold: 10240,minRatio: 0.8,    // 壓縮率小于1才會壓縮deleteOriginalAssets: false})],resolve: {alias: {'@': resolve('src')}}},}

注意事項

• 不要刪除原始文件：deleteOriginalAssets?不建議設置為?true，因為某些瀏覽器可能不支持 Gzip 壓縮。

• 文件大小限制：通過?threshold?設置文件大小閾值，避免對小文件進行壓縮（壓縮小文件可能得不償失）。

• 兼容性：確保服務器和客戶端都支持 Gzip 壓縮。