在这里,你可以了解到 Rsbuild 支持的主要功能。
功能 | 描述 | 相关链接 |
---|---|---|
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 检查代码中的类型问题 |
功能 | 描述 | 相关链接 |
---|---|---|
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 的 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 预获取 |