前端弹性可伸缩架构解决方案——Dynamic Import与Webpack5 Module Federation

导语：项目示例代码可参考个人仓库https://github.com/ZhenxingXiao/webpack-trial-demo，代码在webpack入门代码基础之上增加Module Federation模块支持，方便入门使用。更多复杂（例如配置SSR情况）情形示例可参考https://github.com/module-federation/module-federation-examples以及结合Next.js的情况https://github.com/module-federation/next.js/pull/2。

1. 前端工程当前落地的瓶颈

随着云基础设施的布局进一步发展，项目的弹性可伸缩以及可演进架构越发受到开发者的青睐。以微服务为开端，以及弹性数据库的进展，后台/中台/数据库的可伸缩弹性架构相继被建立和完善。然而前端却似乎一直未有一个良好的解决方案。虽然也有ESI，S3 Streaming等解决方案，但是在真实落地过程中缺并不令人满意。而随着微前端的进一步发展，这些矛盾尤为凸显，其主要提现有二：
一方面，为了优化首页渲染效率，更多的前端项目开始采用SSR方式，以牺牲服务端的计算成本为代价来增加首页渲染效率。但本质上，这个问题是因为首页加载了很多不需及时解释的脚本代码造成的。那么异步的懒加载，或者说运行时加载就显得更为重要。
另一方面，多个前端项目重用公共代码的方案主要就是剥离和复制公用代码，或者将公用代码作为NPM lib发布，以供其他项目使用。无论怎样，若要升级公用代码，就免不了对所有对其依赖的项目进行修改和升级维护。具体可参考“探索 webpack5 新特性Module federation在腾讯文档的应用”

传统代码共享方案

如今这个问题的解决方案来了，我们可以运行时使用Dynamic Import或者Module Federation，这是一个令人振奋东西，以至于Webpack 5社区称其为前端架构游戏的变革者。

2. 技术详解

以下代码均采用webpack的基本入门代码，方便webpack入门者构建示例，首先项目文件夹下配package.json以及webpack.config.js文件。

2.1 Dynamic Import

首先构建基本的html模板

然后建立src目录并创建入口文件index.js

async function clickHandle(){
    const m = await import('./print.js');//运行时引入print模块
    m.default();
} 

function component() {
    const element = document.createElement('div');
    const btn = document.createElement('button');
    element.innerHTML = 'hello webpack';
    btn.innerHTML = 'Click me and check the console!';
    btn.onclick = clickHandle;
    element.appendChild(btn);
    return element;
}

document.body.appendChild(component());

注意运行时引入模块"import('./print.js');", 另外建立print.js

const Print = () => {
    console.log("get called from print.js");
}
export default Print

这就是ES6标准的动态引入，在html初始化时，并不会加载print脚本，而是当点击button时，才会引入print脚本，实现动态引入。

2.2 Webpack5 Module Federation

在使用Webpack5 Module Federation 功能之前，值得注意两个地方：

1. Webpack 5当前并没有正式加入Module Federation功能，而是在开发分支中加入的，所以需要从git仓库中安装Webpack 5 以及html-webpack-plugin，即

npm install --save-dev git://github.com/webpack/webpack.git#dev-1

npm git://github.com/ScriptedAlchemy/html-webpack-plugin.git#master

2. 入口文件中不要写功能代码，而是建立另外的“根”代码bootstrap.js

// index.js
import('./bootstrap.js');

// app1/bootstrap.js
import Print from 'app2/Print'

function clickHandle(){
    Print();
} 

function component() {
    const element = document.createElement('div');
    element.id = 'test-container';
    const btn = document.createElement('button');
    element.innerHTML = 'hello webpack';
    btn.innerHTML = 'Click me and check the console!';
    btn.onclick = clickHandle;
    element.appendChild(btn);
    return element;
}
if(!document.querySelector('#test-container')){
    document.body.appendChild(component());
}

在App1总配置webpack.config.js为

module.exports = {
  // other configs
  plugins: [
    // other configs
    new ModuleFederationPlugin({
        name: "app1",
        library: { type: "var", name: "app1" },
        remotes: {
            app2: "app2"
        },
        shared: []
    })
  ]
};

而在App2总配置webpack.config.js为

module.exports = {
  // other configs
  plugins: [
    // other configs
    new ModuleFederationPlugin({
        name: "app2",
        library: { type: "var", name: "app2" },
        filename: "remoteEntry.js",// host消费remote的入口文件
        exposes: {
            'Print':'./src/components/Print'//暴漏模块
        },
        shared: []
    })
  ]
};

在app1的html中添加

自然，在host当中就是利用这个脚本嗅探到remote当中暴漏的模块并引用。其和心就是利用remote配置以及webpack_require函数以及jsonp技术加载远程模块到当前运行时环境当中。

3. 总结

这里，重要的几个概念是
host: 消耗其他remote暴漏模块的webpack构建的应用
remote: 提供并暴漏模块的webpack构建的应用
Bidirectional host: 当然，这个是很容易理解的，就是webpack构建的应用，既可以作为remote暴漏模块，也可以作为host消费其他remote暴漏的模块，所以是一个双向的应用。当然我们也可以通过shared引入其他第三方模块，例如react，react-dom等。
如此我们便可以在运行时提供一个供其他应用消费的模块，即

运行时共享模块

如此，对于前端项目，特别是微服务的构建则更为松散

松散的前端项目构建

自然松散的耦合方式，让其落地场景更为广泛。例如微服务，父子项目或者沙箱情形等等。可以说有了Webpack 5 Module Federation让前端工程构建未来可期。

4*. 参考

[1]. Webpack 5 Module Federation: A game-changer in JavaScript architecture
[2]. 探索 webpack5 新特性Module federation在腾讯文档的应用
[3]. 三大应用场景调研，Webpack 新功能 Module Federation 深入解析
[4]. Webpack 5 and Module Federation - A Microfrontend Revolution