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

最新推荐文章于 2024-07-14 15:29:00 发布

银币与草绳

最新推荐文章于 2024-07-14 15:29:00 发布

阅读量984

点赞数

文章标签： vue中gif加载一次

本文链接：https://blog.csdn.net/weixin_30710557/article/details/111990393

版权

本文介绍了如何优化Vue项目，确保GIF仅加载一次，提高页面加载速度。通过修改config/index.js启用productionGzip，安装并配置compression-webpack-plugin进行文件压缩，同时更新nginx配置开启gzip。另外，针对vendor.js过大问题，采用CDN加速引入第三方库，通过externals配置避免webpack打包，并修改引用，最终显著减少了vendor.js的大小。

摘要由CSDN通过智能技术生成

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

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

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

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