A curated list of awesome things related to Rspack and its ecology
- Rspack Doc
- Rspack GitHub Repo
- Rspack Release Notes
- Rspack Examples: Examples for Rspack, Rsbuild, Rspress and Rsdoctor.
- Rsfamily Design Resources: Design resources for Rspack, Rsbuild, Rspress and Rsdoctor.
Upper-level frameworks or libraries that are powered by Rspack or connected to Rspack:
- Rsbuild: The Rspack-based build tool.
- Rspress: A fast Rspack-based static site generator.
- Rsdoctor: A one-stop build analyzer for Rspack and webpack.
- Rslib: The library build tool powered by Rsbuild.
- Modern.js: A progressive React framework for web development.
- storybook-rsbuild: Storybook builder powered by Rsbuild.
- @nx/rspack: The Nx plugin for Rspack.
- Docusaurus: Help you ship a beautiful documentation site in no time.
- Nuxt: An intuitive Vue framework for creating web applications and websites with Vue.js. Install @nuxt/rspack-builder to use Rspack as the bundler for Nuxt.
- EMP 3.0: A high-performance enterprise-level front-end build system built on the Rust ecosystem.
- pareto: A lightweight SSR framework centered on stream rendering.
- cypress-rspack-dev-server: Cypress Component-testing with Rust-based web bundler Rspack's dev server.
- serverless-rspack: A Serverless framework plugin for zero-config JavaScript and TypeScript code bundling using the high performance Rust-based JavaScript bundler rspack.
- AUmi: Use Rsbuild as Umi's bundler instead of Webpack, get high performance of Rsbuild and all Umi ecosystem.
- nuxt-rspack-starter: Nuxt starter with Rspack.
- rspack-react-router-starter
- rspack for create-react-app
- electron-forge-rspack-template
- shark: A React project with Rspack, Ant Design, Ant Design Pro Components, Antd@5 React@18 AntV G2Plot, ahooks, react-use, Axios, i18next, localforage, Mock.js, NProgress, and more.
- electron-react-rspack: An Electron boilerplate including TypeScript, React, Rspack and ESLint.
- ng-rspack: Angular + Rspack + Nx + Module Federation 2.0.
- react-tailwind-rsbuild-boilerplate: React + React Router + Tailwind CSS with Rsbuild boilerplate.
- rsbuild_vue3_h5_template: A project template for Vue 3. It includes popular libraries such as Axios, Pinia, Vant, and Vue Router.
- rsbuild-chrome-extension-boilerplate-react: Chrome extension boilerplate for Rsbuild.
- rsbuild-plugin-template: Use this template to create your own Rsbuild plugin.
- react-antd-admin-pro: An admin project template for React. It's built with Rsbuild, React 18, TypeScript 5, antd 5, and React Router.
- umi-rsbuild:
Umi+Rsbuild, AUmiproject integrated withRsbuild, you can useUmiand its plugins with the same experiences asUmi+Webpackare. - rsbuild-react-chakra-starter: initialize react app with rsbuild, Chakra UI and TypeScript setup. Configured with awesome toolings: Biome, Husky + Lint-Staged, Commitlint, and Turbo.
- template-rsbuild-react-ts-tailwind: Rsbuild starter template with React + Typescript + TailwindCSS + Biome.
- rsbuild-turborepo-react-module-federation: Rsbuild + Turborepo + Biome + Zustand + React for module federation.
- @rspack/plugin-react-refresh: Support React Fast Refresh.
- @rspack/plugin-preact-refresh: Support Preact Refresh.
- rspack-manifest-plugin: An Rspack plugin for generating an asset manifest.
- rspack-plugin-virtual-module: An Rspack plugin that allows you to create virtual modules.
- html-rspack-plugin: Generate files to serve your Rspack bundles.
- @aaroon/workbox-rspack-plugin: A plugin to use workbox in Rspack.
- inject-manifest-plugin: Injects a Workbox PWA manifest into a Service Worker.
- code-inspector-plugin: Click an element on the page, it can automatically open the editor and position the cursor to the source code of the element.
- rspack-plugin-mock: Rspack and Rsbuild plugin for API mock dev server.
- react-cosmos-plugin-rspack: Allows building / running React Cosmos using Rspack.
- rspack-plugin-cli-copy: Start the project and automatically copy the network URL of the terminal.
- rtlcss-rspack-plugin: Rspack plugin to create a second css bundle, processed to be rtl.
- html-inline-css-rspack-plugin A Rspack plugin to convert external stylesheets into embedded stylesheets.
- html-rspack-skip-assets-plugin Adapt html-webpack-skip-assets-plugin to Rspack
Rspack and Rsbuild support most of the webpack plugins, such as:
- case-sensitive-paths-webpack-plugin: Enforces case sensitive paths of all required modules.
- clean-webpack-plugin: Remove your build folder before building.
- compression-webpack-plugin: Prepare compressed versions of assets to serve them with Content-Encoding.
- css-minimizer-webpack-plugin: Uses cssnano to optimize and minify your CSS.
- dotenv-webpack: A secure plugin that supports dotenv and other environment variables.
- eslint-webpack-plugin: Uses eslint to find and fix problems in your JavaScript code.
- fork-ts-checker-webpack-plugin: Runs TypeScript type checker on a separate process.
- html-webpack-plugin: Simplifies creation of HTML files to serve your bundles.
- webpack-bundle-analyzer: Visualize size of webpack output files with an interactive zoomable treemap.
- @vanilla-extract/webpack-plugin: Integrating vanilla-extract with webpack / Rspack.
- @sentry/webpack-plugin: Provides source map and release management support for Sentry.
- @serwist/webpack-plugin: generate a manifest of local files for progressive web apps.
- sonda: Visualizer and analyzer for JavaScript and CSS bundles.
Rspack and Rsbuild support most of the webpack loaders, such as:
- babel-loader: Transpiling JavaScript files using Babel.
- css-loader: Interprets @import and url() in CSS files and resolve them.
- sass-loader: Compiles Sass/SCSS files to CSS.
- less-loader: Compiles Less to CSS.
- stylus-loader: Compiles Stylus to CSS.
- postcss-loader: Loader to process CSS with PostCSS.
- style-loader: Inject CSS into the DOM.
- html-loader: Exports HTML as string.
- vue-loader: Loader for Vue Single-File Components.
- svelte-loader: Loader for svelte components.
- imports-loader: Use modules that depend on specific global variables.
- source-map-loader: Extracts source maps from existing source files.
- svg-react-loader: Turn SVGs into React Components.
- svgo-loader: Loader for SVGO.
- coffee-loader: Compile CoffeeScript to JavaScript.
- node-loader: Allows to connect native node modules with .node extension.
- @mdx-js/loader: Loader for MDX.
- @svgr/webpack: Loader for SVGR.
- yaml-loader: Allows importing YAML files as JS objects.
- react-compiler-webpack: The webpack / Rspack loader for React Compiler.
- worker-rspack-loader: An Rspack loader that registers a script as a Web Worker.
Rspack and Rsbuild support most of the unplugin, such as:
- unplugin-vue-components: On-demand components auto importing for Vue.
- unplugin-auto-import: Auto import APIs on-demand.
- unplugin-stylex: StyleX integration for Rspack.
- @arco-plugins/unplugin-react: A plugin to help you use Arco Design React.
- @tanstack/router-plugin: Automatically generate configuration for TanStack Router.
- unplugin-build-info: Print the build information on the console.
- unplugin-vue-macros: Explore more macros and syntax sugar to Vue.
- unplugin-inject-preload: Inject
<link rel="preload">to your index.html based on your build assets. Need to be used with HTMLWebpackPlugin or HTMLRspackPlugin.
- @rsbuild/plugin-react: Provides support for React.
- @rsbuild/plugin-svgr: Support convert SVG to React components.
- @rsbuild/plugin-styled-components: Provides compile-time support for styled-components.
- rsbuild-plugin-react-inspector: Allows automatic jumping to the local IDE when clicking on a browser element.
- @rsbuild/plugin-vue: Provides support for Vue 3 SFC (Single File Components).
- @rsbuild/plugin-vue-jsx: Provides support for Vue 3 JSX / TSX syntax.
- @rsbuild/plugin-vue2: Provides support for Vue 2 SFC (Single File Components).
- @rsbuild/plugin-vue2-jsx: Provides support for Vue 2 JSX / TSX syntax.
- rsbuild-plugin-vue-inspector: Allows automatic jumping to the local IDE when clicking on a browser element.
- rsbuild-plugin-vue-legacy: Support for Vue versions below 2.7 by setting an alias for
vue. - rspack-plugin-svg: Rsbuild plugin to load SVG files as Vue components, using SVGO for optimization.
- @rsbuild/plugin-preact: Provides support for Preact.
- @rsbuild/plugin-svelte: Provides support for Svelte components (
.sveltefiles). - rsbuild-plugin-svelte-inspector: Allows automatic jumping to the local IDE when clicking on a browser element.
- @rsbuild/plugin-solid: Provides support for Solid.
- @rsbuild/plugin-assets-retry: Used to automatically resend requests when static assets fail to load.
- @rsbuild/plugin-babel: Provides support for Babel transpilation capabilities.
- @rsbuild/plugin-basic-ssl: Generate an untrusted, self-signed certificate for the HTTPS server.
- @rsbuild/plugin-eslint: Used to run ESLint checks during the compilation.
- @rsbuild/plugin-type-check: Used to run TypeScript type checker on a separate process.
- @rsbuild/plugin-image-compress: Compress the image assets.
- @rsbuild/plugin-mdx: Provide support for MDX.
- @rsbuild/plugin-node-polyfill: Used to inject polyfills of Node core modules in the browser side.
- @rsbuild/plugin-source-build: This plugin is designed for the monorepo scenario. It supports referencing source code from other subdirectories and performs build and hot update.
- @rsbuild/plugin-stylus: Use Stylus as the CSS preprocessor.
- @rsbuild/plugin-check-syntax: Used to analyze the syntax compatibility of artifacts, to see if there are any advanced syntaxes that may cause compatibility issues.
- @rsbuild/plugin-css-minimizer: Used to customize CSS minimizer, switch to cssnano or other tools for CSS compression.
- @rsbuild/plugin-typed-css-modules: Generate TypeScript declaration files for CSS Modules.
- @rsbuild/plugin-pug: Provides support for the Pug template engine.
- @rsbuild/plugin-rem: Implements the rem adaptive layout for mobile pages.
- @rsbuild/plugin-umd: Used to build outputs in UMD format.
- @rsbuild/plugin-yaml: Used to import YAML files and convert them into JavaScript objects.
- @rsbuild/plugin-toml: Used to import TOML files and convert them into JavaScript objects.
- rsbuild-plugin-dts: Generate TypeScript declaration files.
- rsbuild-plugin-ejs: Provide support for the EJS template engine.
- rsbuild-plugin-print: Print text, show host with qrcode.
- rsbuild-plugin-console-debug: Output debug information in the console.
- rsbuild-plugin-generate-file: Generate static file and write them to dist folder after packaging.
- rsbuild-plugin-google-analytics: Setup Google Analytics in your website.
- rsbuild-plugin-web-extension: Rsbuild plugin for Chrome/web extension.
- rsbuild-plugin-open-graph: Generate Open Graph meta tags.
- rsbuild-plugin-posthog: Rsbuild plugin for PostHog.
- @webx-kit/rsbuild-plugin: Rsbuild plugin for Web eXtension development.
- plugin-sails-content: Rsbuild plugin for Sails Content.
- rsbuild-plugin-html-minifier-terser: An Rsbuild plugin to use
html-minifier-terserto minify the HTML outputs. - rsbuild-plugin-glsl: An Rsbuild plugin to import inline (and compress) GLSL shader.
- rsbuild-plugin-marko: An Rsbuild plugin to provide support for the Marko template engine.
- rsbuild-plugin-monaco-editor-nls: An Rsbuild plugin to localize monaco-editor.
- @rspress/plugin-medium-zoom: medium-zoom plugin, used to zoom in images.
- @rspress/plugin-last-updated: Support for displaying the last update time of the article.
- @rspress/plugin-container-syntax: Support container syntax in Markdown/MDX.
- @rspress/plugin-typedoc: Integrate TypeDoc, used to generate API documentation of TS module automatically.
- @rspress/plugin-preview: Support preview of code blocks in Markdown/MDX.
- @rspress/plugin-playground: Provide a real-time playground to preview the code blocks in Markdown/MDX files.
- @rspress/plugin-shiki: Integrates Shiki for code syntax highlighting.
- @rspress/plugin-rss: Generates RSS files for specific document pages with feed.
- rspress-plugin-translate: Automatically translate your content behind the scenes using GPT's.
- rspress-plugin-shiki: Rspress plugin shiki with transformer.
- rspress-plugin-remote-page: Load remote markdown file (e.g. README.md) onto your website.
- rspress-plugin-font-open-sans: Use Open Sans as the default font in your Rspress website.
- rspress-plugin-align-image: Rspress plugin to align images in markdown.
- rspress-plugin-directives: Rspress plugin for custom directives support.
- rspress-plugin-file-tree: Rspress plugin that add tree view for file structure display.
- rspress-plugin-gh-pages: Rspress plugin to add support for automatic deployment to GitHub Pages.
- rspress-plugin-google-analytics: Rspress plugin for Google Analytics integration.
- rspress-plugin-vercel-analytics: Rspress plugin for Vercel Analytics integration.
- rspress-plugin-katex: Rspress plugin to add support for rendering math equations using KaTeX.
- rspress-plugin-live2d: Rspress plugin for live2d, powered by on-my-live2d.
- rspress-plugin-mermaid: Rspress plugin to render Mermaid diagrams in markdown files.
- rspress-plugin-reading-time: Rspress plugin to display reading time for your document pages.
- rspress-plugin-supersub: Rspress plugin to add superscript(
<super></super>) and subscript(<sub></sub>) support. - rspress-plugin-toc: Rspress plugin that injects a table of contents into the page.
- rspress-plugin-clarity: Rspress plugin for Clarity integration.
- rspress-plugin-sitemap: Automatically generate SEO-related sitemaps.
- rspress-plugin-mention-github: Rspress plugin mention github user, or any link.
- rspress-plugin-changelog: Generates changelog pages, fetching release information from GitHub and GitLab repositories.
- rspress-plugin-annotation-words: An Rspress plugin to support annotation words.
- Zephyr Cloud: A cloud-agnostic deployment platform offering sub-seconds
deploy from one commandexperience.
- @rspack/dev-server: Dev server for Rspack, provides the same API as webpack-dev-server.
- @rspack/lite-tapable: Lite weight tapable for Rspack.
- rspack-chain: A chaining API to generate and simplify the modification of Rspack configurations.
- Sails Shipwright - The modern asset pipeline for Sails powered by Rsbuild.
- rspackify: Experience lightning-fast builds by instantly switching from webpack to Rspack.
- Spinpack: A CLI tool that turbocharges the developer server experience for CRA projects with Rspack.
Blogs from the Rspack team:
Blogs from the community:
- [2024-09] A bundler story: migrating from Webpack to Rspack
- [2024-08] Lessons learned switching to Rspack
- [2024-08] Why Moving to Rspack and How to Use It with Bazel
- [2024-08] Module Federation users now have a clear upgrade path
- [2024-08] Optimizing SPA load times with async chunks preloading (use Rsbuild)
- [2024-06] Micro Frontend Setup with Nx, Rspack, Module Federation 2.0 and React
- [2024-06] From Webpack to Rspack: Slashing Build Times Effectively
- [2024-02] Why I'm Bullish on Rspack
- [2024-02] Rsdoctor: A Bundle Analysis Solution
- [2024-02] Microfrontends with Module Federation and Rspack — Simple example
- [2024-02] Bun, Biome/OXC, AI Tools and Rsbuild
- [2024-01] How I migrated from CRA to Rsbuild
- [2024-01] Module Federation gets upgraded, and Rspack supports it
- [2023-10] Why you should migrate to Rspack from webpack
- [2023-08] Rust Port of Webpack? Rspack, the New Kid on the Block
- [2023-04] What is Rspack? And how does it compare to Webpack in under 5 minutes?
- [2023-03] Rspack — Getting up to speed with Nx
社区的中文博客：
- [2024-10] 我把大型团队项目从 Vite 前端迁移到了 Rsbuild，收益如何？
- [2024-09] [译] 一个关于打包工具的故事：从 webpack 迁移到 Rspack
- [2024-08] 开发体验的彻底提升，从 Vite 迁移到 Rspack
- [2024-08] 译：前 Firefox 工程师迁移到 Rspack 的经验教训
- [2024-07] 基于 Rspack 实现大仓应用构建提效实践
- [2024-07]: The First Real Webpack Alternative (Written in Rust!)
- [2024-07]: Microfrontends with Module Federation, Rspack, React and Bit
- [2024-06]: Rsbuild is 3x faster than Vite
- [2024-02]: Mastering Micro-Frontends With Rspack and Module Federation
- [2024-01]: Micro Frontends - Rspack and Module Federation v1.5
- [2023-03]: Rspack! The Successor of Webpack?
To the extent possible under law, Web Infra has waived all copyright and related or neighboring rights to this work.
