|
| 1 | +# Announcement |
| 2 | + |
| 3 | +> April 24, 2024 |
| 4 | +
|
| 5 | +Today, we are thrilled to announce the official launch of Module Federation 2.0! Module Federation 2.0 is a new version introduced by the [ByteDance Web Infra](https://github.com/web-infra-dev) team and [@Zack Jackson](https://github.com/ScriptedAlchemy). It resolves numerous issues from the previous Module Federation, building upon ByteDance's internal practices and the original community ecosystem. |
| 6 | + |
| 7 | +## Why Develop Module Federation 2.0? |
| 8 | + |
| 9 | +Module Federation, as a pivotal feature introduced by Webpack 5 over three years ago, has been widely adopted as a module sharing solution. It is favored by large web projects for its efficiency and simplicity in large web application development and team collaboration. However, broader adoption has also surfaced new challenges: |
| 10 | + |
| 11 | +- **Lack of Best Practices**: As an integral plugin of Webpack 5 without a dedicated site, Module Federation has lacked comprehensive best practices for various configurations and scenarios. |
| 12 | +- **Runtime and Build Tool Coupling**: Previously, Module Federation's Runtime was tightly coupled with the build tool, which made it impossible to load remote MF modules without the build tool. This necessitated a ground-up implementation of Module Federation in all build tools, leading to high maintenance costs and a lack of standardization. |
| 13 | +- **Type Safety**: Unlike traditional NPM packages, Module Federation's runtime loading characteristic lacks TypeScript type hints, presenting a disadvantage. |
| 14 | +- **Debugging Tools**: As a micro-frontend architecture pattern, Module Federation lacks tools for analysis and debugging to accommodate new development practices, increasing team collaboration costs. |
| 15 | +- **Deployment Platforms**: Module Federation primarily used remoteEntry.js for remote module loading and provisioning in the past. It lacked a universal protocol to integrate with deployment platforms for more controlled resource and version management. |
| 16 | + |
| 17 | +## Introduction to Module Federation 2.0 Features |
| 18 | + |
| 19 | +### New Module Federation Documentation Site |
| 20 | + |
| 21 | +The new documentation includes detailed scenarios and features of Module Federation, from creating with Rspack to using Module Federation, with enhanced explanations and introductions to the plugin's configuration! |
| 22 | + |
| 23 | + |
| 24 | + |
| 25 | +### More Flexible Module Loading in Module Federation |
| 26 | + |
| 27 | +The new version of Module Federation has extracted the Runtime capabilities, previously built into Webpack, into a standalone SDK. This allows for dynamic registration of remote modules, loading, registering Shared, module preloading, and runtime plugin usage, independent of the build tool, offering stronger control over the loading process. |
| 28 | + |
| 29 | +```typescript |
| 30 | +import { init, loadRemote } from '@module-federation/enhanced/runtime'; |
| 31 | + |
| 32 | +init({ |
| 33 | + name: '@demo/app-main', |
| 34 | + remotes: [ |
| 35 | + { |
| 36 | + name: "@demo/app1", |
| 37 | + entry: "http://localhost:3005/mf-manifest.json", |
| 38 | + alias: "app1" |
| 39 | + }, |
| 40 | + { |
| 41 | + name: "@demo/app2", |
| 42 | + entry: "http://localhost:3006/remoteEntry.js", |
| 43 | + alias: "app2" |
| 44 | + }, |
| 45 | + ], |
| 46 | +}); |
| 47 | + |
| 48 | +loadRemote("app2/util").then((md) => { |
| 49 | + md.add(1, 2, 3); |
| 50 | +}); |
| 51 | +``` |
| 52 | + |
| 53 | +### Unified Module Federation Build Tool Runtime |
| 54 | + |
| 55 | +The new Rspack and Webpack Module Federation plugins are based on the new Runtime implementation. Build tools are no longer directly coupled with Module Federation Runtime logic and can benefit from the plugin mechanism and preload capabilities provided by the new Runtime. Other build tools can also implement Module Federation based on this standard, reducing maintenance costs and maintaining a unified runtime standard. |
| 56 | + |
| 57 | +### Type Hints |
| 58 | + |
| 59 | +The new Module Federation introduces a significant feature: dynamic module type hinting capabilities! This resolves the issue of TypeScript project type invalidation when transitioning from local to dynamic remote modules. The new Module Federation plugin automatically generates and consumes remote types, providing a type hot update experience akin to npm link when all projects are running locally. |
| 60 | + |
| 61 | + |
| 62 | + |
| 63 | +### Module Federation Devtool |
| 64 | + |
| 65 | +Module Federation Devtool is a debugging tool developed specifically for Module Federation. It allows for a clear visualization of the dependency relationships between Module Federation modules, including Expose and Shared settings. Additionally, this Devtool enables the proxying of online Module Federation modules to the offline environment, maintaining a hot update development experience! |
| 66 | + |
| 67 | + |
| 68 | + |
| 69 | +### Manifest Protocol |
| 70 | + |
| 71 | +The Manifest file is generated after building a project with the new Module Federation plugin. It contains foundational information related to Module Federation, including remoteEntry, shared, exposes, remotes, and type information. This data can analyze the dependency relationships between Module Federation projects and enable the creation of a material platform that integrates with various deployment platforms for better control over module versions and canary deployments. The build plugin and runtime can directly consume this file protocol, which can provide additional advanced functionalities. The new dynamic type hinting is based on this file protocol. |
| 72 | + |
| 73 | + |
| 74 | + |
| 75 | +## Acknowledgments |
| 76 | + |
| 77 | +The development of the new Module Federation would not have been possible without the inspiration and support from various projects in the community. We pay tribute and express our gratitude to: |
| 78 | + |
| 79 | +- [Webpack Module Federation](https://webpack.js.org/concepts/module-federation/), from which the new Module Federation was forked and redesigned. |
| 80 | +- The [Module Federation Universe](https://github.com/module-federation/core) repository, which provided the foundation for the new Module Federation. |
| 81 | +- The [Rspack](https://github.com/web-infra-dev/rspack) project, which implemented Module Federation based on the Module Federation Runtime, ensuring full compatibility with the Rspack ecosystem. |
| 82 | + |
| 83 | +## Future Plans |
| 84 | + |
| 85 | +### Enhancing Developer Experience |
| 86 | + |
| 87 | +Despite the introduction of dynamic type hints and Chrome devtool in the new version, the capabilities of the Chrome devtool remain limited. We aim to enhance the debugging tools for Module Federation, such as by adding visualization for shared reuse. |
| 88 | + |
| 89 | +### Providing High-Performance Solutions |
| 90 | + |
| 91 | +As a micro-frontend architecture solution, Module Federation also faces the "request waterfall problem" inherent to micro-frontend architectures. Module Federation will offer high-performance solutions, such as Server-Side Rendering (SSR) and Data prefetching. |
| 92 | + |
| 93 | +### Collaborating with Community Partners |
| 94 | + |
| 95 | +Currently, the new features of Module Federation 2.0 are supported on Webpack and Rspack build tools only. Module Federation provides a range of foundational SDK capabilities, which other build tools can encapsulate. Module Federation primarily serves as a module sharing solution, and we plan to collaborate with upper-level frameworks to offer more best practices based on the Module Federation micro-frontend architecture to meet the development needs of large web applications. |
| 96 | + |
| 97 | + |
| 98 | +Please note that markdown syntax requires specific handling for code blocks and links. In the provided translation, `typescript` is used for the code block language identifier, and image links are represented with placeholder markdown syntax since the actual paths were not provided. Adjust the image paths as needed when implementing the markdown content. |
0 commit comments