webpack动态import以及模块联邦

好好吃饭好好睡觉2023-10-05 15:58

一、webpack如何进行动态导入的

1. 先搭建一个最基本的能用的webpack项目， 简单配置如下

js 复制代码 
const HtmlWebpackPlugin = require('html-webpack-plugin');
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
const path = require('path');
module.exports = {
    entry: path.join(__dirname, '/src/index.js'),
    output: {
        path: path.join(__dirname, '/dist'),
    },
    mode: 'development',
    plugins: [
        new HtmlWebpackPlugin({
            filename: 'index.html',
            inject: true,
        }),
        new CleanWebpackPlugin()
    ]
}

2. 再从同步引入模块入手

  • 当我们入口文件引用了两个其他文件
js 复制代码 
// index.js
import './hello.js'
import './hello.js'
  • 打包后的结构目录
js 复制代码 
-dist
 - index.html
 - main.js
  • 从main.js的入口我们开始打断点， 可以看到调用了__webpack_require__传入moduleId后里面又调用了__webpack_modules__[moduleId](module, module.exports, __webpack_require__);

  • 其中的__webpack_modules__就是一个 key-value 结构， key为路劲对应着moduleId, value里面都有对应的eval函数， 这里先从moduleId：'./src/index.js'入手， 然后又分别调用了__webpack_require__去找./src/hello.hs, './src/hello2.js

3. 接着异步导入入手

官方提供了两个方法， 一个根据ECMAScript提案的 import() 语法实现动态导入， 一个是webpack特有的 require.ensure（已经被import()取代）

  • 我们直接从import()入手， 导入两个文件
js 复制代码 
// index.js
import('./hello.js').then(() => {
    console.log('module1 load ok');
})
import('./hello2.js').then(() => {
    console.log('module2 load ok');
})
  • 打包后的目录结构如下， 可以看到被动态导入的模块是单独打包的
js 复制代码 
-dist
 - index.html
 - main.js
 - src_hello_js.js
 - src_hello2_js.js
  • 按照打断点来看， 入口依旧是使用__webpack_require__去加载入口文件内容， 但是此时加载其他文件使用的不再是__webpack_require__了， 而是调用__webpack_require__.e

  • 那么此时__webpack_require__.e又做了什么事呢，主要的逻辑在__webpack_require__.f.j和__webpack_require__.l上

    • 首先他会去installedChunks根据chunkId确认是否加载过

      • 值为undefined的话则还未加载
      • 值为[resolve, reject, promise]的时候则正在加载中
      • 值为0的话则说明已经加载了
      • 如图所示情况就是main， src_hello_js已经加载完了， src_hello2_js还在加载中

    • 还未加载得话则生成对应的URL以及调用 __webpack_require__.l

    js 复制代码 
    __webpack_require__.f.j = (chunkId, promises) => {
    var installedChunkData = __webpack_require__.o(installedChunks, chunkId) ? installedChunks[chunkId] : undefined;
    if(installedChunkData !== 0) { // 0 means "already installed".
        if(installedChunkData) {
            promises.push(installedChunkData[2]);
        } else {
        if(true) { 
            var promise = new Promise((resolve, reject) => (installedChunkData = installedChunks[chunkId] = [resolve, reject]));
            promises.push(installedChunkData[2] = promise);
            var url = __webpack_require__.p + __webpack_require__.u(chunkId);
            // create error before stack unwound to get useful stacktrace later
            var error = new Error();
           var loadingEnded = (event) => {		
              if(__webpack_require__.o(installedChunks, chunkId)) {
              ....
                 __webpack_require__.l(url, loadingEnded, "chunk-" + chunkId, chunkId);
            }
    }
};
    • __webpack_require__.l内部会先判断是否已有相同的url的Script标签， 有的话跳过生成步骤
    • 没有的话则通过document.createElement('script'); ...document.head.appendChild(script)去生成对应的Script标签动态地去下载资源，下载之后再在onScriptComplete通过removeChild去除对应的标签
    js 复制代码 
    __webpack_require__.l = (url, done, key, chunkId) => {
        if(inProgress[url]) { inProgress[url].push(done); return; }
        var script, needAttach;
        if(key !== undefined) {
                var scripts = document.getElementsByTagName("script");
                for(var i = 0; i < scripts.length; i++) {
                        var s = scripts[i];
                        if(s.getAttribute("src") == url || s.getAttribute("data-webpack") == dataWebpackPrefix + key) { script = s; break; }
                }
        }
        if(!script) {
                needAttach = true;
                script = document.createElement('script');
                script.charset = 'utf-8';
                script.timeout = 120;
                if (__webpack_require__.nc) {
                        script.setAttribute("nonce", __webpack_require__.nc);
                }
                script.setAttribute("data-webpack", dataWebpackPrefix + key);
                script.src = url;
        }
        inProgress[url] = [done];
        var onScriptComplete = (prev, event) => {
                // avoid mem leaks in IE.
                script.onerror = script.onload = null;
                clearTimeout(timeout);
                var doneFns = inProgress[url];
                delete inProgress[url];
                script.parentNode && script.parentNode.removeChild(script);
                doneFns && doneFns.forEach((fn) => (fn(event)));
                if(prev) return prev(event);
        }
        var timeout = setTimeout(onScriptComplete.bind(null, undefined, { type: 'timeout', target: script }), 120000);
        script.onerror = onScriptComplete.bind(null, script.onerror);
        script.onload = onScriptComplete.bind(null, script.onload);
        needAttach && document.head.appendChild(script);
};

  • 可以看到Script标签中有对onload， onerror都做了一些措施， 但是不涉及变更installedChunks的状态和resolve import()这个promise

  • 既然加载回调找不到， 那么我们就去对应的执行文件找, 可以看到会去调用webpackJsonpCallback函数，找到存储的installedChunks中对应的chunkId, 执行installedChunks[chunkId][0]()， 从上面的讲解可知， 这个就是执行了resolve函数， 以及后面对其赋值为0，表示该资源已经加载了

二、 模块联邦

1. 背景

  • 比如当A项目和B项目有一些公共逻辑部分时， 只能将公共部分抽取出来抽成npm包， npm构建，发包之后， 需要通知A进行更新， 通知B进行更新，此时A和B构建时还需要构建npm包，那么流程上就会比较繁琐
  • 而联邦模块可以直接引用其他应用代码， 对比起npm的方式就更加简洁， 快速

2. 是什么

  • 模块联邦是Webpack5 的新特性之一， 允许多个 webpack 构建好的产物 之间进行 模块， 依赖， 页面甚至应用的共享

3. 基本概念

既然要有共享的功能， 一个构建如果要使用其他构建的模块， 那么就需要有"导入"的功能， 一个构建如果有使其模块能够被其他构建所使用那么就需要有"导出"的功能

  • expose：导出应用，被其他应用导入
  • remote：引入其他应用

4. 如何使用

  • 先来两个简单的webpack项目， 一个运行在9000端口， 一个运行在9001端口

  • 选择其中的端口9000作为导出应用A

    • ModuleFederationPlugi是webpack内置的， 所以导入的方式为const MFP = require('webpack').container.ModuleFederationPlugin;
    • filename： 其他应用导入的文件名称
    • name： 当前应用的名称
    • exposes: 指定具体要导出什么模块， 值为对象， key为具体的模块名称， value为具体的模块路径
    • shared: 指定依赖包， 在加载得时候会先判断本地应用是否存储对应的包， 如果不存在的话就去加载远程应用所依赖的包
    js 复制代码 
    // webpack.config.js
const MFP = require('webpack').container.ModuleFederationPlugin;
module.exports = {
    .....
    plugins: [
        .......
        new MFP({
            filename: 'modulToB.js',
            name: 'A',
            exposes: {
                './exportToB': './src/exportToB.js',
            }
        })
    ]
}
    • A应用被导出的文件内容为（此例子只用于说明如何使用， 故内容很简单）：
    js 复制代码 
    console.log('该模块导出给B使用');
let a = 1;
let b = 2;
export default {
    a,
    b,
}

  • 选择其中的端口9001作为导入应用B

    • remotes指定具体的导入文件， key为具体导入文件的别名， value为导入文件的路径， 路径为： 应用名@应用地址/filename
    js 复制代码 
    const MFP = require('webpack').container.ModuleFederationPlugin;
module.exports = {
    .....
    plugins: [
        .....
        new MFP({
            name: 'B',
            remotes: {
                fromA: 'A@http://localhost:9000/modulToB.js'
            }
        })
    ]
}
    • 在使用具体模块的时候， 使用动态import(), 加载路径为： 文件名/模块名
    js 复制代码 
    import('fromA/exportToB').then((res) => {
    console.log(res.default);
})
    • 控制台如下， 可以看到已经成功使用了应用A的内容， 看9001端口的源代码也有来源于9000端口的

5. 构建分析

  • 我们对导出modulToB的应用A进行构建， 构建后的目录如下，结合上图看到， 最后的moudulToB和src_exportToB_js都会被应用B使用，从上文我们也可以得知， 当我们单纯使用动态import()的时候， 只会多一个src_exportToB_js文件， 那么我们先探索modulToB.js这个文件究竟做了什么
js 复制代码 
-dist
 - index.html
 - main.js
 - modulToB.js
 - src_exportToB_js.js
  • 你会发现他的结构和main.js非常相似， 也是采用__webpack_require__()作为入口开始加载， 那么我们是否可以猜测， 模块联邦导出的模块的打包实质其实就是将其作为另一个入口文件，然后进行打包（可以看下ModuleFederationPlugin的源码， 其中对expose的处理就是调用了addEntry）
  • 此时的moduleId为webpack/container/entry/A, 那么A应用导出的模块就都是以此为入口去做加载
  • 我们看看他的eval本身会做些什么事情
    • moduleMap: 可以看到就是对应我们会导出的模块集合， key为模块名称， value为通过__webpack_require__.e去加载对应的文件的函数， 导出了多少模块， moduleMap就会有多少模块的映射
    • get: 主要逻辑就是通过传入module去从moduleMap加载对应的模块，__webpack_require__.o的作用就是判断moduleMap中是否有对应的module， 有的话则执行， 无的话则抛出错误
    • init: 初始化容器和共享作用域，并确保容器只能被初始化一次，并且使用相同的共享作用域
    • 最后通过__webpack_require__.d将get, init挂载到exports上
js 复制代码 
// container_entry
var moduleMap = {
	"./exportToB": () => {
		return __webpack_require__.e("src_exportToB_js").then(() => (() => ((__webpack_require__(/*! ./src/exportToB.js */ "./src/exportToB.js")))));
	}
};
var get = (module, getScope) => {
	__webpack_require__.R = getScope;
	getScope = (
		__webpack_require__.o(moduleMap, module)
			? moduleMap[module]()
			: Promise.resolve().then(() => {
				throw new Error('Module "' + module + '" does not exist in container.');
			})
	);
	__webpack_require__.R = undefined;
	return getScope;
};
var init = (shareScope, initScope) => {
	if (!__webpack_require__.S) return;
	var name = "default"
	var oldScope = __webpack_require__.S[name];
	if(oldScope && oldScope !== shareScope) throw new Error("Container initialization failed as it has already been initialized with a different share scope");
	__webpack_require__.S[name] = shareScope;
	return __webpack_require__.I(name, initScope);
};

// This exports getters to disallow modifications
__webpack_require__.d(exports, {
	get: () => (get),
	init: () => (init)
});

  • 可以看到执行完的已经挂载上去了get和init方法

  • 我们再看看导入的时候会做什么吧， 先从导入语句 import('fromA/exportToB')入手， 该语句对应源码如下， 调用了__webpack_require__.e， 传入的chunkId为webpack_container_remote_fromA_exportToB

js 复制代码 
__webpack_require__.e(/*! import() */ "webpack_container_remote_fromA_exportToB").then(
    __webpack_require__.t.bind(
        __webpack_require__, /*! fromA/exportToB */ 
        "webpack/container/remote/fromA/exportToB",
        23)
        ).then((res) => {
            console.log(res.default);
    })
  • 里面又调用了__webpack_require__.f.remotes， 其中使用了两个定义好的数据，一个是chunkMapping, 存储了chunkId对应的dataId, 一个是idToExternalAndNameMapping, 存放了dataId对应的数据, 其中data[2]就是对应的moduleId
  • 接着又根据上述拿到的数据， 调用handleFunction, 里面一开始就调用了__webpack_require__, 传入对应的moduleId
  • 然后里面又调用了factory， 它指向的就是__webpack__modules---__[moduleId],
  • 可以看到最后调用了__webpack__require_.l("http://localhost:9000/moduleB.js"), __webpack__require_.l我们在之前分析异步加载得时候分析过了，本质上就是动态创建了一个Script标签去加载对应的资源
相关推荐
Boilermaker19928 分钟前
【Java EE】SpringIoC
前端·数据库·spring
中微子19 分钟前
JavaScript 防抖与节流：从原理到实践的完整指南
前端·javascript
天天向上102434 分钟前
Vue 配置打包后可编辑的变量
前端·javascript·vue.js
趣多多代言人35 分钟前
从零开始手写嵌入式实时操作系统
开发语言·arm开发·单片机·嵌入式硬件·面试·职场和发展·嵌入式
芬兰y1 小时前
VUE 带有搜索功能的穿梭框（简单demo）
前端·javascript·vue.js
好果不榨汁1 小时前
qiankun 路由选择不同模式如何书写不同的配置
前端·vue.js
小蜜蜂dry1 小时前
Fetch 笔记
前端·javascript
拾光拾趣录1 小时前
列表分页中的快速翻页竞态问题
前端·javascript
小old弟1 小时前
vue3，你看setup设计详解，也是个人才
前端
Lefan1 小时前
一文了解什么是Dart
前端·flutter·dart
热门推荐
01基于odoo17的设计模式详解---单例模式02集群聊天服务器---MySQL数据库的建立03Coze扣子平台完整体验和实践（附国内和国际版对比）04《深入设计模式》模式结构汇总05Java学习第十五部分——MyBatis06扣子（coze）实战|我用扣子搭建了一个自动分析小红薯笔记内容的AI应用|详细步骤拆解07基于odoo17的设计模式详解---装饰模式08使用Ruby接入实时行情API教程09DeepSeek各版本说明与优缺点分析10Java类变量（静态变量）