vue 首屏加载优化

关于vue 首屏加载优化这个问题网上博客有很多，优化的方面也很多，主要有：

1）路由懒加载。

2）组件按需加载

3）资源，请求异步加载

4）禁用sourcemap

5）禁用预加载

6）使用CDN

7）使用缓存

8）gzip压缩

9）分包

1、2、3点需要制定开发规范，并对开发人员进行宣贯，4、5，在vue.config.js中配置就可以解决。7、8带来的效果最明显，9主要解决的是小文件过多的问题。这里主要8,9,从而获得一个秒开的效果。

1、没有开启gzip压缩是的情况。

可以看到，前5个文件的size最大，耗时最长，而整体耗时也是高达5秒。

查看其中一个请求的响应头 Content-Encoding: bytes ， 请求的是字节，没有压缩。

2、nginx开启 gzip

编辑/etc/nginx/nginx.conf，增加配置如下，service nginx restart。

bash 复制代码

        gzip on; # 开启Gzip
        gzip_static on; # 开启静态文件压缩
        gzip_min_length  1k; # 不压缩临界值，大于1K的才压缩
        gzip_buffers     4 16k;
        gzip_comp_level 5;
        gzip_types     application/javascript application/x-javascript application/xml application/xml+rss application/x-httpd
-php text/plain text/javascript text/css image/jpg image/jpeg image/gif image/png; # 进行压缩的文件类型
        gzip_http_version 1.1;
        gzip_vary on;
        gzip_proxied   expired no-cache no-store private auth;
        gzip_disable   "MSIE [1-6]\.";

刷新浏览器，可以看到结果如下，请求的文件大小和请求时间都接近原来的0.3，整体耗时1秒。

查看其中一个请求的响应头 Content-Encoding: gzip ， 请求的是gzip文件，内容已压缩。

如果我们再vue打包的时候增加如下配置，会生成*.gz文件更好，nginx会直接读取这些.gz文件发送给浏览器。

javascript 复制代码

    plugins: [
      new CompressionPlugin({
        cache: false,                   // 不启用文件缓存
        test: /\.(js|css|html)?$/i,     // 压缩文件格式
        filename: '[path].gz[query]',   // 压缩后的文件名
        algorithm: 'gzip',              // 使用gzip压缩
        minRatio: 0.8                   // 压缩率小于1才会压缩
      })
    ]

3、在nginx 开启html，js等本地缓存。

bash 复制代码

        location /uhr/static/ {
                root /var/www/html/; 
                expires 10m;       # make browser cache
        }

注意 root 后面的路径不要配置错了，nginx 会使用它与 location 拼接到一起去读取本地文件。

expires 10m 会在response header中增加一条 Cache-Control:max-age=600

告诉浏览10分钟以内就不要来请求新文件了，10分钟以后再来，练习刷新，会发现所有/static/下的请求的time 都是0。