使用vue-router懒加载解决首次加载时资源过多导致的速度缓慢问题

最新推荐文章于 2024-03-14 14:40:15 发布
最新推荐文章于 2024-03-14 14:40:15 发布
阅读量1.2w 收藏 28
点赞数 7
分类专栏： 前端解决方案 Vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Fabulous1111/article/details/79389280
版权

使用vue-router懒加载解决首次加载时资源过多导致的速度缓慢问题

当你的SPA（单页应用程序）变得复杂时，打包构建后的Javascript包会变得非常大，以至于严重影响页面的加载时间。vue-router支持WebPack内置的异步模块加载系统。所以，那些使用较少的路由组件不必打包进bundles里，只需要在路由被访问时按需加载。

以下以一个简单的例子展示：

1：非懒加载的路由写法

 

2.懒加载路由写法

ECMAScripter
关注
  • 7
    点赞
  • 踩
  • 28
    收藏
    觉得还不错? 一键收藏
  • 5
    评论
专栏目录
通过vue-router懒加载解决首次加载时资源过多导致的速度缓慢问题
08-27
主要介绍了vue-router懒加载解决首次加载时资源过多导致的速度缓慢问题,文中单独给大家介绍了vue router路由懒加载问题，需要的朋友可以参考下
vue-router路由懒加载的实现（解决vue项目首次加载慢）
10-18
主要介绍了vue-router路由懒加载的实现（解决vue项目首次加载慢），小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
vue-router路由懒加载的三种实现方式
最新发布
我思,故我在的博客
03-14 1725
vue-router路由懒加载，也叫延迟加载，即在需要的时候进行加载，随用随载。
Vue3——首屏加载速度过慢解决方案
NanChen的博客
06-06 1807
具体一点讲，如果屏幕刷新率是60Hz,那么回调函数就每16.7ms被执行一次，如果刷新率是75Hz，那么这个时间间隔就变成了1000/75=13.3ms，换句话说就是，requestAnimationFrame的步伐跟着系统的刷新步伐走。在函数内部，创建了一个frameCount ref对象，并定义了一个updateFrameCount函数，用于递增frameCount的值，并在达到maxCount时停止递增。最后，函数返回一个defer函数，用于检查当前帧数是否达到指定的值n。用于实现一个延迟函数。
整理的集合
qdyydsjjql的博客
03-11 388
【代码】整理的集合。
vue-router懒加载速度缓慢问题及解决方法
10-17
主要介绍了vue-router懒加载速度缓慢问题及解决方法，非常不错，具有一定的参考借鉴价值,需要的朋友可以参考下
vue中如何解决组件跳转的时候，大量数据挂载到页面的时候，造成一瞬间卡顿
m0_68094390的博客
05-14 1140
加个定时器隐藏div容器，等数据挂载完毕，再展示容器，即可。
【Vue前端】路由延迟跳转
qq_51219960的博客
09-19 2831
路由延迟跳转
vue路由跳转卡顿解决办法--检查是否有video标签
大赚万万亿
06-19 3966
ios微信中,用innerHTML载入video标签后,可以用play()方法 而用ios微信中,用vue的动态组件功能,载入带video的标签,首次无法用play()播放 如果从a路由跳转到b路由卡顿,那么看看b路由里的组件是否有video标签 vue路由跳转卡顿,看看是否有video标签 ...
vue 首次加载缓慢
﹏゛Aeljinh陌琳的博客
12-04 884
可参考 https://www.cnblogs.com/zyulike/p/11190012.html 第一次打包vue的项目部署到服务器下时，发现初次加载特别的缓慢，将近20s页面才加载出来，完全没有开发环境上的那么流畅。主要原因是页面在打包后如果不进行相关配置会导致资源文件特别的大，一次想要全部加载完成会特别的耗时。这里简单总结一下自己用到的一些优化的方案。 首先我们可以安装webpack-bundle-analyzer 插件，通过这个插件我们可以在打包的时候看到打包文件的大小，可以明显的看出哪些文件
混合式 App 开发框架
wchg21131的博客
07-04 2981
混合式 App 开发框架
web前端面试题必备
weixin_43361807的博客
05-10 148
然后在编译的时候在该属性的数组dep中添加订阅者，v-model就会添加一个订阅者，接着用input举例，为input添加监听事件，修改值就会为这个属性赋值，触发这个属性的set方法，在set方法内通知订阅者数组dep，订阅者数组循环调用各个订阅者的update方法更新视图。我用vue开发的所有项目，都是采用组件化的思想开发的。Vue 是单页面应用，可能会有很多的路由引入 ，这样使用 webpcak 打包后的文件很大，当进入首页时，加载的资源过多，页面会出现白屏的情况，不利于用户体验。
VUE常用插件库总结
热门推荐
诗水人间
10-11 13万+
一、UI组件及框架 element- 饿了么出品的Vue2的web UI工具套件 mint-ui- Vue 2的移动UI元素 iview- 基于 Vuejs 的开源 UI 组件库 Keen-UI- 轻量级的基本UI组件合集 vue-material- 通过Vue Material和Vue 2建立精美的app应用 muse-ui- ...
vue——router解决首次加载资源过多导致的速度缓慢的问题（懒加载）
Sunshine0508的博客
08-05 1517
懒加载：延迟加载，即在需要的时候进行加载，随用随载。 像vue这种单页面应用，如果没有应用懒加载，运用webpack打包后的文件将会异常的大，造成进入首页时，需要加载的内容过多，时间过长，会出啊先长时间的白屏，即使做了loading也是不利于用户体验，而运用懒加载则可以将页面进行划分，需要的时候加载页面，可以有效的分担首页所承担的加载压力，减少首页加载用时。 简单的说就是：进入首页不用一次加载...
vue 加载太慢_通过Vue-router懒加载解决首次加载时资源过多导致的速度缓慢问题_含真_前端开发者...
weixin_39764379的博客
12-21 439
懒加载：也叫延迟加载，即在需要的时候进行加载，随用随载。像简单的说就是：进入首页不用一次加载过多懒加载的方式：import非懒加载的方式：importps:下面看下vue-router路由懒加载用vue.import Vue from 'vue'import Router from 'vue-router'Vue.use(Router)export default new Router({rout...
vue 项目首页加载速度优化以及解决首页白屏问题
郝峰vip的博客
12-14 1万+
Vue项目优化首页加载速度达到秒开以及解决首页白屏问题
vue性能优化
m0_69740976的博客
11-07 1103
vue性能优化
解决webpack打包后chunk.js 数量过多，影响加载速度问题（Jeecg）
魏知非的博客
08-17 1万+
项目目前用的是路由懒加载的模式，在每一次刷新都会重新加载很多js文件，由于路由都没有自定义webpackChunkName，所以就是默认的11(数字).js这种。 打包后默认是chunk-xxx.js 一种方法是移除prefetch，此插件是用来告诉浏览器在页面加载完成后，利用空闲时间提前获取用户未来可能会访问的内容。具体内容指路官网：https://cli.vuejs.org/zh/guide/html-and-static-assets.html#prefetch 代码如下： chainWeb
vue-router如何实现路由懒加载
04-02
在使用 Vue.js 进行项目开发时，通常会使用 vue-router 进行路由管理，而路由懒加载则是一种优化方式，可以在减少页面加载时间的同时，提高用户体验。下面是实现路由懒加载的方法： 1. 安装 babel-plugin-syntax-...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 5
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值