vue中gif加载一次_解决vue单页首次加载慢问题

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

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

2

3npm install --save-dev compression-webpack-plugin

//(此处有坑) 如果打包报错，应该是版本问题 ，先卸载之前安装的此插件 ，然后安装低版本

npm install --save-dev [email protected]

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

12http { //在 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;

}保存退出 ，并 重启 nginx1

2systemctl reload nginx.service

systemctl restart nginx.service

5 测试访问1curl -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加速去从别的服务器上加载第三方库而非自己的服务器，这样就会快很多.并且能节省自己服务器的带宽。如我想要axios包则输入网址为 https://unpkg.com/axios/ (末尾加斜杠代表你要查询该库的所有版本列表)

在index.html中 将你所需的第三方库的链接加载进来,如下图:

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

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

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