The author | vayne reprint please indicate the source: juejin. Cn/user / 272334…

While the previous article explained how WebPack loads unpacked code, this article explains how WebPack handles import(). Import () contains code that webpack treats as chunk and is also loaded through window[“webapckJsonp”]. This article should be easy to understand given the explanation in the previous article. Before I start, let’s review the four cache variables that are very important in the Webpack Bootstrap code

  • Modules: Cache module code blocks. Each module has an ID. By default, the development environment is identified by the file name of the file where the module resides, and the production environment is identified by a number. Modules is an object where the key is the Module ID and the value is the source block of the corresponding module.

  • InstalledModules: Cache modules that have already been loaded. This simply means that statements like import somemodule from ‘XXX’ have already been run. InstalledModules is an object. The key is the Module ID, and the value is the exported variable of the corresponding module. (This is different from the value of modules, where the value stores the export variable in the module code.)

  • InstalledChunks: chunks that have already been loaded in the cache. Simply put, modules containing chunks in other JS files are synchronized to the current file. Each chunk has an ID, identified by a number by default. InstalledChunks is also an object, where the key is the chunk ID and the value is in four cases:

  • Undefined: chunk not loaded

  • Null: the chunk preloaded/prefetched

  • Promise: the chunk loading

  • Zero: the chunk of the loaded

  • DeferredModules: Cache the chunk ids required to run the current Web App and the entry Module ids (299 in the screenshot identifies the id of the entry Module, 0 and 1 identify the ids of the other two chunks required to run). For example, React and react-dom are packaged separately into separate JS files, and the entry files need to wait for react and react-dom to load successfully before running (not covered in this article).

import() –> webpack_require.e

First take a look at the transformed import() code

The file path was replaced with chunkId, and __webpack_require__.e was called as an argument, focusing on the implementation of webpack_require.e

“InstalledChunks” is an installedChunks object, where the key is the chunk ID and the value is a chunk id.

  • Undefined: chunk not loaded

  • Null: Chunk preloaded/ preloaded

  • Promise: the chunk loading

  • Zero: the chunk of the loaded

  • InstalledChunks [chunkId] is loaded, if yes, return promise.all ([])

  • Check whether installedChunks are loaded. If yes, add promises to Promises array

  • If not, create promises and assign installedChunks[chunkId] = [resolve, Reject] to promises array

  • Dynamically create script tags, add onError and onload events, and handle load timeouts

  • The loading timeout handler is cleared either on success or failure

  • If the load did not succeed, construct an error message. Remember installedChunks = [resolve, reject]? That’s where it comes in. Chunk1 is Reject (error), the reject that triggers promises

  • Webpack_require. e returns the PRMises array and waits for the chunk load to complete

webpackJsonpCallback

When will promise resolve? When code spliting loads the code, webpack’s bootstrap has already been run, meaning that the window[“webapckJsonp”] push method has been rewritten as webpackJsonpCallback

Now let’s go through the logic again in code spliting

  • The data argument is of the form [chunkId[], modules[]]

  • The first for loop determines whether installedChunks[chunkId] are being loaded, and installedChunks = [resolve, reject]. If installedChunks[chunkId][0] are loaded correctly, installedChunks[chunkId][0] is resolve

  • The second for loop saves the module contained in the current chunk to the modules variable of the entry file

  • If resolve() is executed, webpack_require.e returns a fullfilled promise indicating that chunk has completed loading

Execute webpack_require(moduId) to load the entry code so that the import() logic is loaded

Again, draw a flow chart to summarize