vue项目加载优化之懒加载，以及Loading chunk {n} failed解决方

一、懒加载

懒加载：随时用随时加载，避免单页面应用一次性加载所造成的时间过长。

import Vue from 'vue'
import Router from 'vue-router'
Vue.use(Router)
export default new Router({

routes: [

{

path: '/',redirect: '/login'

},{

path: '/login',name: 'login',component: resolve => require(['../components/login.vue'],resolve)

},{

path: '/home',name: 'home',component: resolve => require(['../components/home.vue'],resolve),children: [{

path: '/hello',name: 'hello',component: resolve => require(['../components/hello.vue'],resolve)

}]

}]

})

二、Loading chunk {n} failed 错误处理

使用懒加载之后，可能会造成的问题有，导航点击没用，加载模块出现错误，这种问题出现的偶然性很高，github上关于这个问题的讨论： 。 解决方法： 运用vue-router的错误处理函数 onError 捕获错误，代码如下：

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);
    }
})

当捕获到了Loading chunk {n} failed的错误时，重新渲染目标页面。

作者：rookie.he（kuke_kuke） 博客链接： 欢迎关注支持，谢谢！

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!