37.加载优化-gzip

提升首页加载速度，浏览器对于同于网站下，允许同时加载的资源个数是有限的，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