详解webpack2异步加载套路

 更新时间:2018年09月14日 09:13:19   作者:苹果小萝卜   我要评论

这篇文章主要介绍了详解webpack2异步加载套路,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧

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看下编译后的代码

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

相关文章

  • js获取鼠标位置实例详解

    js获取鼠标位置实例详解

    这篇文章主要介绍了js获取鼠标位置的方法,结合实例形式详细分析了JavaScript响应鼠标事件获取并操作页面元素属性的相关技巧,需要的朋友可以参考下
    2015-12-12
  • JS中产生标识符方式的演变

    JS中产生标识符方式的演变

    本文记录下JS中产生标识符方式的演变,从ES5到ES6,ES5及其之前是一种方式,只包含两种声明(var/function),ES6则增加了一些产生标识符的关键字,如 let、const、class。
    2015-06-06
  • js获取GridView中行数据的两种方法 分享

    js获取GridView中行数据的两种方法 分享

    这篇文章介绍了js获取GridView中行数据的方法,有需要的朋友可以参考一下
    2013-07-07
  • JavaScript的兼容性与调试技巧

    JavaScript的兼容性与调试技巧

    可能在大家使用JavaScript效果时,会碰到在各个浏览器中页面的显示效果不同,甚至报错,这就是代码的兼容性问题。本文就是主要介绍JavaScript的兼容性与调试技巧,希望对大家有所帮助
    2016-11-11
  • 验证控件与Button的OnClientClick事件详细解析

    验证控件与Button的OnClientClick事件详细解析

    以下就是被我已知忽略的问题和解决方案,当我发觉这个问题的时候,冒出了一身冷汗,幸亏做了严格的服务器端验证,不然可就惨了
    2013-12-12
  • javascript 中模板方法单例的实现方法

    javascript 中模板方法单例的实现方法

    这篇文章主要介绍了javascript 中模板方法单例的实现方法的相关资料,希望通过本文能帮助到大家,需要的朋友可以参考下
    2017-10-10
  • js综合应用实例简单的表格统计

    js综合应用实例简单的表格统计

    在做调查问卷的过程中,遇到一个表格的统计问题,一个需要用到js方面的综合知识,感觉还不错所以记录下来与大家分享,感兴趣的朋友可以了解下
    2013-09-09
  • 浅析location.href跨窗口调用函数

    浅析location.href跨窗口调用函数

    本文详细介绍了location.href跨窗口调用函数,具体的使用方法及实例,有需要的朋友可以参考下
    2016-11-11
  • 解决Webpack 热部署检测不到文件变化的问题

    解决Webpack 热部署检测不到文件变化的问题

    下面小编就为大家分享一篇解决Webpack 热部署检测不到文件变化的问题,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2018-02-02
  • 实例讲解DataTables固定表格宽度(设置横向滚动条)

    实例讲解DataTables固定表格宽度(设置横向滚动条)

    下面小编就为大家带来一篇实例讲解DataTables固定表格宽度(设置横向滚动条)。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-07-07

最新评论