关于webpack4:webpack单文件懒加载分析实现

log.js文件

module.exports ="lazy load logger"

index.js文件

let oBtn = document.getElementById('btn')oBtn.addEventListener('click', function () {    import( /*webpackChunkName: "log"*/ './log.js').then((log) => {        console.log(log)    })})console.log('index.js内容')

点击按钮时,控制台显示lazy load logger
webpack在打包后，比之前的单文件加载多出了几件事件。懒加载的实现次要通过Promise来实现。
实现懒加载，要调用__webpack_require__.e办法，e办法是一个promise状态保留。e办法中，jsonP创立srcipt标签，指定src，通过Promise.all把状态往后传，在过程中，动静加载要被导入的内容,这里会通过window['webpackJsonP]调用push办法.调用webpackJsonpCallback办法，执行胜利的resolve办法，__webpack_require__.e后的then办法通过__webpack_require__.t办法加载log中的内容放在value中保留.这里多出的两个操作一个是jsonP，一个是__webpack_require__.e

// 定义webpackJsonpCallback，合并模块定义，扭转promise状态，还有之后的then操作    function webpackJsonpCallback(data) {        // 获取要被动静加载的模块id        let chunkIds = data[0];        //  获取须要被动静加载模块的依赖关系对象        let moreModules = data[1]        let chunkId        let resolves = []        // 循环判断chunkIds里对应的模块内容是否曾经实现加载        for (let i = 0; i < chunkIds.length; i++) {            chunkId = chunkIds[i]            if (Object.prototype.hasOwnProperty.call(inStalledChunks, chunkId) && inStalledChunks[chunkId]) {                //数组程序，resolve,reject,promise，这里是曾经加载，所以是0                resolves.push(inStalledChunks[chunkId][0])            }            // 更新chunk状态            inStalledChunks[chunkId] = 0;        }        for (let moduleId in moreModules) {            if (Object.prototype.hasOwnProperty.call(moreModules, moduleId)) {                modules[moduleId] = moreModules[moduleId]            }        }        while (resolves.length) {            resolves.shift()()        }    }    // 定义inStalledChunks 用于标识某个chunkId对应的chunk是否实现加载    let inStalledChunks = {        main: 0    }    // 定义jsonpScriptSrc实现src的解决    function jsonpScriptSrc(chunkId) {        return __webpack_require__.p + "" + chunkId + '.built.js'    }    // 定义e办法，用于实现 ：实现jsonP异步加载，利用promise来实现异步加载操作    __webpack_require__.e = function (chunkId) {        // 定义一个数组用于寄存promise        let promises = [];        // 获取chunkId对应的chunk是否曾经实现了加载        let installedChunkData = inStalledChunks[chunkId]        // 根据以后是否已实现加载的状态来执行后续的逻辑        if (installedChunkData !== 0) {            if (installedChunkData) {                // push一个残缺的promise                promises.push(installedChunkData[2])            } else {                // 执行加载操作                let promise = new Promise((resolve, reject) => {                    installedChunkData = inStalledChunks[chunkId] = [resolve, reject]                })                promises.push(installedChunkData[2] = promise)                // 创立标签                let script = document.createElement('script')                // 设置src                script.src = jsonpScriptSrc(chunkId)                // 写入script标签                document.head.appendChild(script)            }        }        // 执行promise        return Promise.all(promises)    }