vue 路由懒加载的三种方式，以及遇到线上版本因为路由懒加载会偶发出现Loading chunk xx failed 的解决办法

vue 路由懒加载的三种方式（本人常用ES6的import按需加载）

const login = resolve => require(['@/pages/auth/login/login'], resolve)//vue异步组件按需加载方式

const login = () => import(/* webpackChunkName: "login" */ '@/pages/auth/login/login')//ES6按需加载  本人常用方式

const login = r=>require.ensure([],()=>r(require('@/pages/auth/login/login')))//vue+webpack 按需加载

路由懒加载之后会对项目性能提升很多，但是在服务器上会出现偶发性的报错Loading chunk 12 failed 之类的错误，反复几次项目打包上线后，想到了一种可能。如用户点击过的A模块被浏览器缓存了，当再重新打包上线后，用户在A模块依然是读取的缓存可以正常浏览；如果从A模块中点击链接到B模块中，由于每次打包的文件hash值不同，导致从服务器中找不到该模块，所以就抛出了Loading chunk xx failed的错误。所以如果再刷新一下页面，可恢复正常。查找资源之后也没有什么好的解决办法，只有通过router的onError函数捕获这个错误，刷新当前点击的路由，曲线救国，效果是一样的。贴上代码，放在router.js main.js都可以。

router.onError((error) => {
    const pattern = /Loading chunk (\d)+ failed/g;
    const isChunkLoadFailed = error.message.match(pattern);
    console.log(isChunkLoadFailed,'/Loading chunk (\d)+ failed/g','路由懒加载找不到对应的moudle')
    if (isChunkLoadFailed) {
        window.location.reload();
    }else{
        console.log(error)
    }
});