webpack是怎么实现异步加载模块的? 为啥别人都说是jsonp?
我们写的 require.ensure 会被打包成什么样子？
首先，让我们先看看你在代码中用require.ensure，webpack会将这段代码打包成什么样子
require.ensure([], function () { let module2 = require("./module2") console.log(module2) }); 复制代码会被webpack编译为下面这样
// 这里的参数0 其实就是module2生成代码块之后的id __webpack_require__.e( /*! require.ensure */ 0) .then((function () { let module2 = __webpack_require__( /*! ./module2 */ "./module2.js") console.log(module2) }) ...//后面代码省略，主要是做异常处理 复制代码__webpack_require__.e 其实就是返回一个promise，你传递给require.ensure函数的第二个参数，其实就是个promise的回调函数，在里面是可以拿到异步加载的模块module2
__webpack_require__ 其实相当于是 require方法，主要是拿到异步加载的模块，这里就是module2了
require.ensure 是怎么实现异步加载的？拿到 promise的？
简单点说：
// 先定义一个全局的array对象 widow.webpackJsonp = [] // 重写这个的push方法 webpackJsonp.push = webpackJsonpCallback; function webpackJsonpCallback(data) { var chunkIds = data[0]; var moreModules = data[1]; var executeModules = data[2]; var moduleId, chunkId, i = 0, resolves = []; for (; i < chunkIds.length; i++) { chunkId = chunkIds[i]; if (Object.prototype.hasOwnProperty.call(installedChunks, chunkId) && installedChunks[chunkId]) { // __webpack_require__.e 函数中创建 promise 时， // 会把 installedChunks[chunkId] = [resolve, reject]; // 所以这里的installedChunks[chunkId][0]实际就是 promise.resolve 方法啦 resolves.push(installedChunks[chunkId][0]); } // 加载成功后 把 installedChunks[chunkId] 赋值为0，用来判断当前模块是否加载成功， // script.onload 的时候也会用来判断是否加载失败，显示提示信息 installedChunks[chunkId] = 0; } while (resolves.length) { resolves.shift()(); } ... }; __webpack_require__.e = function (chunkId) { var promises = []; // 从安装完的代码模块（installedChunks）中拿到当前要加载的模块 var installedChunkData = installedChunks[chunkId]; if (installedChunkData !== 0) { // 0 表示加载成功了已经 // 创建一个promise 然后把 resolve 和 reject 存储进数组 var promise = new Promise(function (resolve, reject) { installedChunkData = installedChunks[chunkId] = [resolve, reject]; }); promises.push(promise); // 创建一个script标签 var script = document.createElement('script'); // 设置请求地址 script.src = chunkId + ".bundle.js"; // 监听脚本加载成功和失败事件 script.onerror = script.onload = function (event) { // 加载完成后取出模块 var chunk = installedChunks[chunkId]; // 如果加载成功 chunk 会为 0 // 如果加载失败那么提示用户加载失败了 if (chunk !== 0) { // 这里的 chunk[1] 实际上是 promise 的 reject 函数 var error = { message: 'Loading chunk ' + chunkId + ' failed.'; } chunk[1](error); } }; // 标签插入DOM document.head.appendChild(script); } return Promise.all(promises); } 复制代码module2.js 打包后
(window["webpackJsonp"] = window["webpackJsonp"] || []).push([[0],{ /***/ "./module2.js": /*!********************!*\ !*** ./module2.js ***! \********************/ /*! no static exports found */ /***/ (function(module, exports) { eval("module.exports = function () {\n console.log('哈哈哈哈')\n}\n\n//# sourceURL=webpack:///./module2.js?"); /***/ }) }]); 复制代码实现步骤解析
1 创建一个
promise将[resolve, reject]存入installedChunks[chunkId]
var promise = new Promise(function (resolve, reject) { installedChunkData = installedChunks[chunkId] = [resolve, reject]; }); 复制代码2 创建一个
script标签， 设置其src为真实的请求地址，去加载这个模块，给script标签绑定onload事件处理函数，方便处理加载失败的情况3
module2.js加载后，实际上是一个调用webpackJsonp的push方法，因为push方法被重写为webpackJsonpCallback；故push方法调用时会调用webpackJsonpCallback4
webpackJsonpCallback执行时，拿到调用push方法时传递的chunkId，将这个模块的加载成功状态设置为0
installedChunks[chunkId] = 0; 复制代码
5 从
installedChunks中取出chunkId对应模块的resolve方法，执行后拿到组件了
Vue中使用 require.ensure
const home = r => require.ensure([], () => r(require('../page/home/home')), 'home')
其实可以改写为const home = resolve => require.ensure([], () => resolve(require('../page/home/home')), 'home')
为什么要这么写？因为这个是vue异步组件的语法，可以看vue官网的异步组件，如下图
Vue.component('async-example', function (resolve, reject) { setTimeout(function () { // 向 `resolve` 回调传递组件定义 resolve({ template: '<div>I am async!</div>' }) }, 1000) }) 复制代码即require.ensure 方法返回的promise的then方法执行时，会调用require('../page/home/home')拿到home组件的编译结果（组件的对象），然后将组件对象作为参数传递给vue提供的resolve方法，这样，vue就拿到了组件的定义，接下来Vue就可以继续执行它的组件渲染逻辑了
作者：小枫学幽默
链接：https://juejin.cn/post/7038237893243977736
伪原创工具 SEO网站优化 https://www.237it.com/