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上关于这个问题的讨论：Loading chunk {n} failed 。
解决方法： 运用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）
博客链接：http://blog.csdn.net/qq_33599109
欢迎关注支持，谢谢！