web-infra-dev/awesome-rspack

A curated list of awesome things related to Rspack, Rsbuild and Rspress

A curated list of awesome things related to Rspack and its ecology

Awesome Rspack

• Resources
  • Official Resources
  • Ecosystem
• Starter
  • Rspack Starter
  • Rsbuild Starter
• Plugins
  • Rspack Plugins
  • Rsbuild Plugins
  • Rspress Plugins
• Deployment
• Libraries
• Blogs
• License

Resources

Official Resources

• 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.

Ecosystem

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.
• 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.

Starter

Rspack Starter

• 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.

Rsbuild Starter

• 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, A Umi project integrated with Rsbuild, you can use Umi and its plugins with the same experiences as Umi + Webpack are.
• 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.

Plugins

Rspack Plugins

• @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.

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 Plugins

• @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-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-preact: Provides support for Preact.
• @rsbuild/plugin-svelte: Provides support for Svelte components (.svelte files).
• @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-solid: Provides support for Solid.
• rsbuild-plugin-dts: Generate TypeScript declaration files.
• rsbuild-plugin-ejs: Provide support for the EJS template engine.
• rsbuild-plugin-react-inspector: Allows automatic jumping to the local IDE when clicking on a browser element.
• rsbuild-plugin-svelte-inspector: Allows automatic jumping to the local IDE when clicking on a browser element.
• rsbuild-plugin-vue-inspector: Allows automatic jumping to the local IDE when clicking on a browser element.
• 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.
• rsbuild-plugin-vue-legacy: Support for Vue versions below 2.7 by setting an alias for vue.
• @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-terser to minify the HTML outputs.
• rsbuild-plugin-glsl: An Rsbuild plugin to import inline (and compress) GLSL shader.

Rspress Plugins

• @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.

Deployment

• Zephyr Cloud: A cloud-agnostic deployment platform offering sub-seconds deploy from one command experience.

Libraries

• @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

Blogs from the Rspack team:

• rspack.dev/blog/
• web-infra-dev/discussions

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-08] 开发体验的彻底提升，从 Vite 迁移到 Rspack
• [2024-08] 译：前 Firefox 工程师迁移到 Rspack 的经验教训
• [2024-07] 基于 Rspack 实现大仓应用构建提效实践

License

To the extent possible under law, Web Infra has waived all copyright and related or neighboring rights to this work.