阅读 83

一个小前端的webpack 按需加载原理探索之路(二)

承接上文,先看下上次没搞明白的两个点,然后根据读到的源码写个简易版的异步加载;

上次代码中webpackJsonpCallck中有两个地方如下

webpackJsonCallback = (parentChunkLoadingFunction, data) {
    var [modules, moreModules, runtime] = data;
    // 。。。 此处省略模块安装
    if (runtime) runtime(__webpack_require__);
    if (parentChunkLoadingFunction) parentChunkLoadingFunction(data) 
    // 。。。 此处省略script loading resolve
}
复制代码

这个函数的调用用到了柯里化,填充参数分为了两步;

  • 情况一: runtime先加载

step1:

chunkLoadingGloabl.push = webpackJsonpCallback.bind(null, chunkLoadingGlobal.push.bind(chunkLoadingGlobal));
复制代码

step2(async module invoke):

// 作为入口的模块打包的时候会传入runtime,开始执行
(chunkLoadingGlobal.push([[chunkId], [modules], ?runtime]))();
复制代码
  • 情况二: 模块先加载

从webpack4开始运行时模块可以在其他模块后加载的,详情可以点击链接;

chunkLoadingGlobal.forEach(webpackJsonpCallback.bind(null, 0));
复制代码

来看下chunkLoadingGloabl的结构:[chunkIds, moreModules, ?runtime];

  • chunkIds(加载的chunkId)用于resolve对应chunk load 的 Promise;
  • moreModules 存储实际模块内容,用于安装;
  • runtime用于执行入口模块;

webpack4可以在控制台打印webpackJsonp查看,webpack5 打印 webpackChunkwebpack_build 查看;

然后我们来实现一个低配版模块加载,webpack 这段代码应该是解析完后生成的,解析过程还未深入了解,大家可以参考这个老哥写的babel import语法 js_深入原理:Babel原理与Babel插件实践; 所以先实现主要的模块加载,类似amd加载方式:

下面是一个简陋版本的实现:

(function (global) {
    let modules = {};
    let pathMap = {};
    function define (deps, fn) {
        if (typeof deps === 'function') {
            modules = {...modules, ...deps()};
            return
        }
        for (let [index, item] of deps.entries()) {
            if (modules[item]) {
                deps[index] = Promise.resolve(modules[item])
            } else {
                let structrue = [];
                deps[index] = new Promise((resolve, reject) => {
                    structrue = [() =>resolve(modules[item]), reject]
                });
                loadScript(item, structrue);
            }
        }
        Promise.all(deps).then(res => {
            let result = fn.apply(null, res);
            if (result) {
                modules = {...modules, ...result}
            }
        })
    }

    // 用于配置模块加载路径 
    define.config = function (config) {
        pathMap = config.paths
    }

    let inProgress = {};
    function loadScript (id, structure) {
        const url = pathMap[id];
        if (inProgress[url]) {
            // 该模块已经请求中;
            inProgress[url].push(structure);
            return;
        }
        const script = document.createElement('script');
        document.body.append(script);
        script.src = url;
        inProgress[url] = [structure];
        script.onload = function () {
            let callbacks = inProgress[url];
            delete inProgress[url];
            callbacks.forEach(([resolve, reject]) => {
                resolve();
            });
            document.body.removeChild(script);
        }
        script.onerror = function (err) {
            let callbacks = inProgress[url];
            delete inProgress[url];
            callbacks.forEach(([resolve, reject]) => {
                reject(err);
            });
            document.body.removeChild(script);
        }
    }
    global.define = define;
})(window);
复制代码

使用方式如下:

<script src="./module.js"></script>
<script>
define.config({
    paths: {mutilple: './multiple.js'}
});

define(['mutilple'], function (mutilple) {
    console.log(mutilple);
    console.log(mutilple(2, 3));
})
</script>
复制代码

感觉看了编译完的代码主要只是感觉这个promise 的 resolve 和 reject 还可以传到别的地方去执行,这个挺有趣;

好了,整体分析到此结束,其实看编译完的代码和源码,揣测作者的真实意图还是不太容易;有问题或者错误的地方大家可以留言讨论;

文章分类
前端
文章标签