Code Monkey home page Code Monkey logo

rsbuild's Introduction

Rsbuild Banner

Rsbuild

discord channel npm version downloads node version license

English | 简体中文

Rsbuild is a high-performance build tool powered by Rspack. It provides a set of thoughtfully designed default build configs, offering an out-of-the-box development experience and can fully unleash the performance advantages of Rspack.

Rsbuild provides rich build features, including the compilation of TypeScript, JSX, Sass, Less, CSS Modules, Wasm, and others. It also supports Module Federation, image compression, type checking, PostCSS, Lighting CSS, and more.

💡 Comparisons

Rsbuild is a build tool that is on par with Vite, Create React App, or Vue CLI. They all come with builtin dev servers, command line tools, and sensible build configurations to provide the out-of-the-box experience.

CRA / Vue CLI

You can think of Rsbuild as a modernized version of Create React App or Vue CLI, with these main differences:

  • The underlying bundler is switched from Webpack to Rspack, providing 5 to 10 times the build performance.
  • It is decoupled from frontend UI frameworks and supports all UI frameworks via plugins, including React, Vue, Svelte, Solid, etc.
  • It offers better extensibility. You can extend Rsbuild flexibly via Configurations, Plugin API, and JavaScript API.

Vite

Rsbuild shares many similarities with Vite, as they are both aim to improve the frontend development experience. The main differences are:

  • Ecosystem compatibility: Rsbuild is compatible with most webpack plugins and all Rspack plugins, while Vite is compatible with Rollup plugins. If you're currently using more plugins and loaders from the webpack ecosystem, migrating to Rsbuild would be relatively easy.
  • Production consistency: Rsbuild uses Rspack for bundling during both the development and production builds, thus ensuring a high level of consistency between the development and production outputs. This is also one of the goals Vite aims to achieve with Rolldown.
  • Module Federation: The Rsbuild team works closely with the Module Federation development team, providing first-class support for Module Federation to help you develop large web applications with micro frontend architecture.

🚀 Performance

Rsbuild's build performance is on par with native Rspack. This is the time it takes to build 1000 React components:

benchmark

The above data comes from the performance-compare benchmark.

🔥 Features

Rsbuild has the following features:

  • Easy to Configure: One of the goals of Rsbuild is to provide out-of-the-box build capabilities for Rspack users, allowing developers to start a web project with zero configuration. In addition, Rsbuild provides semantic build configuration to reduce the learning curve for Rspack configuration.

  • Performance Oriented: Rsbuild integrates high-performance Rust-based tools from the community, including Rspack, SWC and Lightning CSS, to deliver first-class build speed and development experience.

  • Plugin Ecosystem: Rsbuild has a lightweight plugin system and includes a range of high-quality official plugins. Furthermore, Rsbuild is compatible with most webpack plugins and all Rspack plugins, allowing users to leverage existing community or in-house plugins in Rsbuild without the need for rewriting code.

  • Stable Artifacts: Rsbuild is designed with a strong focus on the stability of build artifacts. It ensures high consistency between artifacts in the development and production builds, and automatically completes syntax downgrading and polyfill injection. Rsbuild also provides plugins for type checking and artifact syntax validation to prevent quality and compatibility issues in production code.

  • Framework Agnostic: Rsbuild is not coupled with any front-end UI framework. It supports frameworks like React, Vue 3, Vue 2, Svelte, Solid, and Lit through plugins, and plans to support more UI frameworks from the community in the future.

🎯 Position

In addition to being used as a build tool, Rsbuild also provides universal build capabilities for higher-level solutions, such as Rspress and Modern.js, allowing them to focus on the development of their own domain specific capabilities.

The following diagram illustrates the relationship between Rsbuild and other tools in the ecosystem:

Rspack Ecosystem

📚 Getting Started

To get started with Rsbuild, see the Quick Start.

🦀 Links

🤝 Contribution

New contributors welcome!

Please read the Contributing Guide.

Contributors




Contributors of web-infra-dev/rsbuild New trends of web-infra-dev
Contributors of web-infra-dev/rsbuild

Code of Conduct

This repo has adopted the ByteDance Open Source Code of Conduct. Please check Code of Conduct for more details.

🧑‍💻 Community

Come and chat with us on Discord! The Rspack / Rsbuild team and users are active there, and we're always looking for contributions.

🌟 Quality

Rsbuild uses Web Infra QoS to observe the trend of key metrics, such as bundle size, compile speed and install size.

🙏 Credits

Some of the implementations of Rsbuild have drawn inspiration from outstanding projects in the community. We would like to express our gratitude to them:

This Rsbuild website is powered by Netlify.

📖 License

Rsbuild is licensed under the MIT License.

rsbuild's People

Contributors

10derozan avatar 9aoy avatar asuka109 avatar bottlewook avatar caohuilin avatar chenjiahan avatar easy1090 avatar fi3ework avatar fireairforce avatar inottn avatar jinchaofs avatar jkzing avatar jserfeng avatar jungzl avatar lalalazero avatar liangchaofei avatar liyincode avatar luhc228 avatar nanianlisao avatar renovate[bot] avatar sanyuan0704 avatar sooniter avatar sumy7 avatar targeral avatar timeless0911 avatar tmkx avatar wchenonly avatar xc2 avatar zhousg avatar zouhangwithsweet avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

rsbuild's Issues

Adjust the default browserslist config

Overall

Rsbuild will by default target modern browsers to reduce bundle sizes.

Detail

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.

[Bug]: The bundle size becomes larger after using the SWC plugin

Version

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

Details

Take modern.js/tests/integration/mwa-app as an example.

Before using SWC plugin:

Screen Shot 2023-07-04 at 11 00 11

After using SWC plugin:

Screen Shot 2023-07-04 at 11 00 07

Reproduce link

https://github.com/web-infra-dev/modern.js/tree/main/tests/integration/mwa-app

Reproduce Steps

  1. cd tests/integration/mwa-app
  2. pnpm run build

[Feature]: Support only print total file sizes

What problem does this feature solve?

Some users may only care about the total size, Rsbuild should support only print total file sizes,

What does the proposed API look like?

export default {
  performance: {
    printFileSize: {
      // whether to print total size
      total?: boolean;
      // whether to print size of each file
      detail?: boolean;
    }
  }
}

Remove the `modern-web` build target

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.

Using Rspack as the default bundler

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.

Enhance the config file

  1. Rename builder.config.ts to rsbuild.config.*
  2. defineConfig use the Rspack configuration type by default.

[Feature]: Assets retry supports dynamic chunks

What problem does this feature solve?

Currently the assets retry only supports initial chunks, we need to provide supports for dynamic chunks.

What does the proposed API look like?

No extra configurations.

[Feature]: Support for dotenv

What problem does this feature solve?

Environment variables can be read from the following environments when building (lower to higher priority):

  • .env
  • .env.local
  • .env.[mode]
  • .env.[mode].local

What does the proposed API look like?

refer to: web-infra-dev/rspack#2208

Align the dist directory struct with other community tools

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.

Tasks for initial release

Workflow

Tasks

  1. ✨ enhancement
    caohuilin
  2. ✨ enhancement
    caohuilin
  3. ✨ enhancement
    9aoy

Decoupled from Modern.js

Tasks

  1. ✨ enhancement
    chenjiahan
  2. ✨ enhancement
    chenjiahan
  3. ✨ enhancement
    9aoy
  4. ✨ enhancement
    9aoy

Document

Tasks

  1. documentation
    chenjiahan
  2. documentation
    chenjiahan
  3. documentation
    chenjiahan
  4. documentation
    chenjiahan
  5. documentation
    chenjiahan
  6. documentation
    chenjiahan
  7. documentation
    chenjiahan
  8. documentation
  9. documentation
  10. documentation
  11. documentation 👏 PR welcome

Plugins

Tasks

  1. ✨ enhancement
    chenjiahan
  2. 9aoy
  3. ✨ enhancement
  4. ✨ enhancement
    9aoy
  5. ✨ enhancement
  6. ✨ enhancement
  7. 9aoy
  8. ✨ enhancement
  9. ✨ enhancement

Features

Tasks

  1. 💡 feature
    9aoy
  2. 💡 feature
    chenjiahan
  3. 💡 feature
  4. 👏 PR welcome 💡 feature
    jkzing
  5. 💡 feature
    9aoy

Others

Tasks

  1. ✨ enhancement
    chenjiahan
  2. ✨ enhancement
    chenjiahan
  3. ✨ enhancement
    chenjiahan
  4. ✨ enhancement
    chenjiahan
  5. 9aoy
  6. 9aoy
  7. ✨ enhancement
    chenjiahan
  8. ✨ enhancement
    chenjiahan
  9. ✨ enhancement
    chenjiahan
  10. ✨ enhancement
  11. ✨ enhancement
    9aoy
  12. ✨ enhancement

[Feature]: Provide an umd plugin

What problem does this feature solve?

Provide an umd plugin to help users building umd outputs.

What does the proposed API look like?

pluginUmd({
  // maybe some options
});

Improve the CLI tool

  1. Add log to display the current Rspack / webpack version.
  2. Support explicit declaration to use webpack.
  3. Support use --config option to custom config file.

[Document]: Improve the decorators guide

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.