webpack有一個(gè)文件壓縮的插件抖韩，可以將大文件壓縮成gzip的格式。
使用起來(lái)也非常簡(jiǎn)單偷线，先安裝：npm install --save-dev compression-webpack-plugin
然后修改webpack配置（vue.config.js）：
const CompressionWebpackPlugin = require("compression-webpack-plugin");
// 可加入需要的其他文件類(lèi)型栋烤，比如json
// 圖片不要壓縮，體積會(huì)比原來(lái)還大
const productionGzipExtensions = ["js", "css"];
module.exports = {
configureWebpack: config => {
if (process.env.NODE_ENV === "production"){
return {
plugins: [
new CompressionWebpackPlugin({
// filename: '[path].gz[query]',
algorithm: "gzip",
test: new RegExp("\\.(" + productionGzipExtensions.join("|") + ")$"),
threshold: 10240, //對(duì)超過(guò)10k的數(shù)據(jù)進(jìn)行壓縮
minRatio: 0.6 // 壓縮比例游岳，值為0 ~ 1
})
]
};
}
}
};
打包完的js/css文件，都會(huì)多一份對(duì)應(yīng)的gzip文件其徙，部署的時(shí)候需要配置一下胚迫，啟用gzip，這樣支持gzip壓縮的瀏覽器請(qǐng)求的就是壓縮文件唾那，不支持的瀏覽器請(qǐng)求的就是源文件访锻，gzip壓縮文件體積會(huì)小很多。
image.png
圖片是否需要壓縮？
網(wǎng)站中常見(jiàn)的圖片的格式有jpg(jpeg)期犬、png河哑、gif、webp龟虎，這些格式的圖片本身已經(jīng)優(yōu)化了璃谨，所以不再需要gzip。實(shí)際上對(duì)圖片進(jìn)行g(shù)zip壓縮鲤妥，不僅沒(méi)有效果佳吞，反而可能使圖片體積更大。
字體是否需要壓縮棉安？
從阿里巴巴矢量圖庫(kù)生成的圖標(biāo)字體的css中我們可以看出底扳，一般常見(jiàn)的字體文件有：eot、woff贡耽、ttf衷模、svg，另外woff2是以base64的格式存儲(chǔ)的菇爪。
@font-face {font-family: "iconfont";
src: url('iconfont.eot?t=1587624344896'), /* IE9 */
url('iconfont.woff?t=1587624344896') format('woff'),
url('data:application/x-font-woff2;charset=utf-8;base64,...') format('woff2'),
url('iconfont.ttf?t=1587624344896') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+ */
url('iconfont.svg?t=1587624344896#iconfont') format('svg'); /* iOS 4.1- */
}
svg算芯、eot 和 ttf 這三種格式的字體文件可以使用CompressionWebpackPlugin進(jìn)行壓縮，并且配合Nginx的gzip_types配置凳宙，woff和woff2格式的字體文件不需要gzip熙揍。
服務(wù)器配置gzip壓縮
Nginx是前端文件常用的服務(wù)器，Nginx服務(wù)器的配置文件nginx.conf的http模塊：
server {
# 開(kāi)啟gzip on為開(kāi)啟氏涩，off為關(guān)閉
gzip on;
# 檢查是否存在請(qǐng)求靜態(tài)文件的gz結(jié)尾的文件届囚，如果有則直接返回該gz文件內(nèi)容，不存在則先壓縮再返回
gzip_static on;
# 設(shè)置允許壓縮的頁(yè)面最小字節(jié)數(shù)是尖，頁(yè)面字節(jié)數(shù)從header頭中的Content-Length中進(jìn)行獲取意系。
# 默認(rèn)值是0，不管頁(yè)面多大都?jí)嚎s饺汹。
# 建議設(shè)置成大于10k的字節(jié)數(shù)蛔添，配合compression-webpack-plugin
gzip_min_length 10k;
# 對(duì)特定的MIME類(lèi)型生效,其中'text/html’被系統(tǒng)強(qiáng)制啟用
gzip_types text/javascript application/javascript text/css application/json;
# Nginx作為反向代理的時(shí)候啟用，開(kāi)啟或者關(guān)閉后端服務(wù)器返回的結(jié)果
# 匹配的前提是后端服務(wù)器必須要返回包含"Via"的 header頭
# off(關(guān)閉所有代理結(jié)果的數(shù)據(jù)的壓縮)
# expired(啟用壓縮,如果header頭中包括"Expires"頭信息)
# no-cache(啟用壓縮,header頭中包含"Cache-Control:no-cache")
# no-store(啟用壓縮,header頭中包含"Cache-Control:no-store")
# private(啟用壓縮,header頭中包含"Cache-Control:private")
# no_last_modefied(啟用壓縮,header頭中不包含"Last-Modified")
# no_etag(啟用壓縮,如果header頭中不包含"Etag"頭信息)
# auth(啟用壓縮,如果header頭中包含"Authorization"頭信息)
# any - 無(wú)條件啟用壓縮
gzip_proxied any;
# 請(qǐng)求加個(gè) vary頭兜辞，給代理服務(wù)器用的迎瞧，有的瀏覽器支持壓縮，有的不支持逸吵，所以避免浪費(fèi)不支持的也壓縮
gzip_vary on;
# 同 compression-webpack-plugin 插件一樣凶硅，gzip壓縮比（1~9），
# 越小壓縮效果越差扫皱，但是越大處理越慢足绅，一般取中間值
gzip_comp_level 6;
# 獲取多少內(nèi)存用于緩存壓縮結(jié)果捷绑，‘16 8k’表示以8k*16 為單位獲得。
# PS: 如果沒(méi)有.gz文件氢妈，是需要Nginx實(shí)時(shí)壓縮的
gzip_buffers 16 8k;
# 注：99.99%的瀏覽器基本上都支持gzip解壓了粹污，所以可以不用設(shè)這個(gè)值,保持系統(tǒng)默認(rèn)即可。
gzip_http_version 1.1;
}
