Today, we're excited to announce the official release of Module Federation 2.0!
这是一个由 ByteDance Web Infra 团队与 Module Federation 的作者 @Zack Jackson 共同推出的新版本。 Module Federation 2.0 解决了原有版本存在的诸多问题，新版本基于 Bytedance 内部实践以及 Module Federation 原有社区生态实现。
Code repositories: https://github.com/module-federation/core
Official Documentation: https://module-federation.io/
为什么要用 Module Federation 2.0？
It's been more than three years since the release of Module Federation as a major feature of Webpack 5. It has been widely used as a module sharing scheme and has become popular with large web projects. Module Federation makes it more efficient and easy to develop large web applications and collaborate with teams. However, as the use of Module Federation has become more widespread, new problems have also been encountered. To this end, Module Federation 2.0 proposes a new solution to these problems:
- Added Best Practices: Module Federation 2.0 has launched a new standalone documentation site that brings together best practices for the Module Federation. With these guidelines, you can get the most out of Module Federation.
- Runtime decoupled from build tools: In Module Federation 2.0, runtimes are decoupled from build tools. This change unifies the implementation standards for the Module Federation across build tools and makes the module loading process more flexible.
- Type-safe: To ensure type-safety, the build plugin for Module Federation 2.0 automatically generates and loads type definitions for TypeScript projects. In development mode, types are automatically synchronized to ensure the accuracy of the code.
- Debugging tool: Module Federation 2.0 introduces the devtool tool, which is designed to simplify the debugging process. These tools make it easier and more efficient for developers to debug Module Federation.
- Deployment platform: Module Federation 2.0 adds the mf-manifest.json file protocol, which makes version resources and version control easier and more feasible on the deployment platform.
Module Federation 新文档站
The new documentation details the use cases and features of Module Federation. It covers everything from creating a project with Rspack from scratch to using Module Federation. At the same time, the configuration of the Module Federation plug-in is elaborated and explained in depth.
Module Federation 模块加载更加灵活
The new version of the Module Federation brings significant changes. In this release, the Module Federation Runtime capabilities that were originally embedded in Webpack have been extracted into a separate SDK. This change means that we can now dynamically register and load remote modules, as well as register shared modules, without relying on any build tools. In addition, the pre-loading of modules and the use of runtime plug-ins have been enhanced to provide greater control over the loading process of modules.
Unbind Webpack and support cross-tool module sharing
The new version of the Module Federation plug-in features a new runtime architecture. This change eliminates the need for build tools to be strongly bound to runtimes. Developers are expected to have the freedom to introduce artifacts from different build tools into their projects and flexibly assemble them for running.
Currently, there are several build tools that are compatible with it, including Webpack, Rspack. Other build tools can also implement Module Federation based on this standard, which will maintain runtime consistency and standardization.
Type hints
The new version of the Module Federation plugin introduces a groundbreaking feature, the Dynamic Module Type Hint, which effectively solves the type loss problem encountered in TypeScript projects when converting a local module to a dynamic remote module. Now, with the plugin, not only can remote types be automatically generated and consumed, but also with a real-time type update experience similar to npm link when all projects are running locally.
Module Federation Devtool
The Module Federation Devtool is a debugging tool developed for the Module Federation. It provides a clear view of the dependencies between modules, as well as the configuration of Expose and Shared. In addition, the tool supports proxiing Module Federation modules from online pages to the local development environment, and maintains hot updates to provide a smooth development experience.
Manifest 协议
The Module Federation build plugin generates a critical manifest file. This file contains the basic information of the Module Federation, such as remoteEntry, shared, exposes, remotes, and type. This information is critical for analyzing dependencies between projects and helps us build and optimize our materials platform. In this way, we are able to perform fine-grained version and grayscale management of Module Federation module versions for different deployment platforms. In addition, build plugins and runtimes can use the Manifest file protocol directly for more advanced functionality. For example, dynamic type hints were developed in the latest version based on the Manifest file protocol.
Thanks
The new version of the Module Federation would not have been possible without the inspiration and support of many projects within the community. Here, we would like to express our deep respect and gratitude to these projects:
- Webpack Module Federation。 The new version of the Module Federation forks it and redesigns and implements it based on it.
- Rspack 项目。 Rspack 团队基于 Module Federation Runtime 实现了 Module Federation，确保了 Module Federation 2.0 与 Rspack 生态的完全兼容。
Future Plans
- Optimize the developer experience. While dynamic type hints and Chrome Developer Tools support have been introduced in the new release, Chrome Developer Tools is currently lacking. We plan to make enhancements to the Module Federation's debugging tools, such as the visualization of shared reuse.
- Provide high-performance solutions. Module Federation, as a solution of the micro-front-end architecture, also faces the "request waterfall problem" unique to the micro-front-end architecture. To solve this problem, the Module Federation plans to provide a series of high-performance solutions, including server-side rendering (SSR) and data prefetching.
- Collaborate with partners in the community. The new features of Module Federation 2.0 are currently only supported by two build tools, Webpack and Rspack. Module Federation provides a rich set of basic SDKs that other build tools can build on top of that. Currently, Module Federation is primarily used as a solution for module sharing. Our plan is to provide a set of Module Federation-based micro-frontend architecture best practices in conjunction with the upper-level framework. This will help developers better meet the needs of large web applications for micro-front-end architecture.
tryout
View the repository: https://github.com/module-federation/universe
查看我们的 Quick Start：https://module-federation.io/zh/guide/start/quick-start.html