【面试题】如何解决 Vue首屏加载过慢出现长时间白屏？_vue首页白屏优化面试题(1)

最新推荐文章于 2024-07-09 18:13:44 发布

2401_84447043

最新推荐文章于 2024-07-09 18:13:44 发布

阅读量502

点赞数 5

文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/2401_84447043/article/details/138238161

版权

本文介绍了如何优化Vue应用的首屏加载，减少白屏时间。通过调整gzip配置提高压缩效率，使用externals避免打包第三方库，注释掉不必要的Vue插件使用，以及引入预渲染策略如PrerenderSPAPlugin，提高页面渲染速度，确保更好的用户体验。

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

gzip_disable “msie6”;

gzip_vary on;

gzip_proxied any;

gzip_comp_level 6; #压缩级别:1-10，数字越大压缩的越好，时间也越长

gzip_buffers 16 8k;

gzip_http_version 1.1;

gzip_min_length 256; #gzip压缩最小文件大小，超出进行压缩（自行调节）

gzip_types text/plain text/css application/json application/x-javascript application/javascript text/xml application/xml application/xml+rss text/javascript application/vnd.ms-fontobject application/x-font-ttf font/opentype image/svg+xml image/x-icon;预渲染
复制代码


3.依赖模块采用第三方cdn资源


　　- 在首页index.html中引入，如：


     <script src="[cdn.bootcss.com/vue/2.6.10/…](https://bbs.csdn.net/topics/618166371)"> 


     <script src="[cdn.bootcss.com/vuex/3.0.1/…](https://bbs.csdn.net/topics/618166371)">


     <script src="[cdn.bootcss.com/vue-router/…](https://bbs.csdn.net/topics/618166371)">


     <script src="[cdn.