功能导航
在这里，你可以了解到 Rsbuild 支持的主要功能。
JavaScript 编译
| 功能 | 描述 | 相关链接 |
|---|---|---|
| Rspack 打包 | 默认使用 Rspack 作为打包工具 | - |
| SWC 编译 | 默认通过 SWC 对 JavaScript 和 TypeScript 代码进行转译和压缩 | - |
| TS 编译 | 默认通过 SWC 编译 TS 文件 | |
| 代码压缩 | 默认在生产模式构建时开启代码压缩 | |
| Polyfill 注入 | 默认会注入 core-js 等 Polyfill | |
| SourceMap 生成 | 默认在开发模式生成 SourceMap | |
| 文件别名 | 可选功能，通过 alias 设置文件别名 | |
| Babel 编译 | 可选功能，通过 Babel 对 JavaScript 和 TypeScript 代码进行转译 | |
| Node 产物 | 可选功能，支持构建出运行在 Node.js 环境的 JavaScript 产物 | |
| Web Worker 产物 | 可选功能，支持构建出运行在 Web Worker 环境的 JavaScript 产物 | |
| 浏览器范围 | 可选功能，通过 browserslist 来设置 Web 应用需要兼容的浏览器范围 | |
| 兼容性检查 | 可选功能，分析构建产物中是否存在当前浏览器范围下不兼容的高级语法 | |
| 注入环境变量 | 可选功能，向代码中注入环境变量或表达式 | |
| Node polyfill | 可选功能，在浏览器端注入 Node 核心模块的 polyfills | |
| TS 类型检查 | 可选功能，运行 type checker 检查代码中的类型问题 | |
| 模块联邦 | 可选功能，动态加载模块，并共享依赖关系 |
CSS 编译
| 功能 | 描述 | 相关链接 |
|---|---|---|
| Lightning CSS | 默认启用，使用 Lightning CSS 降级 CSS 语法 | |
| PostCSS 转换 | 可选功能，开启 PostCSS 转换 | |
| Sass 预处理器 | 可选功能，编译 Sass/Scss 文件 | |
| Less 预处理器 | 可选功能，编译 Less 文件 | |
| Stylus 预处理器 | 可选功能，编译 Stylus 文件 | |
| CSS Modules 编译 | 默认支持编译 CSS Modules 文件 | |
| CSS Modules 类型提示 | 可选功能，生成 CSS Modules 的类型定义文件 | |
| CSS 压缩 | 默认在生产模式构建时开启 CSS 压缩 | |
| 内联 CSS 到 JS 中 | 可选功能，将 CSS 文件内联到 JS 文件中 |
HTML 编译
| 功能 | 描述 | 相关链接 |
|---|---|---|
| 设置标题 | 设置 HTML 的 title 标签 | |
| 设置 meta | 设置 HTML 的 meta 标签 | |
| 设置 favicon | 设置页面的 favicon 图标 | |
| 设置 app 图标 | 设置 iOS 系统下的 apple icon | |
| 使用 EJS 模板引擎 | 可选功能，使用 EJS 模板语法 | |
| 使用 Pug 模板引擎 | 可选功能，使用 Pug 模板语法 | |
| 内联 JS 文件 | 可选功能，将 JS 内联到 HTML 中 | |
| 内联 CSS 文件 | 可选功能，将 CSS 内联到 HTML 中 |
开发预览相关
| 功能 | 描述 | 相关链接 |
|---|---|---|
| Public 目录 | 默认将 public 目录作为静态资源服务的文件夹 | |
| 请求代理 | 可选功能，将请求代理到指定的服务上 | |
| 打开页面 | 可选功能，在启动 server 时自动在浏览器中打开页面 | |
| HTTPS | 可选功能，开启 server 对 HTTPS 的支持 |
框架支持
| 功能 | 描述 | 相关链接 |
|---|---|---|
| React | 可选功能，开启 React JSX 语法编译 | |
| React Refresh | 可选功能，开启 React Refresh 热更新 | |
| SVGR | 可选功能，转换 SVG 为 React 组件 | |
| Vue 3 SFC | 可选功能，开启 Vue 3 SFC 单文件组件编译 | |
| Vue 3 JSX | 可选功能，开启 Vue 3 JSX 语法编译 | |
| Vue 2 SFC | 可选功能，开启 Vue 2 SFC 单文件组件编译 | |
| Vue 2 JSX | 可选功能，开启 Vue 2 JSX 语法编译 | |
| Svelte | 可选功能，开启 Svelte 组件编译 | |
| Solid | 可选功能，开启 Solid JSX 语法编译 |
静态资源相关
| 功能 | 描述 | 相关链接 |
|---|---|---|
| 引用图片资源 | 支持在代码中引用图片资源 | |
| 引用字体资源 | 支持在代码中引用字体资源 | |
| 引用视频资源 | 支持在代码中引用视频资源 | |
| 引用 Wasm 资源 | 支持在代码中引用 WebAssembly 资源 | |
| 引用 node addons | 支持在代码中引用 Node.js addons | |
| 静态资源内联 | 默认将体积较小的图片等资源内联到 JS 中 | |
| 清理静态资源 | 每次开始构建前，自动清理 dist 目录下的静态资源 | |
| 拷贝静态资源 | 可选功能，将静态资源拷贝到 dist 目录下 |
性能相关
| 功能 | 描述 | 相关链接 |
|---|---|---|
| 代码拆分 | Rsbuild 中内置了多种拆包策略，自动将代码包拆分为体积适中的文件 | |
| 展示产物体积 | 在生产模式构建后，默认展示所有静态资源的体积信息 | |
| 分析产物体积 | 可选功能，通过 Bundle Analyzer 分析产物体积 | |
| 移除 console | 可选功能，移除代码中的 console.[methodName] |
|
| 优化 moment.js 体积 | 可选功能，移除 moment.js 多余的 locale 文件 | |
| 组件库按需引入 | 可选功能，按需引入组件库的代码和样式 | |
| 图片压缩 | 可选功能，对引用的图片资源进行压缩处理 | |
| Preload | 可选功能，对资源进行预加载 | |
| Prefetch | 可选功能，对资源进行预获取 | |
| Preconnect | 可选功能，对资源进行预连接 | |
| DNS prefetch | 可选功能，对资源进行 DNS 预获取 |
目录