功能导航

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

JavaScript 编译

功能 描述 相关链接
Rspack 打包 默认使用 Rspack 作为打包工具 -
SWC 编译 默认通过 SWC 对 JavaScript 和 TypeScript 代码进行转译和压缩 -
TS 编译 默认通过 SWC 编译 TS 文件
JS 压缩 默认在生产环境构建时开启压缩
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 编译

功能 描述 相关链接
PostCSS 编译 默认开启 PostCSS 编译,内置 autoprefixer 等多个插件
Sass 预处理 默认支持编译 Sass/Scss 文件
Less 预处理 默认支持编译 Less 文件
Stylus 预处理 可选功能,编译 Stylus 文件
CSS Modules 编译 默认支持编译 CSS Modules 文件
CSS Modules 类型提示 可选功能,自动生成 CSS Modules 的类型定义文件
CSS 压缩 默认在生产环境构建时开启压缩
Styled Components 可选功能,支持 styled-components 编译
内联 CSS 到 JS 中 可选功能,将 CSS 文件内联到 JS 文件中
rem 单位转换 可选功能,将 CSS 中的 px 转成 rem 单位

HTML 编译

功能 描述 相关链接
设置标题 设置 HTML 的 title 标签
设置 meta 设置 HTML 的 meta 标签
设置 favicon 设置页面的 favicon 图标
设置 app 图标 设置 iOS 系统下的 apple icon
使用 EJS 模板引擎 可选功能,使用 EJS 模板语法
使用 Pug 模板引擎 可选功能,使用 Pug 模板语法
内联 JS 文件 可选功能,将 JS 内联到 HTML 中
内联 CSS 文件 可选功能,将 CSS 内联到 HTML 中

开发预览相关

功能 描述 相关链接
自动打开页面 可选功能,在启动 Dev Server 时自动在浏览器中打开页面 URL
HTTPS Server 可选功能,开启 Rsbuild Server 对 HTTPS 的支持

前端框架相关

功能 描述 相关链接
React 可选功能,开启后提供 React 语法支持
React Refresh 开启 React 插件后,默认支持 React Refresh 热更新
SVG 转 React 组件 默认支持在 React 组件中引用 SVG 作为组件
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 组件编译

静态资源相关

功能 描述 相关链接
引用图片资源 支持在代码中引用图片资源
引用字体资源 支持在代码中引用字体资源
引用视频资源 支持在代码中引用视频资源
引用 Wasm 资源 支持在代码中引用 WebAssembly 资源
引用 node addons 支持在代码中引用 Node.js addons -
静态资源内联 默认将体积较小的图片等资源内联到 JS 中
清理静态资源 每次开始构建前,自动清理 dist 目录下的静态资源
拷贝静态资源 可选功能,将静态资源拷贝到 dist 目录下

性能相关

功能 描述 相关链接
产物自动拆包 Rsbuild 中内置了多种拆包策略,自动将代码包拆分为体积适中的文件
展示产物体积 在生产环境构建后,默认展示所有静态资源的体积信息
分析产物体积 可选功能,通过 Bundle Analyzer 分析产物体积
移除 console 可选功能,移除代码中的 console.xx
优化 moment.js 体积 可选功能,移除 moment.js 多余的 locale 文件
组件库按需引入 可选功能,按需引入组件库的代码和样式
图片压缩 可选功能,对引用的图片资源进行压缩处理
Preload 可选功能,对资源进行预加载
Prefetch 可选功能,对资源进行预获取
Preconnect 可选功能,对资源进行预连接
DNS prefetch 可选功能,对资源进行 DNS 预获取