前言
這段時間因為免費試用了https://free.aliyun.com/一臺阿里云的服務(wù)器城须，配置是 2核4G 2M，
因為帶寬太低了米苹，每次在第一次加載的時候太慢了糕伐，通過F12調(diào)試，發(fā)現(xiàn)主要是因為加載的 js 過大而引起的蘸嘶。因此本文將主要講解Vue項目打包后js良瞧、css、svg等文件過大的解決辦法训唱。
image
引入插件 compression-webpack-plugin
通過引入 compression-webpack-plugin 插件來打包褥蚯，然后開啟 nginx gzip 來解決問題
CompressionWebpackPlugin插件參數(shù)配置：官網(wǎng) https://www.webpackjs.com/plugins/compression-webpack-plugin/
- 安裝插件依賴
#指定版本
npm i compression-webpack-plugin@5.0.1
#或者
npm i -D compression-webpack-plugin
npm install compression-webpack-plugin --save
image
-
說明
- i 是install 的簡寫
- -S就是--save的簡寫
- -D就是--save-dev 這樣安裝的包的名稱及版本號就會存在package.json的devDependencies這個里面，而--save會將包的名稱及版本號放在dependencies里面况增。
修改
vue.config.js文件赞庶，內(nèi)容如下
const CompressionPlugin = require('compression-webpack-plugin');
const productionGzipExtensions = /\.(js|css|json|txt|html|ico|svg)(\?.*)?$/i;
module.exports = {
publicPath: '/',
productionSourceMap: false,
configureWebpack: {...},
chainWebpack: config => {
config.resolve.alias.set('@', resolve('src'));
config.when(process.env.NODE_ENV !== 'development',
config => {
// 提供帶 Content-Encoding 編碼的壓縮版的資源
config.plugin('compressionPlugin')
.use(new CompressionPlugin({
filename: '[path].gz[query]', // 目標文件名
algorithm: 'gzip', // 壓縮算法
test: productionGzipExtensions, // 滿足正則表達式的文件會被壓縮
threshold: 10240, // 只處理比這個值大的資源。按字節(jié)計算 10240=10KB
minRatio: 0.8, // 只有壓縮率比這個值小的資源才會被處理
deleteOriginalAssets: true // 是否刪除原資源
}));
}
)
}
}
更多詳細配置請查看本項目代碼澳骤，地址：https://gitee.com/zmzhou-star/easyboot.git
Vue項目打包
npm run build:prod
配置 compression-webpack-plugin 前后打包對比歧强，我們查看 dist目錄，能夠發(fā)現(xiàn)大于10KB的 js为肮，css 等文件已經(jīng)被壓縮了
配置
compression-webpack-plugin前
image
配置
compression-webpack-plugin后
image
修改Nginx配置 開啟 gzip
# on為啟用摊册，off為關(guān)閉
gzip on;
# Nginx的動態(tài)壓縮是對每個請求先壓縮再輸出，這樣造成虛擬機浪費了很多cpu颊艳，解決這個問題可以利用nginx模塊Gzip Precompression茅特，這個模塊的作用是對于需要壓縮的文件，直接讀取已經(jīng)壓縮好的文件(文件名為加.gz)棋枕，而不是動態(tài)壓縮白修，對于不支持gzip的請求則讀取原文件
gzip_static on;
# 設(shè)置允許壓縮的頁面最小字節(jié)數(shù)，頁面字節(jié)數(shù)從header頭中的Content-Length中進行獲取戒悠。默認值是0熬荆，不管頁面多大都壓縮舟山。建議設(shè)置成大于1k的字節(jié)數(shù)绸狐，小于1k可能會越壓越大卤恳。
gzip_min_length 1k;
# 獲取多少內(nèi)存用于緩存壓縮結(jié)果，‘4 16k’表示以16k*4為單位獲得
gzip_buffers 16 64K;
# 識別http協(xié)議的版本,早期瀏覽器可能不支持gzip自解壓,用戶會看到亂碼
gzip_http_version 1.1;
# gzip壓縮比（1~9）寒矿，越小壓縮效果越差突琳，但是越大處理越慢，所以一般取中間值;
gzip_comp_level 5;
# 對特定的MIME類型生效,其中'text/html’被系統(tǒng)強制啟用
gzip_types text/plain application/x-javascript text/css application/xml application/javascript;
# 啟用應(yīng)答頭"Vary: Accept-Encoding"
gzip_vary on;
# IE5.5和IE6 SP1使用msie6參數(shù)來禁止gzip壓縮 )指定哪些不需要gzip壓縮的瀏覽器(將和User-Agents進行匹配),依賴于PCRE庫
gzip_disable "MSIE [1-6].";
完整Nginx配置請看 Nginx安裝
- 重啟 nginx
systemctl reload nginx
測試效果符相，訪問：http://47.119.196.11拆融，F(xiàn)12打開開發(fā)者工具
壓縮前
image
壓縮后，發(fā)現(xiàn)響應(yīng)時間得到了明顯提升
image
