【VUE】vue配置Gzip壓縮

轉載LuviaWu 發布於2019-07-17 09:28:57 閱讀數 295  收藏

vue cli 2.9.6

安裝compression-webpack-plugin

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

vue.config.js配置Gzip壓縮

// 導入compression-webpack-plugin
const CompressionWebpackPlugin = require('compression-webpack-plugin')

// 定義壓縮文件類型
const productionGzipExtensions = ['js', 'css']

module.exports = {
  // 配置反向代理
  devServer: {
    proxy: {
      '/api': {
        target: 'http://172.31.120.61:8088/',
        ws: true,
        changeOrigin: true,
        pathRewrite: {
          '^/api': ''
        }
      }
    }
  },
  configureWebpack: {
    plugins: [
      new CompressionWebpackPlugin({
        filename: '[path].gz[query]',
        algorithm: 'gzip',
        test: new RegExp('\\.(' + productionGzipExtensions.join('|') + ')$'),
        threshold: 10240,
        minRatio: 0.8
      })
    ]
  }
}

配置Nginx

 gzip on; #開啟或關閉gzip on off
 gzip_disable "msie6"; #不使用gzip IE6
 gzip_min_length 100k; #gzip壓縮最小文件大小，超出進行壓縮（自行調節）
 gzip_buffers 4 16k; #buffer 不用修改
 gzip_comp_level 8; #壓縮級別:1-10，數字越大壓縮的越好，時間也越長
 gzip_types text/plain application/x-javascript text/css application/xml text/javascript application/x-httpd-php image/jpeg image/gif image/png; #  壓縮文件類型 

 

vue項目開啟Gzip壓縮和性能優化 [親測可用]

vue 項目開啟gzip自拍壓縮和部署 nginx 開啟gzip優化性能

方法/步驟

第一步，在vue項目中安裝依賴並將productionGzip改為true，開啟Gzip壓縮：npm install --save-dev compression-webpack-plugin

 

第二步，運行 npm run build打包項目，這時可能會報錯，提示ValidationError: Compression Plugin Invalid Options。根據官網提示，需要將CompressionWebpackPlugin的設置由asset改為filename。

第三步，再次運行 npm run build打包項目，這時可能會繼續報錯，提示TypeError: Cannot read property 'emit' of undefined。據我查證，是安裝的compression-webpack-plugin依賴有問題，需要卸載compression-webpack-plugin更改安裝低版本 v1.12。

第四步，卸載當前安裝的compression-webpack-plugin：npm uninstall --save-dev compression-webpack-plugin

1. 5

   第五步，安裝低版本compression-webpack-plugin：npm install --save-dev compression-webpack-plugin@1.1.2

   

2. 6

   第六步，再次運行 npm run build打包項目，這時將正常包vue項目，愉(ku)快(bi)的j將vue開發上線了。

   

3. 7

   第七步，開啟 nginx 服務端 gzip性能優化。找到nginx配置文件在 http 配置里面添加如下代碼，然后重啟nginx服務即可。

   http:{ 

         gzip on; 

         gzip_static on;

         gzip_buffers 4 16k;

         gzip_comp_level 5;

         gzip_types text/plain application/javascript text/css application/xml text/javascript application/x-httpd-php image/jpeg 

                    image/gif image/png;

   }

   

4. 8

   總結一下，vue開啟gzip性能優化主要分為兩部分，成功開啟后將大大優化vue首頁加載時長。如果這篇文章幫到了你，辛苦大哥哥大姐姐們投票、點贊、打賞支持一下，謝謝！