> For AI agents: the complete documentation index is available at /zh/llms.txt, the full documentation bundle is available at /zh/llms-full.txt.

# 功能导航

在这里，你可以了解到 Rsbuild 支持的主要功能。

## JavaScript 编译

| 功能            | 描述                                             | 相关链接                                                                                                                             |
| ------------- | ---------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------- |
| Rspack        | 默认使用 Rspack 作为打包工具                             | <ul><li>[配置 Rspack](/zh/guide/configuration/rspack.md)</li></ul>                                                                 |
| SWC 编译        | 默认通过 SWC 对 JavaScript 和 TypeScript 代码进行转译和压缩   | <ul><li>[配置 SWC](/zh/guide/configuration/swc.md)</li></ul>                                                                       |
| TS 编译         | 默认通过 SWC 编译 TS 文件                              | <ul><li>[TypeScript 转译](/zh/guide/basic/typescript.md#typescript-transformation)</li></ul>                                       |
| 代码压缩          | 默认在生产模式构建时开启代码压缩                               | <ul><li>[output.minify](/zh/config/output/minify.md)</li></ul>                                                                   |
| Polyfill 注入   | 可选功能，注入 core-js 等 polyfill                     | <ul><li>[浏览器兼容性](/zh/guide/advanced/browser-compatibility.md)</li><li>[output.polyfill](/zh/config/output/polyfill.md)</li></ul> |
| SourceMap 生成  | 默认在开发模式生成 SourceMap                            | <ul><li>[output.sourceMap](/zh/config/output/source-map.md)</li></ul>                                                            |
| 文件别名          | 可选功能，通过 alias 设置文件别名                           | <ul><li>[路径别名](/zh/guide/advanced/alias.md)</li><li>[resolve.alias](/zh/config/resolve/alias.md)</li></ul>                       |
| Babel 编译      | 可选功能，通过 Babel 对 JavaScript 和 TypeScript 代码进行转译 | <ul><li>[Babel 插件](/zh/plugins/list/plugin-babel.md)</li></ul>                                                                   |
| Node 产物       | 可选功能，构建运行在 Node.js 环境的产物                       | <ul><li>[Node 产物](/zh/config/output/target.md#node-target)</li></ul>                                                             |
| Web Workers   | 可选功能，使用 Web Workers                            | <ul><li>[Web Workers](/zh/guide/basic/web-workers.md)</li></ul>                                                                  |
| Glob 导入       | 可选功能，通过 `import.meta.glob` 批量导入模块              | <ul><li>[import.meta.glob](https://rspack.rs/zh/api/runtime-api/module-variables#importmetaglob)</li></ul>                       |
| JSON 导入       | 默认支持导入 JSON 文件，也可通过插件导入 YAML 和 TOML 文件         | <ul><li>[JSON](/zh/guide/basic/json-files.md)</li></ul>                                                                          |
| 浏览器范围         | 可选功能，通过 browserslist 来设置 Web 应用需要兼容的浏览器范围      | <ul><li>[浏览器范围](/zh/guide/advanced/browserslist.md)</li></ul>                                                                    |
| 兼容性检查         | 可选功能，分析构建产物中是否存在当前浏览器范围下不兼容的高级语法               | <ul><li>[@rsbuild/plugin-check-syntax](https://github.com/rstackjs/rsbuild-plugin-check-syntax)</li></ul>                        |
| 注入环境变量        | 可选功能，向代码中注入环境变量或表达式                            | <ul><li>[环境变量](/zh/guide/advanced/env-vars.md)</li></ul>                                                                         |
| Node polyfill | 可选功能，在浏览器端注入 Node 核心模块的 polyfills              | <ul><li>[Node Polyfill 插件](https://github.com/rstackjs/rsbuild-plugin-node-polyfill)</li></ul>                                   |
| TS 类型检查       | 可选功能，运行 type checker 检查代码中的类型问题                | <ul><li>[类型检查](/zh/guide/basic/typescript.md#type-checking)</li></ul>                                                            |
| 模块联邦          | 可选功能，动态加载模块，并共享依赖关系                            | <ul><li>[模块联邦](/zh/guide/advanced/module-federation.md)</li></ul>                                                                |

## CSS 编译

| 功能               | 描述                              | 相关链接                                                                                                                           |
| ---------------- | ------------------------------- | ------------------------------------------------------------------------------------------------------------------------------ |
| Lightning CSS    | 默认启用，使用 Lightning CSS 降级 CSS 语法 | <ul><li>[CSS](/zh/guide/styling/css-usage.md)</li></ul>                                                                        |
| Tailwind CSS     | 可选功能，使用 Tailwind CSS            | <ul><li>[Tailwind CSS](/zh/guide/styling/tailwindcss.md)</li></ul>                                                             |
| UnoCSS           | 可选功能，使用 UnoCSS                  | <ul><li>[UnoCSS](/zh/guide/styling/unocss.md)</li></ul>                                                                        |
| PostCSS 转换       | 可选功能，开启 PostCSS 转换              | <ul><li>[CSS](/zh/guide/styling/css-usage.md)</li><li>[tools.postcss](/zh/config/tools/postcss.md)</li></ul>                   |
| Sass 预处理器        | 可选功能，编译 Sass/Scss 文件            | <ul><li>[CSS](/zh/guide/styling/css-usage.md)</li><li>[Sass 插件](/zh/plugins/list/plugin-sass.md)</li></ul>                     |
| Less 预处理器        | 可选功能，编译 Less 文件                 | <ul><li>[CSS](/zh/guide/styling/css-usage.md)</li><li>[Less 插件](/zh/plugins/list/plugin-less.md)</li></ul>                     |
| Stylus 预处理器      | 可选功能，编译 Stylus 文件               | <ul><li>[CSS](/zh/guide/styling/css-usage.md)</li><li>[Stylus 插件](https://github.com/rstackjs/rsbuild-plugin-stylus)</li></ul> |
| CSS Modules 编译   | 默认支持编译 CSS Modules 文件           | <ul><li>[CSS Modules](/zh/guide/styling/css-modules.md)</li><li>[tools.cssLoader](/zh/config/tools/css-loader.md)</li></ul>    |
| CSS Modules 类型提示 | 可选功能，生成 CSS Modules 的类型定义文件     | <ul><li>[Typed CSS Modules 插件](https://github.com/rstackjs/rsbuild-plugin-typed-css-modules)</li></ul>                         |
| CSS 压缩           | 默认在生产模式构建时开启 CSS 压缩             | <ul><li>[CSS](/zh/guide/styling/css-usage.md)</li></ul>                                                                        |
| 内联 CSS 到 JS 中    | 可选功能，将 CSS 文件内联到 JS 文件中         | <ul><li>[CSS](/zh/guide/styling/css-usage.md)</li><li>[output.injectStyles](/zh/config/output/inject-styles.md)</li></ul>      |

## HTML 编译

| 功能         | 描述                     | 相关链接                                                                                                                                    |
| ---------- | ---------------------- | --------------------------------------------------------------------------------------------------------------------------------------- |
| 设置标题       | 设置 HTML 的 `<title>` 标签 | <ul><li>[设置页面标题](/zh/guide/basic/html-template.md#set-page-title)</li><li>[html.title](/zh/config/html/title.md)</li></ul>              |
| 设置 meta    | 设置 HTML 的 `<meta>` 标签  | <ul><li>[设置 meta 标签](/zh/guide/basic/html-template.md#set-meta-tags)</li><li>[html.meta](/zh/config/html/meta.md)</li></ul>             |
| 设置 favicon | 设置 favicon 图标          | <ul><li>[设置页面图标](/zh/guide/basic/html-template.md#set-page-icon)</li><li>[html.favicon](/zh/config/html/favicon.md)</li></ul>           |
| 设置 app 图标  | 设置 Web 应用的图标           | <ul><li>[设置页面图标](/zh/guide/basic/html-template.md#set-page-icon)</li><li>[html.appIcon](/zh/config/html/app-icon.md)</li></ul>          |
| EJS 模板     | 可选功能，使用 EJS 模板语法       | <ul><li>[模板引擎 - EJS](/zh/guide/basic/html-template.md#ejs)</li></ul>                                                                    |
| Pug 模板引擎   | 可选功能，使用 Pug 模板语法       | <ul><li>[Pug 插件](https://github.com/rstackjs/rsbuild-plugin-pug)</li></ul>                                                              |
| 内联 JS 文件   | 可选功能，将 JS 内联到 HTML 中   | <ul><li>[静态资源内联](/zh/guide/optimization/inline-assets.md)</li><li>[output.inlineScripts](/zh/config/output/inline-scripts.md)</li></ul> |
| 内联 CSS 文件  | 可选功能，将 CSS 内联到 HTML 中  | <ul><li>[静态资源内联](/zh/guide/optimization/inline-assets.md)</li><li>[output.inlineStyles](/zh/config/output/inline-styles.md)</li></ul>   |

## Server

| 功能        | 描述                           | 相关链接                                                                                          |
| --------- | ---------------------------- | --------------------------------------------------------------------------------------------- |
| Public 目录 | 默认将 public 目录作为静态资源服务的文件夹    | <ul><li>[server.publicDir](/zh/config/server/public-dir.md)</li></ul>                         |
| 模块热更新     | 默认在开发模式下启用 HMR               | <ul><li>[模块热更新](/zh/guide/advanced/hmr.md)</li><li>[dev.hmr](/zh/config/dev/hmr.md)</li></ul> |
| 监听文件      | 可选功能，监听指定文件并触发页面刷新或重启服务      | <ul><li>[dev.watchFiles](/zh/config/dev/watch-files.md)</li></ul>                             |
| SSR       | 可选功能，实现服务端渲染                 | <ul><li>[服务端渲染](/zh/guide/advanced/ssr.md)</li></ul>                                          |
| 请求代理      | 可选功能，将请求代理到指定的服务上            | <ul><li>[server.proxy](/zh/config/server/proxy.md)</li></ul>                                  |
| 打开页面      | 可选功能，在启动 server 时自动在浏览器中打开页面 | <ul><li>[server.open](/zh/config/server/open.md)</li></ul>                                    |
| HTTPS     | 可选功能，开启 server 对 HTTPS 的支持   | <ul><li>[server.https](/zh/config/server/https.md)</li></ul>                                  |
| 自定义中间件    | 可选功能，使用自定义的中间件               | <ul><li>[中间件](/zh/guide/basic/server.md#middleware)</li></ul>                                 |

## UI 框架

| 功能            | 描述                        | 相关链接                                                                                          |
| ------------- | ------------------------- | --------------------------------------------------------------------------------------------- |
| React         | 可选功能，开启 React JSX 语法编译    | <ul><li>[React 插件](/zh/plugins/list/plugin-react.md)</li></ul>                                |
| React Refresh | 可选功能，开启 React Refresh 热更新 | <ul><li>[模块热更新](/zh/guide/advanced/hmr.md)</li><li>[dev.hmr](/zh/config/dev/hmr.md)</li></ul> |
| SVGR          | 可选功能，转换 SVG 为 React 组件    | <ul><li>[SVGR 插件](/zh/plugins/list/plugin-svgr.md)</li></ul>                                  |
| Vue 3 SFC     | 可选功能，开启 Vue 3 SFC 单文件组件编译 | <ul><li>[Vue 插件](/zh/plugins/list/plugin-vue.md)</li></ul>                                    |
| Vue 3 JSX     | 可选功能，开启 Vue 3 JSX 语法编译    | <ul><li>[Vue JSX 插件](https://github.com/rstackjs/rsbuild-plugin-vue-jsx)</li></ul>            |
| Vue 2 SFC     | 可选功能，开启 Vue 2 SFC 单文件组件编译 | <ul><li>[Vue 2 插件](https://github.com/rstackjs/rsbuild-plugin-vue2)</li></ul>                 |
| Vue 2 JSX     | 可选功能，开启 Vue 2 JSX 语法编译    | <ul><li>[Vue 2 JSX 插件](https://github.com/rstackjs/rsbuild-plugin-vue2-jsx)</li></ul>         |
| Svelte        | 可选功能，开启 Svelte 组件编译       | <ul><li>[Svelte 插件](/zh/plugins/list/plugin-svelte.md)</li></ul>                              |
| Solid         | 可选功能，开启 Solid JSX 语法编译    | <ul><li>[Solid 插件](/zh/plugins/list/plugin-solid.md)</li></ul>                                |

## 静态资源

| 功能             | 描述                         | 相关链接                                                                                                                                   |
| -------------- | -------------------------- | -------------------------------------------------------------------------------------------------------------------------------------- |
| 图片资源           | 支持在代码中引用图片资源               | <ul><li>[静态资源](/zh/guide/basic/static-assets.md)</li></ul>                                                                             |
| 字体资源           | 支持在代码中引用字体资源               | <ul><li>[静态资源](/zh/guide/basic/static-assets.md)</li></ul>                                                                             |
| 视频资源           | 支持在代码中引用视频资源               | <ul><li>[静态资源](/zh/guide/basic/static-assets.md)</li></ul>                                                                             |
| Wasm 资源        | 支持在代码中引用 WebAssembly 资源    | <ul><li>[Wasm](/zh/guide/basic/wasm-assets.md)</li></ul>                                                                               |
| Node addons    | 支持在代码中引用 Node.js addons    | <ul><li>[Node addons](/zh/config/output/target.md#node-addons)</li></ul>                                                               |
| 静态资源内联         | 默认将体积较小的图片等资源内联到 JS 中      | <ul><li>[静态资源内联](/zh/guide/optimization/inline-assets.md)</li><li>[output.dataUriLimit](/zh/config/output/data-uri-limit.md)</li></ul> |
| 清理静态资源         | 每次开始构建前，自动清理 dist 目录下的静态资源 | <ul><li>[output.cleanDistPath](/zh/config/output/clean-dist-path.md)</li></ul>                                                         |
| 拷贝静态资源         | 可选功能，将静态资源拷贝到 dist 目录下     | <ul><li>[output.copy](/zh/config/output/copy.md)</li></ul>                                                                             |
| 生成 manifest 文件 | 可选功能，生成 `manifest.json` 文件 | <ul><li>[output.manifest](/zh/config/output/manifest.md)</li></ul>                                                                     |

## 性能和调试

| 功能           | 描述                                  | 相关链接                                                                                             |
| ------------ | ----------------------------------- | ------------------------------------------------------------------------------------------------ |
| 代码分割         | Rsbuild 中内置了多种拆包策略，自动将代码包拆分为体积适中的文件 | <ul><li>[代码分割](/zh/guide/optimization/code-splitting.md)</li></ul>                               |
| 展示产物体积       | 在生产模式构建后，默认展示所有静态资源的体积信息            | <ul><li>[performance.printFileSize](/zh/config/performance/print-file-size.md)</li></ul>         |
| 分析构建流程       | 可选功能，使用 Rsdoctor 分析构建流程             | <ul><li>[使用 Rsdoctor](/zh/guide/debug/rsdoctor.md)</li></ul>                                     |
| 分析产物体积       | 可选功能，通过 Rsdoctor 分析产物体积             | <ul><li>[使用 Rsdoctor](/zh/guide/debug/rsdoctor.md)</li></ul>                                     |
| 按需编译         | 开发模式下按需编译入口或异步模块，提升启动性能             | <ul><li>[dev.lazyCompilation](/zh/config/dev/lazy-compilation.md)</li></ul>                      |
| 移除 console   | 可选功能，移除代码中的 `console.[methodName]`  | <ul><li>[performance.removeConsole](/zh/config/performance/remove-console.md)</li></ul>          |
| 移除重复包        | 可选功能，移除重复引用的 npm 包                  | <ul><li>[resolve.dedupe](/zh/config/resolve/dedupe.md)</li></ul>                                 |
| 组件库按需引入      | 可选功能，按需引入组件库的代码和样式                  | <ul><li>[source.transformImport](/zh/config/source/transform-import.md)</li></ul>                |
| 图片压缩         | 可选功能，对引用的图片资源进行压缩处理                 | <ul><li>[Image compress 插件](https://github.com/rstackjs/rsbuild-plugin-image-compress)</li></ul> |
| Preload      | 可选功能，对资源进行预加载                       | <ul><li>[performance.preload](/zh/config/performance/preload.md)</li></ul>                       |
| Prefetch     | 可选功能，对资源进行预获取                       | <ul><li>[performance.prefetch](/zh/config/performance/prefetch.md)</li></ul>                     |
| Preconnect   | 可选功能，对资源进行预连接                       | <ul><li>[performance.preconnect](/zh/config/performance/preconnect.md)</li></ul>                 |
| DNS prefetch | 可选功能，对资源进行 DNS 预获取                  | <ul><li>[performance.dnsPrefetch](/zh/config/performance/dns-prefetch.md)</li></ul>              |