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: r...

一、懒加载

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

@H_302_4@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上关于这个问题的讨论:Loading chunk {n} failed 。@H_404_11@ 解决方法: 运用vue-router的错误处理函数 onError 捕获错误,代码如下:

@H_302_4@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)@H_404_11@ 博客链接:http://blog.csdn.net/qq_33599109@H_404_11@ 欢迎关注支持,谢谢!

你可能在找的问题:

vue教程

Vue页面跳转动画效果的实现方法

百度了好久都没办法实现vue中一个页面跳到另一个页面,甚至到google上搜索也是没办法的,最终还是找了高人亲自指导,所以下面这篇文章主要给大家介绍了关于Vue页面跳转动画效果的实现方法,需要的朋友可以参考下

vue教程

vue构建动态表单的方法示例

这篇文章主要介绍了vue构建动态表单的方法示例,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧

vue教程

玩转vue的slot内容分发

这篇文章主要介绍了玩转vue的slot内容分发,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧

vue教程

vue 巧用过渡效果(小结)

这篇文章主要介绍了vue 巧用过渡效果(小结),小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧

微信扫一扫

微信扫一扫

微信扫一扫,分享到朋友圈

标题
返回顶部