1.vue-cli 打包
腳手架默認打包后的是JS文件,如果追求加載速度可以開啟gzip壓縮打包

第一步 安裝webpack插件

npm i compression-webpack-plugin@5.0.1

第二步 配置腳手架
在項目根目錄新建vue.config.js

const path = require("path");


const CompressionPlugin = require("compression-webpack-plugin");

module.exports = {
  // 默認在生成的靜態(tài)資源文件名中包含hash以控制緩存
  filenameHashing: true,

  // 是否在保存的時候使用 `eslint-loader` 進行檢查。
  lintOnSave: false,

  //開啟gzip
  configureWebpack: (config) => {
    if (process.env.NODE_ENV === "production") {
      return {
        plugins: [
          new CompressionPlugin({
            algorithm: "gzip",
            test: /\.(js|css)$/, // 匹配文件名
            threshold: 10240, // 對超過10k的數(shù)據(jù)壓縮
            deleteOriginalAssets: false, // 不刪除源文件
            minRatio: 0.8, // 壓縮比
          }),
        ],
      };
    }
  },

  //移除map文件
  productionSourceMap: false,

};

這個時候運行npm run build就會出現(xiàn)gz格式文件

image.png

2.nginx配置
nginx默認開啟了gzip
gzip on
但是這個命令的意思是nginx調(diào)用服務(wù)器CPU資源把JS等文件壓縮傳給客戶端,非常占用CPU

既然vue-cli腳手架已經(jīng)幫我們壓縮好了網(wǎng)頁代碼,
所以nginx直接把gzip格式文件傳給客戶端就行了,既靜態(tài)gzip服務(wù)

如果客戶端支持gzip協(xié)議 服務(wù)器也有對應(yīng)的.gz文件 就直接發(fā)送gz文件
不用調(diào)用CPU再去壓縮一遍了
用到的是nginx的內(nèi)置模塊ngx_http_gzip_static_module 模塊地址

模塊的官網(wǎng)和絕大部分博客都說如果想啟用這個模塊,需要重新編譯一遍nginx

image.png

但是博主是通過ubuntu aptget方式安裝的nginx 自動編譯好了這個模塊 ,直接開啟就好啦

開啟步驟
第一步
shell鏈接服務(wù)器 輸入nginx -V查看是否已開啟了該模塊

如果你和博主的一樣,帶了這個模塊 說明不用自己再編譯了 省事 應(yīng)該是nginx版本比較新的緣故

image.png

第二步 配置nginx
這個不用全局設(shè)置,因為并不是所有的項目都有g(shù)z文件

image.png

第三步 重啟
nginx -t
nginx –s reload

到此 大功告成!

image.png