聊聊 webpack 异步加载（二）：webpack 如何处理 import()

深入探讨webpack异步加载机制，本文重点解析import()处理流程。在加载拆包后的代码基础上，import()被当作chunk处理，通过window["webpackJsonp"]加载。回顾webpack bootstrap代码中四个关键缓存变量，即__webpack_require__.e。

明确import()转换后，文件路径替换为chunkId，作为参数调用__webpack_require__.e，聚焦于其实现。回顾installedChunks对象，其key为chunkid，值有四种状态。

深入探索__webpack_require__.e操作，关注webpackJsonpCallback。了解promise何时resolve，当code splitting加载代码时，webpack bootstrap已运行，window["webpackJsonp"]的push方法被替换。

从code splitting视角，理解执行__webpack_require__(moduleId)，加载入口代码，完成import()逻辑加载。绘制流程图，总结整个加载过程。

推荐阅读：《聊聊webpack异步加载（一）：webpack如何加载拆包后的代码》、《聊聊webpack异步加载（三）：webpack如何做到持久化缓存》。

热门标签

您可能感兴趣问答

Collapsible

热门标签

热点问答