解决vue单页首次加载慢问题

发表于

步骤一 vue-cli开启打包压缩 和后台配合 gzip访问

1.首先打开 config/index.js ，找到 build 对象中的 productionGzip ，改成 true

2. 打开 productionGzip: true 之前，先要安装依赖 compression-webpack-plugin ，官方推荐的命令是：

1
2
3
npm install --save-dev compression-webpack-plugin 
//(此处有坑) 如果打包报错，应该是版本问题 ，先卸载之前安装的此插件 ，然后安装低版本 
 npm install --save-dev compression-webpack-plugin@1.1.11

3.等安装好了，重新打包 npm run build ，此时打包的文件会 新增 .gz 文件。是不是比原来的js文件小很多呢，之后项目访问的文件就是这个.gz文件 。

4.后台nginx开启gzip模式访问，浏览器访问项目，自动会找到 .gz 的文件。加载速度明显提高。

  • 开启 nginx gzip ,在 nginx.conf 配置文件中 配置
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    http {  //在 http中配置如下代码，
      
       gzip on;
       gzip_disable "msie6"; 
       gzip_vary on; 
       gzip_proxied any;
       gzip_comp_level 8; #压缩级别
       gzip_buffers 16 8k;
       #gzip_http_version 1.1;
       gzip_min_length 100; #不压缩临界值
       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;
     }
  • 保存退出 ，并 重启 nginx 
    1
    2
    systemctl reload nginx.service  
    systemctl restart nginx.service

5 测试访问

  • 1
    curl -I -H "Accept-Encoding: gzip, deflate" "http://xxx.com"  //访问请求中 Content-Encoding: gzip 表示 压缩成功页面，

  • 同理 访问js，css等 可测试 是否压缩成功.

6 正式访问项目，此时项目加载速度明显提升

步骤二 webpack来打包vue项目，vendor.js过大问题解决

1.造成过大的原因是因为在main.js导入第三库太多时,webpack合并js时生成了vendor.js(我们习惯把第三方库放在vendor里面)造成的.如下图在main.js引用element-ui等第三方库。后果就是你的服务器端的js文件越大则用户加载页面的时间会越长(因为所需下载js的时间越久)


2.解决方案:采用cdn加速去从别的服务器上加载第三方库而非自己的服务器，这样就会快很多.并且能节省自己服务器的带宽。

  • 选用unpkg来作为第三方提供 https://unpkg.com 或者 https://www.bootcdn.cn/
  • 如我想要axios包则输入网址为 https://unpkg.com/axios/ (末尾加斜杠代表你要查询该库的所有版本列表)
  • 在index.html中 将你所需的第三方库的链接加载进来,如下图:

  • 在webpack.base.conf 中添加 externals 来告诉webpack我们这些第三方库不需要打包 如下图

  • 在 主文件main.js 或者其他 js 修改引用这些配置的第三方插件 ，如图：



  • 执行npm run build 来验证是否减小了。自己测试项目 vendor.js 由原来的 600k，减少到 100k