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

• Rsbuild: The Rspack-based build tool.
• Rspress: A fast Rspack-based static site generator.
• Rsdoctor: A one-stop build analyzer for Rspack and Webpack.
• Modern.js: A progressive React framework for web development.
• storybook-rsbuild: Storybook builder powered by Rsbuild.
• @nx/rspack: The Nx plugin for Rspack.

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.

Rsbuild Starter

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

Plugins

Rspack Plugins

• rspack-manifest-plugin: A Rspack plugin for generating an asset manifest.
• rspack-plugin-dotenv: A secure rspack plugin that supports dotenv and other environment variables.
• rspack-plugin-virtual-module: A plugin for rspack 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.

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

Rspack and Rsbuild support most of the webpack loaders, such as:

• react-compiler-webpack: The webpack / Rspack loader for React Compiler.

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.

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 resources used in the project.
• @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-lightningcss: Used to use LightningCSS as CSS transformer and minimizer.
• @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-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-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.

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.

License

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