web-infra-dev / rsbuild Goto Github PK
View Code? Open in Web Editor NEWThe Rspack-based build tool. It's fast, out-of-the-box and extensible.
Home Page: https://rsbuild.dev/
License: MIT License
The Rspack-based build tool. It's fast, out-of-the-box and extensible.
Home Page: https://rsbuild.dev/
License: MIT License
System:
OS: macOS 12.6.5
CPU: (10) arm64 Apple M1 Pro
Memory: 3.30 GB / 32.00 GB
Shell: 5.8.1 - /bin/zsh
Browsers:
Chrome: 114.0.5735.198
Safari: 16.4.1
npmPackages:
@modern-js/app-tools: workspace:* => 2.25.1
@modern-js/plugin-swc: workspace:* => 2.25.1
@modern-js/runtime: workspace:* => 2.25.1
Take modern.js/tests/integration/mwa-app
as an example.
Before using SWC plugin:
After using SWC plugin:
https://github.com/web-infra-dev/modern.js/tree/main/tests/integration/mwa-app
@modern-js/inspector-webpack-plugin
no longer iterates, and we recommend use Rsbuild doctor.
Provide a lifecycle graph for plugin hooks in the document, making the hooks order clearer.
builder.config.ts
to rsbuild.config.*
defineConfig
use the Rspack configuration type by default.Provide migration guide for create-react-app projects.
Background: web-infra-dev/modern.js#4620
Only builtin:swc-loader
is supported in rsbuild (rspack mode). The old translation behavior is retained in modern.js and will be compatible by the framework.
The following configuration capabilities are newly supported in rsbuild rspack mode:
--config
option to custom config file.Rsbuild is framework agnostic, so the React plugin should be a standalone package.
Most Rspack users do not need to use Babel (which is slower), so we should extract the babel plugin as a standalone package to reduce the dependencies of Rsbuild core.
The sourceBuild plugin depend on '@modern-js/monorepo-utils
, we can merge @modern-js/monorepo-utils
and builder-plugin-source-build
as a new package: @rsbuild/plugin-source-build
.
Similar to the modern inspect command.
Provide an umd plugin to help users building umd outputs.
pluginUmd({
// maybe some options
});
Currently the assets retry only supports initial chunks, we need to provide supports for dynamic chunks.
No extra configurations.
This may be more intuitive for Rspack users to configure Rspack, who do not need to know about tools.rspack
.
Environment variables can be read from the following environments when building (lower to higher priority):
refer to: web-infra-dev/rspack#2208
Same as Rspack / Rspress.
init rsbuild & rsbuild/webpack from web-infra-dev/modern.js@4d9ee16.
We need to check and synchronize all changes starting from this commit.
Modern.js Builder provides to provider: builder-rspack-provider
and builder-webpack-provider
.
In Rsbuild, the default builder is Rspack, which means builder-rspack-provider
is builtin. And users can choose to downgrade to webpack via @rsbuild/webpack
package.
Add redirect logic:
The only different between web
and modern-web
is the default browser range, we prefer to use .browserslistrc
to control this.
So the modern-web
is redundant.
Rsbuild will by default target modern browsers to reduce bundle sizes.
The default browserslist config of Modern.js Builder:
> 0.01%
not dead
not op_mini all
The default browserslist config of Rsbuild:
const browserslist = [
'chrome >= 87',
'edge >= 88',
'firefox >= 78',
'safari >= 14',
];
This change should not affect Modern.js Framework.
Rsbuild should avoid depending on Modern.js packages, so we need to design a new dev server for Rsbuild, and allow Modern.js to replace the builtin dev server.
Test order:
Rsbuild > Modern.js > Rspress > EdenX
Both of these two tools are easy to integrate, so we may not need to provide Rsbuild plugins for them, just provide some guides can be enough.
tools.styledComponents
should be enabled manually, so the default value should be changed to false
.
https://modernjs.dev/builder/en/api/config-tools.html#toolsstyledcomponents
Add to: https://github.com/web-infra-dev/modern-js-benchmark
Same as Modern.js benchmark.
Replace @modern-js/node-bundle-require
with jiti
, so Rsbuild core do not need to depend on esbuild
.
Some users may only care about the total size, Rsbuild should support only print total file sizes,
export default {
performance: {
printFileSize: {
// whether to print total size
total?: boolean;
// whether to print size of each file
detail?: boolean;
}
}
}
Release order:
Rspack -> Rsbuild > Rspress -> Modern.js
Ts checker slows down build performance, so it should be an optional feature.
Modern.js Builder:
.
├── html
│ └── index
│ └── index.html
├── route.json
└── static
├── css
│ ├── index.a9908140.css
│ └── index.a9908140.css.map
└── js
├── index.0084c5a4.js
└──index.0084c5a4.js.map
Create React App:
.
├── asset-manifest.json
├── index.html
├── manifest.json
└── static
├── css
│ ├── main.073c9b0a.css
│ └── main.073c9b0a.css.map
└── js
├── main.1470d868.js
└── main.1470d868.js.map
Rsbuild should move the dist/html/index/index.html
to dist/index.html
by default, making it easier to deploy.
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.