Explore four options for Webpack import dynamic parameters

This article mainly expands importon parameters. importFunction import is a function that everyone is very familiar with. We can use it to do various lazy loading optimization schemes. More complex lazy loading can be achieved through importthe dynamic parameters of .

We can use dynamic expressions to represent a string in a file path.

import('./folder/' + 'staicFile' + '.js')
import('./animals/' + dynamicFile + '.js')
复制代码

Here dynamicFileis importthe dynamic parameter part of . The following will discuss the different effects of different configurations of dynamic parameters in Webpack .

How dynamic parameters affect compilation

Webpack itself is a static template packaging tool, it doesn't care what happens at runtime, so even if we importuse dynamic parameters, we have to think from the perspective of compile time.

Although this dynamic parameter is unknown at compile import()time , we can still implement lazy loading by using a function with dynamic parameters .

Webpack can't load any modules at runtime, but this importvalue must be known at runtime, so we can only find all values ​​that match the possibility of this dynamic import feature at compile time.

We can do a simple example here, there is a directory called mainFolder with various files in it:

├── mainFolder
│   ├── file1.js
│   ├── file2.js
│   ├── file3.js
├── index.js
复制代码

Each example uses the following importfunctions :

import(`./mainFolder/${fileName}.js`)
复制代码

For the purposes of this paragraph, each ${fileName}refers to a dynamic part , which is replaced by default /.*/. In addition import, dynamic template expressions in can have multiple dynamic parts.

我们最终会把提供的参数生成一个可以决定 Webpack 引入那些文件的正则对象。然后我们会从路径中第一段静态部分开始不断遍历，然后读取出来的值都会去和正则匹配，Webpack 在这个读取匹配的过程中有很多种模式可以使用，这部分我们后面再说。

在此示例中，生成的 RegExp对象 /^./.*.js$/ 将 mainFolder/ 目录中的所有文件进行扫描一遍 regExp.test('./cat.js') 找到合适的文件之后再进行打包，这部分都是再编译时完成的。

Webpack 关于这部分的配置其实是在模块上下文中确定的。比如 /.*/ 就可以在 wrappedContextRegExp 字段中修改

module.exports = {
  //...
  module: {
    exprContextCritical: true,
    exprContextRecursive: true,
    exprContextRegExp: false,
    exprContextRequest: '.',
    unknownContextCritical: true,
    unknownContextRecursive: true,
    unknownContextRegExp: false,
    unknownContextRequest: '.',
    wrappedContextCritical: false,
    wrappedContextRecursive: true,
    wrappedContextRegExp: /.*/,
    strictExportPresence: false,
  },
};
复制代码

我们也没必要全部记住，这里列出比较重的几个字段放在 webpack.config.js 中

// wepback.config.js
module: {
  parser: {
    javascript: {
      wrappedContextRegExp: /.*/, // wrappedContextRegExp我们可以告诉 webpack 用什么替换表达式的动态部分
      wrappedContextRecursive: true // wrappedContextRecursive指定是否应该遍历嵌套目录
    }
  }
}
复制代码

• wrappedContextRegExp：告诉 Webpack 用什么替换表达式的动态部分 默认就是 /.*/

• wrappedContextRecursive：指定是否应该深度遍历目录

那知道了配置参数，我们还要了解动态参数是如何影响 Webpack 打包的，这里主要涉及三个参数，我们依次说明。

lazy 模式

lazy 就是默认的模式，在我们的应用程序 import 代码中使用该函数：

import(/* webpackChunkName: 'mainFolder' */ `./mainFolder/${fileName}.js`)
  .then( => {
    console.warn(res);
    res.default();
  })
  .catch(console.warn);
复制代码

假设我们在 mainFolder 中有三个模块，那 dist 目录中就会出现 mainFloder0.js、 mainFloder1.js、 mainFloder2.js 三个块。这是 lazy 选项的行为。

├── dist
│   ├── mainFolder0.js
│   ├── mainFolder1.js
│   ├── mainFolder2.js
│   ├── index.js
复制代码

如果在目录中找不到文件的名字则会抛出错误。

但是如果 Webpack 创建多个 chunk，最终只有一个 chunk 匹配路径，这不是浪费资源吗？

实际上其实没问题，因为所有这些可能的块只是保存在服务器上。除非浏览器需要它们，否则它们不会发送到浏览器，所以这种情况对用户还是无感的，不会影响用户体验。

另外动态参数与编译时就知道路径的静态参数一样，加载完的块将被缓存，因此他也不会浪费请求资源，以防多次需要请求相同的块。

Webpack 将加载的块存储在一个映射中，这样如果请求的块已经被加载，它将立即从映射中检索。映射的键是块的 ID，值取决于块的状态：

缓存码	含义
0	块已经被加载
Promise	模块正在被加载
undefined	模块之前还没被请求过

我们可以从该图中注意到已创建的 3 个子块以及父块。我们从父模块来获取其他子模块的路径来源信息。

Webpack 在内部处理这种路径的方式也是通过一个映射，其中键是文件名（ mainFolder 目录中的文件名），值是数组。

数组的模式将是 { filename: [moduleId, moduleExportsMode?, chunkId] } 。

• 模块ID: 他能知道模块加载完成时需要什么 chunk 去加载。
• 块ID：会去通过浏览器请求相应的文件， 在相应文件的 HTTP 请求中使用。
• moduleExportsMode: 模块类型： 主要是为了实现兼容性，9 表示一个简单的 ES 模块，需要带有 moduleId 的模块。7表示一个 CommonJS 模块。

无论我们使用何种模式，都会使用这种用于跟踪模块及其特征的映射概念。

var map = {
    "./file1.js": [
            2,
            0
    ],
    "./file2.js": [
            3,
            1
    ],
    "./file3.js": [
            4,
            2
    ],
};
复制代码

如果用户需要导入 file2，带有 id 的块 3 将被加载，一旦块准备好，它将使用带有 id 的模块 0 来发送 HTTP 请求。

eager 模式

这里我们通过魔法注释来指定载入模式。

import(/* webpackChunkName: 'mainFolder',webpackMode: 'eager'  */ `./mainFolder/${fileName}.js`)
  .then( => {
    console.warn(res);
    res.default();
  })
  .catch(console.warn);
复制代码

使用 eager 模式时，不会创建任何额外的块，所有匹配 import 模式的模块都将成为同一个主块的一部分。

├── dist
│   ├── index.js
复制代码

当前模块将直接需要 mainFolder 目录内的模块，但实际上没有任何模块会被执行。它们只会被放置到模块的对象/数组中，当它单击按钮时，它将执行并检索该模块，而无需额外的网络请求或任何其他异步操作。

仔细看 main.js 中会有如下 map 对象↓

(module, __unused_webpack_exports, __webpack_require__) => {
  var map = {
    './file1.js': 2,
    './file2.js': 3,
    './file3.js': 4,
  };
  function webpackAsyncContext(req) {
    return webpackAsyncContextResolve(req).then(__webpack_require__);
  }
  function webpackAsyncContextResolve(req) {
    return Promise.resolve().then(() => {
      if (!__webpack_require__.o(map, req)) {
        var e = new Error("Cannot find module '" + req + "'");
        e.code = 'MODULE_NOT_FOUND';
        throw e;
      }
      return map[req];
    });
  }
  webpackAsyncContext.keys = () => Object.keys(map);
  webpackAsyncContext.resolve = webpackAsyncContextResolve;
  webpackAsyncContext.id = 1;
  module.exports = webpackAsyncContext;

  /***/
},
/* 2 */ // -> The `file1.js` file
/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {},
/* 3 */ // -> The `file2.js` file
/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {}
复制代码

因此，这种方法的优点是模块在需要时会立即被检索，而不是为每个模块发出额外的 HTTP 请求。

lazy-once 模式

lazy-once 是一个相对不常见的配置，所有与import 表达式匹配的模块都将添加到子块而不是主块中。

import(/* webpackChunkName: 'mainFolder',webpackMode: 'lazy-once'  */ `./mainFolder/${fileName}.js`)
  .then( => {
    console.warn(res);
    res.default();
  })
  .catch(console.warn);
复制代码

├── dist
│   ├── mainFolder
│   │   ├── file1.js
│   │   ├── file2.js
│   │   ├── file3.js
│   ├── index.js
复制代码

npm run build 运行后，该目录 dist 应该有 2 个文件：main.js 主块，以及 mainFolder。

这种加载模块的方式的好处将它们放在另一个可以延迟加载的块中。当用户按下按钮加载模块时，将通过网络请求整个 mainFolder 块，当它准备好时将执行并检索用户请求的模块。此外，这个新加载的块包含的所有模块都将由 Webpack 注册。

如果现在用户需要一个不同的模块，它也属于刚刚加载的块，网络上不会有任何额外的请求。这是因为块将从 Webpack 内部维护的缓存中提供服务，并且所需的模块将从 Webpack 记录它们的模块的数组/对象中检索。

weak模式

weak 这个模块就更陌生了，如果该模块函数已经以其他方式加载则尝试加载模块（即另一个 chunk 导入过此模块，或包含模块的脚本被加载）。这个模块仍会返回 Promise， 不过只有在客户端上已经有该 chunk 时才会成功解析。

如果该模块不可用，则返回 rejected 状态的 Promise，且网络请求永远都不会执行。

需要的 chunks 始终在（嵌入在页面中的）初始请求中提供，而不是在应用程序导航在最初没有提供的模块导入的情况下触发，这个除了 SSR 模式一般不常见。

Webpack 中的缓存模块

还记得上面 Webpack 会将加载的状态存储起来嘛，接下来会科普 Webpack 中具体的几种缓存方法。此过程相对冗长，熟练切图仔可以直接跳过了。

modules 字段

Webpack 打包后的产物无论是采用什么样的 sourcemap，他都有一个统一的 IIFE 作为起点。

(function (modules){
  function __webpack__require__(moduleId) {
    // ... 
    modules[moduleId].call(module.exports, module, module.exports, __webpack_require__);
    // 当方法调用完成后，就可以修改l表示内容加载完成
    module.l = true;
    return module.exports;
  }
  return __webpack__require__('./src/index.js')
}）({
   './src/index.js':
   (function (module, exportm __webpack__require) {
    // ... 文件 index.js 中被 webpack 处理后的源代码
   })
 },{
   './src/mainFolder/file1.js':
   (function (module, exportm __webpack__require) {
    // ... 文件 file1.js 中被 webpack 处理后的源代码
   })
 },{
   './src/mainFolder/file2.js':
   (function (module, exportm __webpack__require) {
    // ... 文件 file2.js 中被 webpack 处理后的源代码
   })
 },)
复制代码

仔细看他的结构就能明白 module 的作用就是缓存模块代码，从入口文件开始执行并且通过自执行函数引入不同的模块。

缓存的 module 中，每个 module 都会有一个 id，当设置开发环境时会默认以 module 所在文件的文件名为标识，生产环境默认以一个数字标识。modules 对象中的键名就是 moduleId，值就是模块经过 Webpack 打包后的源代码。

installedModules 字段

Webpack 中还有专门用来缓存已经加载过的模块的对象就是 installedModules，它的作用是缓存代码中 export 的内容。

如果我们看一下代码，会发现 Webpack 的 IIFE 以一个数组作为参数。每个数组元素都代表我们代码中的一个模块。

/******/ (function(modules) { // webpackBootstrap
/******/ ...
/******/ })
/************************************************************************/
/******/ ([
/* 0 */
/***/ (function(module, exports, __webpack_require__) {
....
/***/ ])
复制代码

installedModules 是一个缓存，可以在代码执行时存储所有模块。

/******/ // 定义对象来缓存模块
/******/ let installedModules = {};
复制代码

Webpack 从函数声明 __webpack_require__ 开始。它 moduleId 作为一个参数，并且检查调用此函数时缓存中是否已加载模块。如果是，则从缓存中返回模块，否则加载模块。

这里要注意 .exports 不是我们写的 module export。它是由 Webpack 运行时定义的自定义属性。

/******/  // webpack IIFE 执行此函数
/******/  function __webpack_require__(moduleId) {
/******/
/******/    // 判断当前缓存中是否存在要被加载的模块内容，如果存在直接返回
/******/    if(installedModules[moduleId]) {
/******/      return installedModules[moduleId].exports;
/******/    }
/******/  ...
复制代码

如果在缓存中找不到模块就加载它。还需要定义一个名为 module 的变量，它是一个对象并且具有三个属性。

1. i 指的是 moduleId。
2. l 是一个布尔标志，表示模块是否已经加载。
3. exports 是一个对象。

同时，我们会把当前 module 放入 installedModules[moduleId] 中。

/******/    // 缓存如果不存在就自己定义对象{}，执行被导入的模块内容加载
/******/    var module = installedModules[moduleId] = {
/******/      i: moduleId,
/******/      l: false,
/******/      exports: {}
/******/    };
/******/    ...
复制代码

然后我们调用刚刚放入缓存中的模块。

1. 我们通过 moduleId 获取模块。
2. 每个模块都是一个 IIFE。我们使用带有调用上下文 module.exports 的方法的 .call 调用它。
3. 我们要为提供模块所需的必要参数。
4. 我们传递现有 __webpack_require__ 函数，以便当前模块在需要时可以调用其他模块。

/******/    // 执行当前模块
/******/    modules[moduleId].call(module.exports, module, module.exports, __webpack_require__);
/******/    ...
复制代码

再然后我们将 l 标志设置为 true 这意味着模块现在已加载过，然后返回 module.exports。

This completes the __webpack_require__function .

/******/    // 当前模块设置成已加载
/******/    module.l = true;
/******/
/******/    // 返回 module.exports
/******/    return module.exports;
/******/    ...
复制代码

We call the first entry module at the end of the IIFE via . __webpack_require__It starts and either finds the module in the cache or loads it into the cache, and finally returns module.exports.

/******/ // 加载入口模块
/******/ return __webpack_require__((__webpack_require__.s = 0));
复制代码

installedChunks field

Cache the loaded chunks . When importing certain files, Webpack will pass __webpack_require__.eto determine whether the current file has been loaded.

• If it installChunks[chunkId]is 0, it has been loaded
• If it installChunks[chunkId]is not 0 && not undefinedit is judged to be loading
• If installChunks[chunkId]yes , it has not been loaded, and the resource will be requested undefinedthrough JSONP at this time

There are a lot of explanations on the Internet for this part. It is not necessary to elaborate too much. It webpack_require.e(chunkId)is to create a Promise object to track the loading status of the on-demand loading module, and it will also set a timeout threshold. If the loading times out, an exception will be thrown.

// 以下都是在自执行函数中

// 定义对象用于标识某个 chunId 对应的 chunk 是否完成加载
let installChunks = {
    main: 0
} // 0 加载过，promise 正在加载，undefined 还没加载
__webpack_require__.e = function (chunkId) {
    // 定义数组存放 Promise
    let _promises = [];
    // 获取 chunkId 对应的 chunk 是否已经完成了加载
    let _installChunkData = installChunks[chunkId];
    // 依据当前是否完成加载执行后续逻辑
    if (_installChunkData !== 0) {
        if (_installChunkData) {
            _promises.push(_installChunkData[2])
        } else {
            let promise = new Promise((resolve,reject) => {
                _installChunkData = installChunks[chunkId] = [resolve, reject]
            })
            _promises.push(_installChunkData[2] = promise);
            // 创建标签
            let script = document.createElement('script');
            script.src = jsonpScriptSrc(chunkId);
            // 写入 script 标签
            document.head.appendChild(script);
        }
    }
    // 执行promise
    return Promise.all(_promises)
}
复制代码

.eThe module is called in the source code of the parameter of the closure, you can refer to the following example

obt.addEventListener('click', function () {
  // .e 用于实现 jsonp 来加载内容，利用 Promise 实现异步加载
    __webpack_require__.e(/*! import() | login */ "login")
        // .t 用于加载指定 value 的模块内容
        .then(__webpack_require__.t.bind(null, /*! ./login.js */ "./src/login.js", 7))
        .then(res => {
            console.log(res)
        });
})
复制代码

Analysis of import related products after complete Webpack packaging

(function (modules) {
    // 定义对象来缓存模块
    let installedModules = {};
    // 定义对象用于标识某个 chunId 对应的 chunk 是否完成加载
    let installChunks = {
        main: 0
    } 
    // 定义懒加载的 webpackJsonpCallback,实现合并模块定义，改变 Promise 状态执行后续行为
    function webpackJsonpCallback(data) {
        // 获取要被动态加载的模块 id
        let _chunkIds = data[0];
        // 获取要被动态加载模块的依赖关系对象
        let _moreModules = data[1];
        // 循环判断 chunkIds 里对应的模块内容是否已经完成加载
        let chunkId, resolves = []
        for (let i = 0; i < _chunkIds.length; i++) {
            chunkId = _chunkIds[i];
            // 判断 installChunks 有没有，是否正在加载
            if (Object.property.hasOwnProperty.call(installChunks, chunkId) && installChunks[chunkId]) {
                resolves.push(installChunks[chunkId][0]) // 把resolve放进去
            }
            // 更新 chunk 状态
            installChunks[chunkId] = 0; // 整完了就完全加载了
        }
        for (moduleId in _moreModules) {
            if (Object.hasOwnProperty.call(_moreModules, moduleId)) {
                modules[moduleId] = _moreModules[moduleId];
            }
        }
        while (resolves.length) {
            resolves.shift()()
        }
    }
    // 定义 jsonpScriptSrc 实现 src 处理
    function jsonpScriptSrc(chunkId) {
        return __webpack_require__.p + '' + chunkId + '.built.js';
    }
    // 定义 m 来保存modules
    __webpack_require__.m = modules;
    // 定义 c 属性用来保存缓存
    __webpack_require__.c = installedModules;
    // 定义 e 方法用于实现 jsonp 来加载内容，利用 Promise 实现异步加载
    __webpack_require__.e = function (chunkId) {
        // ...
    }
    // 定义 __webpack_require__ 来替换 import， require 操作
    function __webpack_require__(moduleId) {
        // 判断当前缓存中是否存在要被加载的模块内容，如果存在直接返回
        if (installedModules[moduleId]) {
            return installedModules[moduleId].exports;
        }
        // 缓存如果不存在就自己定义对象，执行被导入的模块内容加载
        let module = installedModules[moduleId] = {
            i: moduleId,
            l: false,
            exports: {}
        }
        // 调用对应模块完成加载
        modules[moduleId].call(module.exports, module, module.exports, __webpack_require__);
        // 当方法调用完成后，就可以修改l表示内容加载完成
        module.l = true;
        return module.exports;
    }
    // 定义变量，存放数组
    let jsonpArray = window['webpackJsonp'] = window['webpackJsonp'] || [];
    // 保存原生 push 方法
    let oldJsonpFunction = jsonpArray.push.bind(jsonpArray);
    // 重写原生 push 方法
    jsonpArray.push = webpackJsonpCallback
    // 调用 __webpack_require__ 方法执行模块导入和加载
    return __webpack_require__(__webpack_require__.s = './src/index.js')
})({
    "./src/index.js":
        (function (module, exports, __webpack_require__) {
            let obt = document.getElementById('btn');
            obt.addEventListener('click', function () {
                __webpack_require__.e(/*! import() | login */ "login")
                    .then(__webpack_require__.t.bind(null, /*! ./login.js */ "./src/login.js", 7))
                    .then(res => {
                        console.log(res)
                    });
            })
            console.log('index.js work')
        })
})
复制代码

I hope that the discussion importof can help you in your work. End.