提升首页加载速度，浏览器对于同于网站下，允许同时加载的资源个数是有限的，chrome为6个还是7个，如果打包体积过大就会影响加载速度影响后面资源的加载。
因为我们环境上都是用的nginx因此我本地也是用的nginx做的测试，其他优化方法暂没有看。
实践：
本地能跑的项目，
npm run build打包到dist目录使用nginx代理，将代理指向远程的访问地址
gzip配置
我的配置文件主要部分：nginx.conf
http {
# gzip config
# 开启gzip
gzip on;
# 当返回内容大于1k时才会使用Gzip进行压缩
gzip_min_length 1k;
# 设置压缩级别，级别越低压缩速度越快文件压缩比越小
gzip_comp_level 9;
# 压缩MIME头类型
gzip_types text/plain application/javascript application/x-javascript text/css application/xml text/javascript application/x-httpd-php ;
# 增加响应头Vary: Accept-Encoding
gzip_vary on;
# 通过表达式，表明哪些UA头不使用gzip压缩
gzip_disable "MSIE [1-6]\.";
server {
# 本地代理的端口号
listen 8081;
# 本地代理的域名-可以随意
server_name localhost;
#charset koi8-r;
#access_log logs/host.access.log main;
# 将所有的资源都代理到https://xxx.test.ztosys.com/这个地址上面
location / {
root D:/workspace/ZTO/PG/ZTO-PGWeb/dist ;
index index.html index.htm;
proxy_pass https://xxx.test.ztosys.com/;
}
}
}
- 启动nginx，清空缓存，访问localhost:8081会发现之前请求
element-ui打包后的资源体积大小为【223kb】,使用gzip后大小为【44.5kb】，其他资源也可以很明显的看到。
image-20220118165746620.png
