工程化知识卡片 004: webpack 中的 code spliting 是如何动态加载 chunk 的？
一个 webpack 中运行时，包括最重要的两个数据结构：
__webpack_modules__: 维护一个所有模块的数组。将入口模块解析为 AST，根据 AST 深度优先搜索所有的模块，并构建出这个模块数组。每个模块都由一个包裹函数(module, module.exports, __webpack_require__)对模块进行包裹构成。__webpack_require__(moduleId): 手动实现加载一个模块。对已加载过的模块进行缓存，对未加载过的模块，根据 id 定位到__webpack_modules__中的包裹函数，执行并返回module.exports，并缓存。
在 webpack 中，通过 import() 可实现 code spliting.
import('./sum').then(m => { m.default(3, 4) }) // 以下为 sum.js 内容 const sum = (x, y) => x + y export default sum 复制代码使用 import() 加载数据时，以上代码将被 webpack 编译为以下代码
__webpack_require__.e(/* import() | sum */ 644).then(__webpack_require__.bind(__webpack_require__, 709)).then(m => { m.default(3, 4) }) 复制代码每一个 chunk 的代码如下，以下为 sum 函数所构建而成的 chunk:
"use strict"; (self["webpackChunk"] = self["webpackChunk"] || []).push([[644],{ /***/ 709: /***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => { __webpack_require__.r(__webpack_exports__); /* harmony export */ __webpack_require__.d(__webpack_exports__, { /* harmony export */ "default": () => (__WEBPACK_DEFAULT_EXPORT__) /* harmony export */ }); const sum = (x, y) => x + y /* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (sum); /***/ }) }]); 复制代码以下两个数据结构是加载 chunk 的关键:
__webpack_require__.e: 加载 chunk，如 644 为 chunkId。该函数将使用 JSONP (document.createElement('script'))异步加载 chunk 并封装为 Promise。self["webpackChunk"].push: JSONP cllaback，收集 modules，如 709 为 sum 模块的 id。该函数将 709 置入__webpack_modules__中。
实际上，在 webpack 中可配置 output.chunkLoading 来选择加载 chunk 的方式
webpack({ entry: './index.js', mode: 'none', output: { filename: 'main.[contenthash].js', chunkFilename: '[name].chunk.[chunkhash].js', path: path.resolve(__dirname, 'dist/import'), clean: true, // 默认为 `jsonp` chunkLoading: 'import' } })
作者：shanyue
链接：https://juejin.cn/post/7016590445471875086