close
  • 简体中文

      • 功能导航

      在这里，你可以了解到 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 环境的产物
      Web Workers可选功能，使用 Web Workers
      Glob 导入可选功能，通过 import.meta.glob 批量导入模块
      JSON 导入默认支持导入 JSON 文件，也可通过插件导入 YAML 和 TOML 文件
      浏览器范围可选功能，通过 browserslist 来设置 Web 应用需要兼容的浏览器范围
      兼容性检查可选功能，分析构建产物中是否存在当前浏览器范围下不兼容的高级语法
      注入环境变量可选功能，向代码中注入环境变量或表达式
      Node polyfill可选功能，在浏览器端注入 Node 核心模块的 polyfills
      TS 类型检查可选功能，运行 type checker 检查代码中的类型问题
      模块联邦可选功能，动态加载模块，并共享依赖关系

      CSS 编译

      功能描述相关链接
      Lightning CSS默认启用，使用 Lightning CSS 降级 CSS 语法
      Tailwind CSS可选功能，使用 Tailwind CSS
      UnoCSS可选功能，使用 UnoCSS
      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 图标设置 Web 应用的图标
      EJS 模板可选功能，使用 EJS 模板语法
      Pug 模板引擎可选功能，使用 Pug 模板语法
      内联 JS 文件可选功能，将 JS 内联到 HTML 中
      内联 CSS 文件可选功能，将 CSS 内联到 HTML 中

      Server

      功能描述相关链接
      Public 目录默认将 public 目录作为静态资源服务的文件夹
      模块热更新默认在开发模式下启用 HMR
      监听文件可选功能，监听指定文件并触发页面刷新或重启服务
      SSR可选功能，实现服务端渲染
      请求代理可选功能，将请求代理到指定的服务上
      打开页面可选功能，在启动 server 时自动在浏览器中打开页面
      HTTPS可选功能，开启 server 对 HTTPS 的支持
      自定义中间件可选功能，使用自定义的中间件

      UI 框架

      功能描述相关链接
      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 目录下
      生成 manifest 文件可选功能，生成 manifest.json 文件

      性能和调试

      功能描述相关链接
      代码分割Rsbuild 中内置了多种拆包策略，自动将代码包拆分为体积适中的文件
      展示产物体积在生产模式构建后，默认展示所有静态资源的体积信息
      分析构建流程可选功能，使用 Rsdoctor 分析构建流程
      分析产物体积可选功能，通过 Rsdoctor 分析产物体积
      按需编译开发模式下按需编译入口或异步模块，提升启动性能
      移除 console可选功能，移除代码中的 console.[methodName]
      移除重复包可选功能，移除重复引用的 npm 包
      组件库按需引入可选功能，按需引入组件库的代码和样式
      图片压缩可选功能，对引用的图片资源进行压缩处理
      Preload可选功能，对资源进行预加载
      Prefetch可选功能，对资源进行预获取
      Preconnect可选功能，对资源进行预连接
      DNS prefetch可选功能，对资源进行 DNS 预获取