重写webpack,实现按需加载失败后再次成功加载

一、背景:

使用webpack的按需加载功能,当对应的功能JS文件加载失败(如突然断网等)后,重新操作无法进入的BUG,除非重新打开页面或者重启APP。

 

二、实现方式如下:

1)找到webpack的JsonpMainTemplatePlugin.js文件,目录如下,如果没有的话,请全局查找。

把图上标红的内容添加到该文件中:

"script.onerror = function(){loadScriptError(this)}",

 

2、添加全局函数处理二次路由的函数,在入口文件app.js中添加以下代码:

window.ScriptObj={};
window.loadScriptSuccess = function(myObject) {
    delete window.ScriptObj[getHash(window.location.hash)];
};
function getHash(url){
   var myReg = /#!\/\w+/i;
   return myReg.test(url) ? myReg.exec(url)[0] : '#!/home';
}
window.loadScriptError = function(myObject) {
    window.ScriptObj[getHash(window.location.hash)]=myObject;
    window.history.go(-1);
};
router.beforeEach(function (transition) {
    //window.scrollTo(0, 0);
    if(!window.ScriptObj[getHash(window.location.hash)]){
       transition.next();
       return
    }else{
       var script = document.createElement('script');
       script.type = 'text/javascript';
       script.charset = 'utf-8';
       script.async = true;
       script.onload=function(){loadScriptSuccess(this)}
       script.onerror = function(){loadScriptError(this)};
       script.src =window.ScriptObj[getHash(window.location.hash)].src;
       var head = document.getElementsByTagName('head')[0];
      head.appendChild(script);
      transition.next();
    }
});

Leave a Comment