1 Vue打包部署后訪問慢的現(xiàn)象

1.1 package.json中打包腳本部分

  "scripts": {
    "dev": "vue-cli-service serve",
    "staging": "vue-cli-service serve --mode staging",
    "production": "vue-cli-service serve --mode production",
    "build:stage": "vue-cli-service build --mode staging",
    "build:prod": "vue-cli-service build --mode production",
    "preview": "node build/index.js --preview",
    "lint": "eslint --ext .js,.vue src"
  },

1.2 執(zhí)行npm run build:stage

image.png

打包后，dist文件20多兆

image.png

發(fā)現(xiàn)頁(yè)面首次加載，單文件體積4M多，加載時(shí)間需要31秒，導(dǎo)致用戶體驗(yàn)非常差

2 解決方案

2.1 在package.json中添加組件依賴

"compression-webpack-plugin": "^1.1.11",

2.2 install

npm install

2.3 vue.config.js關(guān)鍵配置

// 導(dǎo)入compression-webpack-plugin
const CompressionWebpackPlugin = require('compression-webpack-plugin')
// 定義壓縮文件類型
const productionGzipExtensions = ['js', 'css']

configureWebpack: config => {
    config.name = name
    config.resolve.alias['@'] = resolve('src')
    config.performance = {
      hints: 'warning',
      //入口起點(diǎn)的最大體積 整數(shù)類型（以字節(jié)為單位）
      maxEntrypointSize: 50000000,
      //生成文件的最大體積 整數(shù)類型（以字節(jié)為單位 300k）
      maxAssetSize: 30000000,
      //只給出 js 文件的性能提示
      assetFilter: function(assetFilename) {
        return assetFilename.endsWith('.js')
      }
    }
    if (process.env.NODE_ENV !== 'development') {
      // 生產(chǎn)環(huán)境
      // 編譯時(shí)刪除console.log
      config.optimization.minimizer[0].options.terserOptions.compress.drop_console = true
      //  配置productionGzip-高級(jí)的方式
      // 配置參數(shù)詳解
      // asset： 目標(biāo)資源名稱。 [file] 會(huì)被替換成原始資源。[path] 會(huì)被替換成原始資源的路徑， [query] 會(huì)被替換成查詢字符串。默認(rèn)值是 "[path].gz[query]"。
      // algorithm： 可以是 function(buf, callback) 或者字符串。對(duì)于字符串來(lái)說(shuō)依照 zlib 的算法(或者 zopfli 的算法)。默認(rèn)值是 "gzip"。
      // test： 所有匹配該正則的資源都會(huì)被處理。默認(rèn)值是全部資源。
      // threshold： 只有大小大于該值的資源會(huì)被處理。單位是 bytes。默認(rèn)值是 0。
      // minRatio： 只有壓縮率小于這個(gè)值的資源才會(huì)被處理。默認(rèn)值是 0.8。
      config.plugins.push(
        new CompressionWebpackPlugin({
          filename: '[path].gz[query]',
          algorithm: 'gzip',
          test: new RegExp('\\.(' + productionGzipExtensions.join('|') + ')$'),
          threshold: 10240,
          minRatio: 0.8,
          // 是否刪除原文件    
          deleteOriginalAssets: true,
        })
      )
    } else {
      // 開發(fā)環(huán)境
    }
  },

2.5 使用compression-webpack-plugin打包后文件體積縮小一半

image.png

2.4 nginx配置,在http下加入如下配置：

# 開啟gzip
gzip on;

# 啟用gzip壓縮的最小文件，小于設(shè)置值的文件將不會(huì)壓縮
gzip_min_length 1k;

# 設(shè)置壓縮所需要的緩沖區(qū)大小
gzip_buffers 16 64k;

# 設(shè)置gzip壓縮針對(duì)的HTTP協(xié)議版本
gzip_http_version 1.1;

# gzip 壓縮級(jí)別，1-9，數(shù)字越大壓縮的越好，也越占用CPU時(shí)間
gzip_comp_level 9;

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

# 是否在http header中添加Vary: Accept-Encoding，建議開啟
gzip_vary on;

# 禁用IE6 gzip
gzip_disable "MSIE [1-6]\.";