Modern.js Builder has been rebranded as Rsbuild. This document will no longer be updated.
Refers to module bundlers such as webpack, Rspack.
The main goal of bundlers is to bundle JavaScript, CSS and other files together, and the bundled files can be used in the browser, Node.js or other environments. When bundler processes the Web application, it builds a dependency graph and then combines every module into one or more bundles.
Refers to the build layer of Modern.js. The goal of Builder is to provide Modern.js users with out-of-the-box build capabilities and support seamless switching between webpack and Rspack.
The previous version of Modern.js MAJOR_VERSION.46.0 used @modern-js/builder, which was upgraded to Rsbuild starting from MAJOR_VERSION.46.0.
Builder Provider is a part of Builder. Providers implements corresponding build feature based on specific bundlers.
Currently there are two Providers:
@modern-js/builder-webpack-provider: Based on webpack.@modern-js/builder-rspack-provider: Based on rspack.Micro-frontend (MFE) is an architecture style similar to microservices. It is a composition of multiple independently delivered frontend applications, forming a cohesive whole. MFE decomposes frontend applications into smaller, simpler applications that can be developed, tested, and deployed independently while still appearing as a cohesive single product to users.
It primarily addresses two problems:
Difficulty in maintaining large and complex applications as they evolve over time.
Inefficiency caused by cross-team or cross-department collaboration in project development.
Module Federation (MF) is a feature of Webpack. It allows a JavaScript application to dynamically load code from another application, and in the process, share dependencies. If an application consuming a federated module does not have a dependency needed by the federated code, Webpack will download the missing dependency from that federated build origin.
This allows for the creation of micro-frontend-style applications, where multiple systems can share code and be dynamically updated without having to rebuild the entire application.
Modern.js provides an example project for Module Federation. Please refer to module-federation-examples - modernjs.
You can also read the webpack Module Federation documentation to learn more concepts.
Rspack is a high performance JavaScript bundler based on Rust, with interoperability with the webpack ecosystem, allowing it to be integrated into webpack projects at a low cost while providing better build performance.
Compared to webpack, Rspack has significantly improved build performance, thanks not only to the language advantages brought by Rust, but also to its parallel architecture and incremental compilation features. Benchmarking has shown that Rspack can provide 5-10 times better compilation performance.
Modern.js is an open source web engineering system from ByteDance, which provides multiple solutions to help developers solve problems in different development scenarios.
ByteDance's internal web engineering system, implemented based on Modern.js.