vue第一此加载过长使用懒加载以及懒加载带来的Loading chunk {n} failed

╰半橙微兮° 2021-12-09 03:59 182阅读 0赞

1.解决第一次加载过长

{path:"/",name: "homeLink",component:resolve => require(['@/components/Home.vue'],resolve)},
        {path:"/aboutWe",component:resolve => require(['@/components/AboutMe.vue'],resolve)},
        {path:"/login",name:"loginLink",component:resolve => require(['@/components/Login.vue'],resolve)},
        {path:"/register",name:"registerLink",component:resolve => require(['@/components/Register.vue'],resolve)},
        {path:"/hot",name:"hotLink",component:resolve => require(['@/components/Hot.vue'],resolve)},
        {path:"/crateArticle",component:resolve => require(['@/components/CreateArticle.vue'],resolve)},
        {path:"/articleManager",component:resolve => require(['@/components/ArticleManager.vue'],resolve)},
        {path:"/showArticle/:id",name:"showArticleLink",component:resolve => require(['@/components/ShowArticle.vue'],resolve)},
        {path:"/updateArticle",name:"updateArticleLink",component:resolve => require(['@/components/updateArticle.vue'],resolve)},
        {path:"/category/:cate", name:"categoryLink", component:resolve => require(['@/components/category.vue'],resolve)},
        {path:"/search/:search",name:"searchLink",component:resolve => require(['@/components/Search.vue'],resolve)},
        {path:"*",component:resolve => require(['@/components/Home.vue'],resolve)}

2.解决Loading chunk \{n\} failed

router.onError((error) => {
      const pattern = /Loading chunk (\d)+ failed/g;
      const isChunkLoadFailed = error.message.match(pattern);
      const targetPath = router.history.pending.fullPath;
      if(isChunkLoadFailed){
        router.replace(targetPath);
      }
    });

发表评论取消回复

表情：

评论列表（有 0 条评论，182人围观）

还没有评论，来说两句吧...

相关阅读

相关懒加载

<script type="text/javascript"> // 懒加载 // getBoundCl

向右看齐/ 2023年08月17日 15:55/ 0 赞/ 201 阅读

相关懒加载

为什么要使用懒加载？当我们进入到某个页面的时候，会有很多的图片，有些图片可能在下面，当我们点进页面但没有滑动全部展示时，其实下面的图片是没有啥作用的，白加载了，还降低网

青旅半醒/ 2022年12月13日 00:44/ 0 赞/ 341 阅读

相关懒加载(Lazy Loading) - MyBatis懒加载 - Spring懒加载

文章目录懒加载(Lazy Loading) MyBatis中懒加载的使用 Spring中懒加载的使用懒加载(

Dear 丶/ 2022年12月10日 15:53/ 0 赞/ 452 阅读

相关懒加载

<!doctype html> <html lang="en"> <head> <meta charset="UTF-8">

快来打我*/ 2022年05月28日 05:35/ 0 赞/ 447 阅读

相关懒加载，预加载

-------------------- 一.懒加载 > 1.what: > > 延迟加载，一种很好的优化网页性能方式。可视区域外的东西不会加载，减少服务器的负载

骑猪看日落/ 2022年05月14日 10:14/ 0 赞/ 449 阅读

相关 jQuery延迟加载（懒加载）

简介延迟加载（lazy load）又可称之为懒加载，他是为了避免一些无谓的性能开销而提出来的。所谓延迟加载，就是当真正需要数据的时候，才真正执行数据加载操作。可简单理解为

喜欢ヅ旅行/ 2022年05月09日 16:28/ 0 赞/ 1024 阅读

相关 vue第一此加载过长使用懒加载以及懒加载带来的Loading chunk {n} failed

1.解决第一次加载过长 {path:"/",name: "homeLink",component:resolve => require(['@/components/

╰半橙微兮°/ 2021年12月09日 03:59/ 0 赞/ 183 阅读

相关前端懒加载以及预加载

懒加载（延迟加载）：延迟加载图片或符合某些条件时才加载某些图片。预加载：提前加载图片，当用户需要查看时可直接从本地缓存中渲染。两种技术的本质：两者的行为是相反

客官°小女子只卖身不卖艺/ 2021年09月14日 01:14/ 0 赞/ 512 阅读

相关懒加载

懒加载 <template> <view> <scroll-view :scroll-into-view="'ss' + curr

亦凉/ 2021年07月25日 12:19/ 0 赞/ 807 阅读

相关 vue 图片懒加载和懒加载原理

在真实图片得到之前,展示懒加载设置的图片 1、安装 cnpm i vue-lazyload -S 2、main.js

你的名字/ 2021年07月24日 20:08/ 0 赞/ 934 阅读