打包時生成gzip文件
@vue/cli3.0.0+
vue.config.js
vue配置
const productionGzipExtensions = /\.(js|css|json|txt|html|ico|svg)(\?.*)?$/i;
const CompressionWebpackPlugin = require('compression-webpack-plugin');
module.exports = {
configureWebpack: config =>{
if (process.env.NODE_ENV === 'production'){
return {
plugins: [
new CompressionWebpackPlugin({
filename: '[path].gz[query]',
algorithm: 'gzip',
test: productionGzipExtensions,
threshold: 2048,
minRatio: 0.8
})
]
}
}
}
};
build 后的信息
配置項參照webpack
vue-cli2.9.x
修改 config/index.js
image
成功后生成額外的 .gz 文件
image
打開瀏覽器
如果此時并未生效，可能服務(wù)器端沒開啟gzip
image
nginx gzip 配置
image
刷新瀏覽器
# 開啟gzip
gzip on;
# 啟用gzip壓縮的最小文件侍咱，小于設(shè)置值的文件將不會壓縮
gzip_min_length 1k;
# gzip 壓縮級別奋早，1-9劝贸，數(shù)字越大壓縮的越好，也越占用CPU時間崔梗，后面會有詳細說明
gzip_comp_level 1;
# 進行壓縮的文件類型焊切。javascript有多種形式九榔。其中的值可以在 mime.types 文件中找到。
gzip_types text/plain application/javascript application/x-javascript text/css application/xml text/javascript application/x-httpd-php image/jpeg image/gif image/png application/vnd.ms-fontobject font/ttf font/opentype font/x-woff image/svg+xml;
# 是否在http header中添加Vary: Accept-Encoding侥钳，建議開啟
gzip_vary on;
# 禁用IE 6 gzip
gzip_disable "MSIE [1-6]\.";
# 設(shè)置壓縮所需要的緩沖區(qū)大小
gzip_buffers 32 4k;
# 設(shè)置gzip壓縮針對的HTTP協(xié)議版本
gzip_http_version 1.0;
對比
開啟 gzip
關(guān)閉 gzip
