美文网首页
webpack中require.ensure的实现原理

webpack中require.ensure的实现原理

作者: 小枫学幽默 | 来源:发表于2021-07-16 16:26 被阅读0次

    首先,让我们先看看你在代码中用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 是怎么实现异步加载的?

    简单点说:

    // 先定义一个全局的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 加载后,实际上是一个调用webpackJsonppush方法,因为push方法被重写为webpackJsonpCallback;故push方法调用时会调用webpackJsonpCallback
    • 4 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官网的异步组件,如下图

    image.png

    require.ensure 方法返回的promise的then方法执行时,会调用require('../page/home/home')拿到home组件的编译结果(组件的对象),然后将组件对象作为参数传递给vue提供的resolve方法,这样,vue就拿到了组件的定义,接下来Vue就可以继续执行它的组件渲染逻辑了

    相关文章

      网友评论

          本文标题:webpack中require.ensure的实现原理

          本文链接:https://www.haomeiwen.com/subject/mcqbpltx.html