详解webpack2异步加载套路


Posted in Javascript onSeptember 14, 2018

webpack提供的一个非常强大的功能就是code spliting(代码切割)。

在webpack 1.x中提供了

require.ensure([], () => {
    let module = require('./page1/module');
    // do something
  }, 'module1')

利用require.ensure这个API使得webpack单独将这个文件打包成一个可以异步加载的chunk.

具体的套路见我写的另一篇blog: webpack分包及异步加载套路

一句话总结就是:

在输出的runtime代码中,包含了异步chunk的id及chunk name的映射关系。需要异步加载相应的chunk时,通过生成script标签,然后插入到DOM中完成chunk的加载。通过JSONP,runtime中定义好函数,chunk加载完成后即会立即执行这个函数。

从编译生成后的代码来看,webpack 1.x从chunk的加载到执行的过程处理的比较粗糙,仅仅是通过添加script标签,异步加载chunk后,完成函数的执行。

这个过程当中,如果出现了chunk加载不成功时,这种情况下应该如何去容错呢?

在webpack2中相比于webpack1.x在这个点的处理上是将chunk的加载包裹在了promise当中,那么这个过程变的可控起来。具体的webpack2实现套路也是本文想要去说明的地方。

webpack提供的异步加载函数是

/******/   // This file contains only the entry chunk.
/******/   // The chunk loading function for additional chunks
      // runtime代码里面只包含了入口的chunk
      // 这个函数的主要作用:
      // 1. 异步加载chunk
      // 2. 提供对于chunk加载失败或者处于加载中的处理
      // 其中chunk加载状态的判断是根据installedChunks对象chunkId是数字0还是数组来进行判断的
/******/   __webpack_require__.e = function requireEnsure(chunkId) {
        // 数字0代表chunk加载成功
/******/     if(installedChunks[chunkId] === 0) 
/******/       return Promise.resolve();

/******/     // an Promise means "currently loading".
        // 如果installedChunks[chunkId]为一个数组
/******/     if(installedChunks[chunkId]) {
          // 返回一个promise对象
/******/       return installedChunks[chunkId][2];
/******/     }
/******/     // start chunk loading
        // 通过生成script标签来异步加载chunk.文件名是根据接受的chunkId来确认的
/******/     var head = document.getElementsByTagName('head')[0];
/******/     var script = document.createElement('script');
/******/     script.type = 'text/javascript';
/******/     script.charset = 'utf-8';
/******/     script.async = true;
        // 超时时间为120s
/******/     script.timeout = 120000;

/******/     if (__webpack_require__.nc) {
/******/       script.setAttribute("nonce", __webpack_require__.nc);
/******/     }
        // 需要加载的文件名
/******/     script.src = __webpack_require__.p + "js/register/" + ({"2":"index"}[chunkId]||chunkId) + ".js";
        // 120s的定时器,超时后触发onScriptComplete回调
/******/     var timeout = setTimeout(onScriptComplete, 120000);
        // chunk加载完毕后的回调
/******/     script.onerror = script.onload = onScriptComplete;
/******/     function onScriptComplete() {
/******/       // avoid mem leaks in IE.
/******/       script.onerror = script.onload = null;
          // 清空定时器
/******/       clearTimeout(timeout);
          // 获取这个chunk的加载状态
          // 若为数字0,表示加载成功
          // 若为一个数组, 调用数组的第2个元素(第二个元素为promise内传入的reject函数),使得promise捕获抛出的错误。reject(new Error('xxx'))
/******/       var chunk = installedChunks[chunkId];
/******/       if(chunk !== 0) {
/******/         if(chunk) chunk[1](new Error('Loading chunk ' + chunkId + ' failed.'));
/******/         installedChunks[chunkId] = undefined;
/******/       }
/******/     };
        
        // 每次需要进行异步加载chunk时,会将这个chunk的加载状态进行初始化为一个数组,并以key/value的形式保存在installedChunks里
        // 这个数组为[resolve, reject, promise];
/******/     var promise = new Promise(function(resolve, reject) {
/******/       installedChunks[chunkId] = [resolve, reject];
/******/     });
/******/     installedChunks[chunkId][2] = promise;

/******/     head.appendChild(script);
        //返回promise
/******/     return promise;
/******/   };

我们再来看看路由配置文件编译后生成的代码index.js, 特别注意下__webpack_require__.e这个异步加载函数:

Router
.home('path1')
.addRoute({
  path: 'path1',
  animate: 'zoomIn',
  viewBox: '.public-path1-container',
  template: __webpack_require__(5),
  // 挂载controller
  pageInit: function pageInit() {
    var _this = this;

    console.time('route async path1');
    // 异步加载0.js(这个文件是webpack通过code spliting自己生成的文件名)
    // 具体异步加载代码的封装见?分析
    // 其中0.js包含了包含了path1这个路由下的业务代码
    // __webpack_require__.e(0) 起的作用仅为加载chunk以及提供对于chunk加载失败错误的抛出
    // 具体的业务代码的触发是通过__webpack_require_e(0).then(__webpack_require__.bind(null, 8)).then(function(module) { ... })进行触发
    // __webpack_require__.bind(null, 8) 返回的是module[8]暴露出来的module
    // 这段代码执行时,首先初始化一个module对象
    // module = {
    //    i: moduleId, // 模块id
    //    l: false,   // 加载状态
    //    exports: {}  // 需要暴露的对象
    //  }
    // 通过异步加载的chunk最后暴露出来的对象是作为了module.exports.default属性
    // 因此在第二个方法中传入的对象的default属性才是你模块8真正所暴露的对象
    __webpack_require__.e/* import() */(0).then(__webpack_require__.bind(null, 8)).then(function (module) {
      var controller = module.default;
      Router.registerCtrl('path1', new controller(_this.viewBox));
    // 添加错误处理函数,用以捕获前面可能抛出的错误
    }).catch(function (e) {
      return console.log('chunk loading failed');
    });
  },

  // 进入路由跳转之前
  beforeEnter: function beforeEnter() {},

  // 路由跳转前
  beforeLeave: function beforeLeave() {}
})
.addRoute({
  path: 'path2',
  viewBox: '.public-path2-container',
  animate: 'zoomIn',
  template: __webpack_require__(6),
  pageInit: function pageInit() {
    var _this2 = this;

    __webpack_require__.e/* import() */(1).then(__webpack_require__.bind(null, 9)).then(function (module) {
      console.time('route async path2');
      var controller = module.default;
      Router.registerCtrl('path2', new controller(_this2.viewBox));
    }).catch(function (e) {
      return console.log('chunk loading failed');
    });
  },
  beforeEnter: function beforeEnter() {},
  beforeLeave: function beforeLeave() {}
});

Router.bootstrap();

总结一下就是:

webpack2相比于webpack1.x将异步加载chunk的过程封装在了promise当中,如果chunk加载超时或者失败会抛出错误,这时我们可以针对抛出的错误做相应的错误处理。

此外还应该注意下,webpack2异步加载chunk是基于原生的promise。如果部分环境暂时还不支持原生promise时需要提供polyfill。另外就是require.ensure可以接受第三个参数用以给chunk命名,但是import这个API没有提供这个方法

更多的细节大家可以运行demo看下编译后的代码

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JQuery 操作Javascript对象和数组的工具函数小结
Jan 22 Javascript
niceTitle 基于jquery的超链接提示插件
May 31 Javascript
关于jquery append() html时的小问题的解决方法
Dec 16 Javascript
js/ajax跨越访问-jsonp的原理和实例(javascript和jquery实现代码)
Dec 27 Javascript
将json当数据库一样操作的javascript lib
Oct 28 Javascript
js焦点文字滚动效果代码分享
Aug 25 Javascript
分享12个非常实用的JavaScript小技巧
May 11 Javascript
domReady的实现案例
Nov 23 Javascript
jQuery 循环遍历改变a标签的href(实例讲解)
Jul 12 jQuery
详解js跨域请求的两种方式,支持post请求
May 05 Javascript
js实现跟随鼠标移动的小球
Aug 26 Javascript
JS实现点击掉落特效
Jan 29 Javascript
关于在vue 中使用百度ueEditor编辑器的方法实例代码
Sep 14 #Javascript
react项目实践之webpack-dev-serve
Sep 14 #Javascript
javacript replace 正则取字符串中的值并替换【推荐】
Sep 13 #Javascript
vue删除html内容的标签样式实例
Sep 13 #Javascript
如何解决vue2.0下IE浏览器白屏问题
Sep 13 #Javascript
vue2.0获取鼠标位置的方法
Sep 13 #Javascript
vue实现动态列表点击各行换色的方法
Sep 13 #Javascript
You might like
php获取用户IPv4或IPv6地址的代码
2012/11/15 PHP
一个简单的php加密解密函数(动态加密)
2013/06/19 PHP
php微信开发之带参数二维码的使用
2016/08/03 PHP
Redis在Laravel项目中的应用实例详解
2017/08/11 PHP
thinkphp ajaxfileupload实现异步上传图片的示例
2017/08/28 PHP
PHP实现的mongoDB数据库操作类完整实例
2018/04/10 PHP
thinkphp5修改view到根目录实例方法
2019/07/02 PHP
jQuery-onload让第一次页面加载时图片是淡入方式显示
2012/05/23 Javascript
关于JS判断图片是否加载完成且获取图片宽度的方法
2013/04/09 Javascript
js操作iframe兼容各种主流浏览器示例代码
2013/07/22 Javascript
node.js中的buffer.Buffer.isBuffer方法使用说明
2014/12/14 Javascript
js完美解决IE6不支持position:fixed的bug
2015/04/24 Javascript
jquery模拟alert的弹窗插件
2015/07/31 Javascript
JavaScript使用闭包模仿块级作用域操作示例
2019/01/21 Javascript
js实现点击生成随机div
2020/01/16 Javascript
React实现轮播效果
2020/08/25 Javascript
解决vue加scoped后就无法修改vant的UI组件的样式问题
2020/09/07 Javascript
python zip文件 压缩
2008/12/24 Python
在Python中通过threading模块定义和调用线程的方法
2016/07/12 Python
简单谈谈Python中的元祖(Tuple)和字典(Dict)
2017/04/21 Python
Mac中Python 3环境下安装scrapy的方法教程
2017/10/26 Python
pandas按若干个列的组合条件筛选数据的方法
2018/04/11 Python
浅谈Python 多进程默认不能共享全局变量的问题
2019/01/11 Python
将python字符串转化成长表达式的函数eval实例
2020/05/11 Python
HTML5 通信API 跨域门槛将不再高、数据推送也不再是梦
2013/04/25 HTML / CSS
Interhome丹麦:在线预订度假屋和公寓
2019/07/18 全球购物
网站开发实习生的自我评价
2013/12/11 职场文书
法律专业学生的自我评价
2014/02/07 职场文书
音乐教学随笔感言
2014/02/19 职场文书
公司员工体检通知
2015/04/21 职场文书
绿色环保倡议书
2015/04/28 职场文书
2015年幼儿园安全工作总结
2015/05/12 职场文书
Redis5之后版本的高可用集群搭建的实现
2021/04/27 Redis
高性能跳频抗干扰宽带自组网电台
2022/02/18 无线电
AudioContext 实现音频可视化(web技术分享)
2022/02/24 Javascript
十大最强火系宝可梦,喷火龙上榜,第一名有双火属性
2022/03/18 日漫