客户反映前端页面首屏加载太慢,查了一下是前端项目打包出的js主文件太大,本文方案—前端打包使用compression-webpack-plugin插件压缩静态资源,服务端在Nginx开启Gzip属性。这样Nginx在访问资源时,如果该资源有gz文件,则会请求gz文件。
compression-webpack-plugin:是webpack压缩插件,引入该插件后,npm run build除了会生成压缩后的静态资源(JS、css),还会生成gz形式的JS、CSS。
首先安装插件compression-webpack-plugin
cnpm install compression-webpack-plugin@6.1.1
在配置文件中引入
代码:
process.env.NODE_ENV === 'production' &&
addWebpackPlugin(
new CompressionPlugin({
// asset: '[path].gz[query]', //目标资源名称。[file] 会被替换成原资源。[path] 会被替换成原资源路径,[query] 替换成原查询字符串
algorithm: 'gzip', //算法
test: new RegExp(
'\\.(js|css)$' //压缩 js 与 css
),
threshold: 10240, //只处理比这个值大的资源。按字节计算
minRatio: 0.8 //只有压缩率比这个值小的资源才会被处理
})
)
如上操作,前端打包出的文件就会小很多, 我这边是2.3M-->600k
需要服务端配合进行Nginx配置:
nginx开启gzip压缩
gzip on;
# 开启静态gz文件返回
gzip_static on;
gzip_buffers 32 4K;
gzip_comp_level 6;
gzip_min_length 1k;
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 image/x-icon;
gzip_disable "MSIE [1-6]\."; #配置禁用gzip条件,支持正则。此处表示ie6及以下不启用gzip(因为ie低版本不支持)
# 是否在http header中添加Vary: Accept-Encoding,建议开启
gzip_vary on;
将dist文件复制到本地Nginx的html文件中,在Nginx配置跳转:
server {
listen 3000;
server_name localhost;
location / {
root html;
index /dist/index.html;
}
location /static {
root html/dist;
}
}
在cmd中启动Nginx即可访问localhost:3000.
观察Network可以发现区别(注释Nginx的Gzip即可查看区别)