webpack+nginx實現gzip打包解決vue首屏加載過慢
B/S結構中的壓縮傳輸
瀏覽器向服務器發出請求，並且在請求頭中聲明可以使用gzip的編碼格式，服務器接受到請求之後，讀取未壓縮的文件，並進行gzip算法壓縮，服務器壓縮完成後，再返回給瀏覽器gzip格式的文件，瀏覽器進行解壓縮。這樣做傳輸效率可能得到大幅提升，但是服務器的壓縮需要時間，客戶端的解壓需要時間
所以我們再使用gzip的時候通常會使用webpack進行預壓縮
使用webpack進行預壓縮
同樣的，瀏覽器向服務器發出請求，並且在請求頭中聲明可以使用gzip的編碼格式，服務器接受到請求之後，讀取壓縮後的文件，服務器直接返回給瀏覽器gzip格式的文件，瀏覽器進行解壓縮，這樣以來就節省了服務器壓縮的時間。
使用compression-webpack-plugin插件對打包結果進行預壓縮，可以移除服務器的壓縮時間。
因爲vue-cli3版本的配置文件較vue-cli2發生了很多變化，vue-cli3配置文件如下，vue.config.js
const CompressionWebpackPlugin = require('compression-webpack-plugin')
module.exports = {
chainWebpack: (config) => {
config.plugin('compression').use(CompressionWebpackPlugin, [
{
algorithm: 'gzip',
test: new RegExp('\\.(js|css)$'),
threshold: 10240, //超過多少字節進行壓縮
minRatio: 0.8 //至少壓縮到原來體積的0.8,纔會進行壓縮
}
])
},
}
如果你使用的配置文件是webpack.config.js,則代碼如下
const compressionWebpackPlugin = require("compression-webpack-plugin")
module.exports = {
mode: "production",
optimization: {
splitChunks: {
chunks: "all"
}
},
plugins: [
new compressionWebpackPlugin({
test: /\.(js)|(css)$/,
threshold: 10240, //超過多少字節進行壓縮
minRatio: 0.8 //至少壓縮到原來體積的0.8,纔會進行壓縮
})
]
};
配置好前端後還要配置nginx的配置文件，在nginx.conf的server模塊中加入以下代碼：
server{
gzip on;
gzip_buffers 32 4K;
gzip_comp_level 6;
gzip_min_length 100;
gzip_types application/javascript text/css text/xml;
gzip_disable "MSIE [1-6]\."; #配置禁用gzip條件，支持正則。此處表示ie6及以下不啓用gzip（因爲ie低版本不支持）
gzip_vary on;
}
gzip代碼的具體解釋
#gzip模塊設置
#開啓壓縮
gzip on;
# 設置允許壓縮的頁面最小字節數，頁面字節數從header頭得content-length中進行獲取。 默認值是0，不管頁面多大都壓縮。建議設置成大於2k的字節數，小於2k可能會越壓越大。
gzip_min_length 2k;
# 設置系統獲取幾個單位的緩存用於存儲gzip的壓縮結果數據流。 例如 4 4k 代表以4k爲單 位，按照原始數據大小以4k爲單位的4倍申請內存。 4 8k 代表以8k爲單位，按照原始數據大小以8k 爲單位的4倍申請內存。
# 如果沒有設置，默認值是申請跟原始數據相同大小的內存空間去存儲gzip壓縮結果。
gzip_buffers 4 16k;
#壓縮級別，1-10，數字越大壓縮的越好，也越佔用CPU時間
gzip_comp_level 5;
# 默認值: gzip_types text/html (默認不對js/css文件進行壓縮)
# 壓縮類型，匹配MIME類型進行壓縮
# 不能用通配符 text/*
# (無論是否指定)text/html默認已經壓縮
# 設置哪壓縮種文本文件可參考 conf/mime.types
gzip_types text/plain application/xjavascript text/css application/xml;
# 值爲1.0和1.1 代表是否壓縮http協議1.0，選擇1.0則1.0和1.1都可以壓縮
gzip_http_version 1.0
# IE6及以下禁止壓縮
gzip_disable "MSIE [1-6]\.";
# 默認值：off
# Nginx作爲反向代理的時候啓用，開啓或者關閉後端服務器返回的結果，匹配的前提是後端服 務器必須要返回包含"Via"的 header頭。
# off - 關閉所有的代理結果數據的壓縮
# expired - 啓用壓縮，如果header頭中包含 "Expires" 頭信息
# no-cache - 啓用壓縮，如果header頭中包含 "Cache-Control:no-cache" 頭信息
# no-store - 啓用壓縮，如果header頭中包含 "Cache-Control:no-store" 頭信息
# private - 啓用壓縮，如果header頭中包含 "Cache-Control:private" 頭信息
# no_last_modified - 啓用壓縮,如果header頭中不包含 "Last-Modified" 頭信息
# no_etag - 啓用壓縮 ,如果header頭中不包含 "ETag" 頭信息
# auth - 啓用壓縮 , 如果header頭中包含 "Authorization" 頭信息
# any - 無條件啓用壓縮
gzip_proxied expired no-cache no-store private auth;
# 給CDN和代理服務器使用，針對相同url，可以根據頭信息返回壓縮和非壓縮副本
gzip_vary on;
有關nginx.conf全部配置文件可以看這篇博客：
史上最全 nginx.conf 配置文件詳解
有關更多webpack中的性能優化可以看這篇博客：
企業級項目：webpack中的性能優化