webpack 异步加载配置文件_详解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]