vue 首页加载缓慢、白屏现象的原因与解决办法

最新推荐文章于 2024-07-26 15:22:42 发布
最新推荐文章于 2024-07-26 15:22:42 发布
阅读量8.2k 收藏 64
点赞数 10
分类专栏： vue 文章标签： webpack vue.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/LSL3521/article/details/105227330
版权

vue项目打包上线后，首次打开会发现加载很慢，出现白屏的问题，

一、问题原因

打开控制台查看文件加载情况，会发现app.js/vendor.js这两个文件加载时间较长

image

二、解决办法

1、图片压缩

使用webpack打包文件时，可以看到图片资源显示过大，使用工具进行压缩

image

2、去掉.map文件

webpack打包文件时，会看到有一些.map文件生成

image

  • 修改：
    找到config文件夹下的index.js文件，build里边的productionSourceMap值改为false即可

最低0.47元/天 解锁文章
LSL3521
关注
  • 10
    点赞
  • 踩
  • 64
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
专栏目录
vue 项目首页加载速度优化以及解决首页白屏问题
郝峰vip的博客
12-14 1万+
Vue项目优化首页加载速度达到秒开以及解决首页白屏问题
Vue首屏白屏如何解决
youhebuke225的博客
05-30 880
通过结合以上解决方案，可以有效地解决Vue首屏白屏问题，并提升用户体验。在实际开发中，应根据项目的具体情况和需求，选择合适的解决方案进行优化。二、文件引用和打包问题。三、浏览器兼容性问题。四、异步数据请求问题。
【VUE】解决图片视频加载缓慢/首屏加载白屏的问题
热门推荐
西门吹雪
07-13 3万+
在 Vue3 项目中，有时候会出现图片视频加载缓慢、首屏加载白屏的问题,文中会介绍几种解决方案，希望可以帮到你
2024年Web前端最新vue 首页加载，速度优化及解决首页白屏问题_vue进入加载的首页，面试Web前端开发十大问题
2401_84619342的博客
05-11 904
在项目开发中，我们会用到很多第三方库，如果可以按需引入，我们可以只引入自己需要的组件，来减少所占空间，但也会有一些不能按需引入，我们可以采用CDN外部加载，在index.html中从CDN引入组件，去掉其他页面的组件import，修改webpack.base.config.js，在externals中加入该组件，这是为了避免编译时找不到组件报错。2、然后是静态资源css，js，之后解析js，生成HTML,也就是FCP阶段，css,js资源加载下来了，首次的内容绘制，有一个大结构了。
vue h5 首次打开加载缓慢、白屏几秒后才渲染解决方案 --- 加载启动页
拿回忆下酒
06-08 5107
首次打开 web app 应用，都会有一个尴尬的问题，就是加载慢、白屏好几秒。 原生APP 都有一个启动页，那么web app为什么就不能实现呢？或者折中一下，快点实现也可以啊！！！ 1、分析问题 web app 之所以打开慢，主要还是渲染的问题：DNS解析 – 服务器交互 – 浏览器页面渲染 我们可以通过cdn引入、去除map文件、异步加载、按需引入、压缩等等方法，这里我就不再阐述了，大家可以自行搜索 Vue项目优化 2、vue 虚拟dom 替换 我们大家都知道，vue、react 的双向数据绑定，
vue首次加载白屏问题
zzx262625的博客
01-07 1003
结论： 通过本文的指南，我们详细介绍了解决Vue首页白屏问题的方法。无论是检查入口文件引入、调试语法错误还是处理异步数据请求，这些方法都可以帮助开发者快速定位并解决Vue首页白屏问题。引言： Vue.js是一种流行的前端开发框架，但在实际开发中，有时会遇到Vue首页白屏问题。本文将深入探讨这个问题，并提供解决方法，帮助开发者快速解决Vue首页白屏问题。问题描述： Vue首页白屏问题通常是由于以下原因引起的：入口文件引入错误、组件语法错误或异步数据请求问题。实例演示： 假设我们遇到了入口文件引入错误的问题。
Vue首屏加载过慢出现白屏的六种优化方案
09-19 9897
公司业务展示官网开发，构建版本后在测试环境下，发下首屏加载损耗高达几十秒（服务器在国外，所以也导致加载时间变长），于是采用了以下方法来达到提速目的。
【VUE】解决VU2项目图片视频加载缓慢/首屏加载白屏的问题
西门吹雪
07-17 6273
前端项目中，有时候会出现图片视频加载缓慢、首屏加载白屏的问题之前写了一篇在VU3项目中的解决方案，现在讲一下在 Vue2 项目中的解决方法，方法思路都差不多，在代码示例上会有一些小差别。
vue实现图片懒加载（图片加载过多导致页面白屏加载缓慢）
weixin_51601829的博客
09-07 2898
在一次活动中后端返回的图片和信息过于多，在没有配置懒加载时上线以后导致页面加载白屏点击无反应等问题，经过查询发现vue插件 vue-lazyload 是一个用来实现图片懒加载的好插件，于是实验开始 1，安装插件 npm install vue-lazyload --save-dev 2，在main.js中引入（也可以单页面引入） import VueLazyLoad from 'vue-lazyload'; // 导入懒加载 Vue.use(VueLazyLoad,{ error:'../static/i
vue 首页加载缓慢、白屏现象
01-08
vue项目打包上线后，首次打开会发现加载很慢，出现白屏的问题， 一、问题原因 打开控制台查看文件加载情况，会发现app.js/vendor.js这两个文件加载时间较长 二、解决办法 1、图片压缩 使用webpack打包文件时，可以...
详解vue页面首次加载缓慢原因及解决方案
12-13
第一次打包vue的项目部署到服务器下时，发现初次加载特别的缓慢，将近20s页面才加载出来，完全没有开发环境上的那么流畅。主要原因是页面在打包后如果不进行相关配置会导致资源文件特别的大，一次想要全部加载完成会...
vue-router懒加载速度缓慢问题及解决方法
10-17
主要介绍了vue-router懒加载速度缓慢问题及解决方法，非常不错，具有一定的参考借鉴价值,需要的朋友可以参考下
webpack插件给所有的:src文件目录增加前缀
dongheng123的博客
07-25 252
全程借助chatgpt完成，感慨能力之强大啊。1.webpack4的版本写法。webpack 2 的版本。
webpack中的 loader 与 plugin
weixin_55932347的博客
07-26 384
loader主要用于实现 webpack 对不同类型模块的转换和加载，处理单个文件或文件类型。plugin主要用于执行更广泛的任务和自定义功能，通过监听 webpack 生命周期事件来执行操作，可以影响 webpack 整个打包过程。
【React】路由懒加载
小秀的博客
07-24 391
路由懒加载的原理是基于 ES6 的动态 import 特性，通过在 Webpack 打包时使⽤ React.lazy() 和 Suspense 进⾏懒加载，当路由被匹配时才会加载对应的组件。使⽤ React Router 进⾏⻚⾯路由时，将⻚⾯组件按需加载，⽽不是⼀次性加载所有⻚⾯组件。
乾坤: 微前端项目切换时样式闪动(从无样式变为正常样式需要等 css chunk 文件加载完成, 加载延时受网速影响)
最新发布
汤一飞
07-26 272
项目 webpack 打包配置(以 Vue.config.js 为例), css 配置里, 设置 extract: false (不使用 ExtractTextPlugin)点击基座项目页面左侧目录, 进入微前端子项目页面, 会有短暂的样式未加载效果一闪而过, 造成页面闪烁或更严重的其他样式错位问题。
react配置代理的3中方法
小码的博客
07-25 308
create-react-app中内置http-proxy-middleware，只需要在src目录下新建setupProxy.js。2.使用http-proxy-middleware库。1.使用create-react-app的代理配置。根目录建文件craco.config.js。3.craco 扩展webpack配置。可以在项目根目录下的。
vue异步加载组件白屏
08-18
当在Vue中使用异步加载组件时，有时候可能会遇到白屏的问题。这通常是由于异步加载组件的过程中，加载时间过长导致的。以下是一些常见的解决方法： 1. 添加加载状态：在异步加载组件的过程中，可以添加一个加载状态，显示一个loading界面或者加载动画，以提供用户反馈。这可以通过在组件的data中添加一个isLoading的状态来实现，并在加载完成后将其设置为false。 ```javascript data() { return { isLoading: true, // 初始加载状态为true component: null, // 初始化组件为null }; }, mounted() { import('./AsyncComponent.vue') .then((component) => { this.component = component.default; // 导入组件 }) .catch((error) => { console.error('Failed to load component:', error); }) .finally(() => { this.isLoading = false; // 加载完成，loading状态为false }); }, ``` 然后，在模板中根据isLoading状态来显示不同的内容： ```vue <template> <div> <!-- 根据isLoading状态显示不同内容 --> <div v-if="isLoading"> <!-- 显示loading界面或加载动画 --> <Loading /> </div> <div v-else> <!-- 异步加载的组件 --> <component :is="component" /> </div> </div> </template> ``` 2. 代码拆分与懒加载：Vue支持代码拆分和懒加载，可以将组件按需加载，避免在初始加载时就加载所有组件。可以使用`import()`函数进行动态导入组件。 ```javascript Vue.component('AsyncComponent', () => import('./AsyncComponent.vue')); ``` 这样，组件将会在需要使用时才进行加载，减少了初始加载的资源量。 3. 预加载组件：如果某个组件在初始加载时不会被立即使用，但是会在后续被频繁使用，可以考虑使用Vue提供的`Vue.component`的`preload`函数来预加载组件。这样可以在初始加载时就预先加载该组件，避免后续使用时的延迟。 ```javascript Vue.component('AsyncComponent', () => import('./AsyncComponent.vue').then(m => m.default), { preload: true }); ``` 通过以上方法，可以解决异步加载组件导致的白屏问题。希望对您有所帮助！如果还有其他问题，请随时提问。
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值