我們在用vue-cli打包的時候，往往會出現包比較大的情況，webpack4已經幫我們進行了分包的處理，那我們也可以再進行gzip壓縮打包，減小包的體積

1.需要用到的外掛：

npm i -D compression-webpack-plugint

特別注意，有的版本會出現”TypeError: Cannot read property 'tapPromise' of undefined“這樣的錯誤，建議安裝5.0.0的版本

2.修改vue.config.js

const CompressionPlugin = require("compression-webpack-plugin");
module.export = {
  configureWebpack: () => {
     if (process.env.NODE_ENV === 'production') {
      return {
        plugins: [
          new CompressionPlugin({
            test: /\.js$|\.html$|\.css$|\.jpg$|\.jpeg$|\.png/, // 需要壓縮的檔案型別
            threshold: 10240, // 歸檔需要進行壓縮的檔案大小最小值，我這個是10K以上的進行壓縮
            deleteOriginalAssets: true// 是否刪除原檔案
          })
        ]
      }
    }
  }
}
 

　打包，可以看到體積減小了三分之二

3.nginx的修改

server
{
    listen 80 default_server;
    server_name 106.13.190.39;
    index index.php index.html index.htm default.php default.htm default.html;
    root /www/wwwroot/106.13.190.39;#上面是我伺服器自己一些配置
    
    gzip  on;  #開啟gzip壓縮輸出
    gzip_min_length 1k;  #最小壓縮檔案大小
    gzip_buffers 4 16k;  #壓縮檔案緩衝區
    gzip_comp_level 2;   #壓縮等級
    #gzip_http_version 1.0; #壓縮版本(預設1.1，前端如果是squid2.5請使用1.0)
    gzip_types text/plain application/javascript application/x-javascript text/css 
    application/xml text/javascript application/x-httpd-php image/jpeg image/gif image/png 
    image/x-icon;    
    gzip_vary off; //是否放客戶端也看到是否開啟了
    ----------
}