前言:打包mineadmin-vue前端后,访问速度很慢,打开控制台,发现有一个index-xxx.js文件达7M+,加载时间太长;
优化:
一:使用文件压缩(gzip压缩)
1、安装compression-webpack-plugin插件
npm i compression-webpack-plugin --save
2、配置nginx,开启gzip
# nginx.conf 文件配置
http {
...
#开启和关闭gzip模式
gzip on;
#gizp压缩起点,文件大于2k才进行压缩;设置允许压缩的页面最小字节数,页面字节数从header头得content-length中进行获取。 默认值是0,不管页面多大都压缩。建议设置成大于2k的字节数,小于2k可能会越压越大。
gzip_min_length 2k;
# 设置压缩所需要的缓冲区大小,以4k为单位,如果文件为7k则申请2*4k的缓冲区
gzip_buffers 4 16k;
# 设置gzip压缩针对的HTTP协议版本
gzip_http_version 1.0;
# gzip 压缩级别,1-9,数字越大压缩的越好,也越占用CPU时间
gzip_comp_level 3;
# 进行压缩的文件类型
gzip_types text/plain application/javascript text/css application/xml;
# 是否在http header中添加Vary: Accept-Encoding,建议开启
gzip_vary on;
# 不对 IE6 及更低版本进行压缩
gzip_disable "msie6";
}
# 前端 域名.conf 文件配置
service {
listen 80;
server_name www.xxx.com;
...
# 开启 gzip_static
gzip_static on;
}
3、重启nginx,重新打包
4、打开网页GZIP压缩检测 - 站长工具 测试前端域名
这一步大概能把7M文件压缩到2M左右,速度快了一些,但还是不够。
二、代码分割 (待续)