概述

Rspack 是字节跳动开源的一款基于 Rust 语言的具有高性能的构建引擎，为什么说是高性能，这是因为 Rust 本身具有惊人的速度且内存利用率很高。

与此同时 Rspack 与构建工具 Webpack 有很强的关联性，如果你之前熟悉 Webpack，那么你可以很轻松的上手 Rspack，并且可以摆脱 Webpack 缓慢的构建速度。

你可以放心的去使用 Rspack，一是背靠字节这样的大厂，二是其团队成员均来自于前端领域的佼佼者，Rspack 自开源以来，便备受好评，尤其是在使用 Webpack 开发和维护一些大型项目的开发者，可以从 Webpack 低成本的迁移至 Rspack，获得极致开发体验。

Rsbuild 是基于Rspack的一个构建工具，一个高性能集成工具，几乎零配置就可以构建项目，你可以理解为Rspack的增强版的脚手架。Rspack官网推荐我们在构建Web应用时，使用Rsbuild，因为这是Rspack团队对于 web 构建最佳实践的探索和实现。

如果你熟悉 Vite，想必会很容易上手 Rsbuild。

上手实操

建议使用最新长期支持版本的Node.js

在命令终端输入 npm create rsbuild@latest。
按照终端提示的命令依次进行，我们以 Vue3 进行实操。

打开项目文件夹，根据提示在终端命令行输入npm i ，然后输入npm run dev，项目就会自动在浏览器中打开。

这样我们就成功启动了一个由 Rsbuild 构建的 Vue3 项目。

我们完成上述项目创建之后，接下来就可以进行一系列的配置，本文只列举在开发过程中最常用的配置 ，更多完善且详细的配置，请移步至 Rsbuild 官网，按照自己的需求进行配置。

基本配置

引用样式资源

使用 Less、Sass

Rsbuild 内置了 Less 和 Sass，默认情况下，我们不需要对 Less 和 Sass 进行任何配置。

使用 PostCSS

Rsbuild 内置了 PostCSS 来转换 CSS 代码，我们可以在rsbuild.config.ts中的tools.postcss进行配置。

ts 复制代码

export default defineConfig({
tools: {
    postcss: (opts) => {
      const viewportPlugin = require('postcss-px-to-viewport')({
        viewportWidth: 375
      });
      opts.postcssOptions.plugins.push(viewportPlugin);
    }
  }
})

CSS 压缩

Rsbuild 默认使用 Rspack 内置的 SwcCssMinimizerRspackPlugin 插件，在生产环境构建时自动压缩 CSS 代码。

内联 CSS 文件

默认情况下，Rsbuild 会把 CSS 提取为独立的 .css 文件，并输出到构建产物目录。

引用 node_modules 里的样式

在组件中引用

tsx 复制代码

// 引用 Arco Design 样式
import '@arco-design/web-react/dist/css/arco.css'

在样式文件中引用

css 复制代码

/* 引用 normalize.css */
/* https://github.com/necolas/normalize.css */
@import 'normalize.css';

body {
  /* */
}

引用静态资源

Rsbuild 支持在代码中引用图片、字体、媒体类型的静态资源。

Rsbuild 默认支持的静态资源格式：

图片：png、jpg、jpeg、gif、svg、bmp、webp、ico、apng、avif、tiff、svg。
字体：woff、woff2、eot、ttf、otf、ttc。
媒体：mp4、webm、ogg、mp3、wav、flac、aac、mov。

在 Vue 文件中引用

vue 复制代码

<template>
  <img :src="image">
</template>

<script setup lang="ts">
import image from '@/assets/rspack.png'
</script>

在 CSS 文件中引用

在 CSS 文件中，可以引用相对路径下的静态资源：

css 复制代码

.logo {
  background-image: url('@/static/logo.png');
}

引用 JSON 文件

Rsbuild 默认支持引用 JSON 文件

json 复制代码

{
  "name": "foo",
  "items": [1, 2]
}

可以在文件中直接引用并使用

js 复制代码

import example from './example.json' 

console.log(example.name) // 'foo'
console.log(example.items) // [1, 2]

同样支持named import的方式

js 复制代码

import { name } from './example.json'
console.log(name) // 'foo'

配置 HTML 模板

在rsbuild.config.ts文件中配置

ts 复制代码

export default defineConfig({
  html: {
    template: './static/index.html'
  }
})

设置模板文件

在rsbuild.config.ts文件中配置

ts 复制代码

export default defineConfig({
  html: {
    favicon: './src/assets/icon.png'
  }
})

设置页面图标

在rsbuild.config.ts文件中配置

ts 复制代码

export default defineConfig({
  html: {
    favicon: './src/assets/icon.png'
  }
})

设置 meta 标签

在rsbuild.config.ts文件中配置

ts 复制代码

export default defineConfig({
  html: {
    meta: {
      description: 'a description of the page'
    }
  }
})

使用 CSS Modules

Rsbuild 默认支持使用 CSS Modules，无需添加额外的配置。在默认情况下，只有 *.module.css 结尾的文件才被视为 CSS Modules 模块。

使用 TypeScript

Rsbuild 默认支持 TypeScript，你可以直接在项目中使用 .ts 和 .tsx 文件。

因为在进行 TypeScript 转译时，SWC 和 Babel 等工具不会执行类型检查。我们可以在rsbuild.config.ts 文件中注册type-check插件帮助我们做类型检查。

首先在命令行终端下执行npm add @rsbuild/plugin-type-check -D安装插件，然后注册

在rsbuild.config.ts文件中配置

ts 复制代码

import { pluginTypeCheck } from '@rsbuild/plugin-type-check'

export default {
  plugins: [pluginTypeCheck({
      enable: false, // 是否开启类型检查
  })]
}

按需配置 tsconfig.json，因为Type Check 插件默认基于当前项目根目录的 tsconfig.json 进行检查。

在tsconfig.json文件中配置

json 复制代码

{
  "compilerOptions": {
    "target": "ES2020",
    "lib": ["DOM", "ES2020"],
    "module": "ESNext",
    "strict": true,
    "skipLibCheck": true,
    "isolatedModules": true,
    "resolveJsonModule": true,
    "moduleResolution": "bundler"
  },
  "include": ["src"]
}

官网表明fork-ts-checker-webpack-plugin 不支持检查 .vue 文件中的 TypeScript 代码。

如果项目开启了 ts-loader，并且手动配置了 compileOnly: false，请关闭 Type Check 插件，避免重复类型检查。

使用 Tailwind CSS

首先安装tailwindcss，在命令行终端输入npm add tailwindcss -D，新建postcss.config.cjs文件。

cjs 复制代码

module.exports = {
  plugins: {
    tailwindcss: {}
  }
}

新建tailwind.config.js文件

js 复制代码

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: ['./src/**/*.{html,js,ts,jsx,tsx}'],
  theme: {
    extend: {}
  },
  plugins: []
}

引入tailwind必需的css文件

js 复制代码

@tailwind base;
@tailwind components;
@tailwind utilities;

具体tailwind配置，可参照 tailwind官网进行按需配置。

进阶配置

打开rsbuild.config.ts文件，以下是 Vue3 模板项目中帮我们配置好的。

ts 复制代码

import { defineConfig } from '@rsbuild/core';
import { pluginVue } from '@rsbuild/plugin-vue';

export default defineConfig({
  plugins: [pluginVue()]
})

配置路径别名

打开rsbuild.config.ts文件，在source.alias中将你需要的文件夹进行路径别名的配置，我们以src/components文件夹为例。

ts 复制代码

export default defineConfig({
  source: {
    alias: {
      '@components': './src/components',
    }
  }
})

配置环境变量

环境变量的配置是我们在开发项目中必不可少的，主要用于区分开发环境和生产环境。

你可以在项目根目录新建.env.development文件，用于开发环境的配置；新建.env.production文件，用于生产环境的配置。新建.env文件，无论开发环境还是生产环境都能够读取其中的变量。

.env文件

env 复制代码

FOO=hello

在rsbuild.config.ts文件中，就可以直接访问.env的变量值

ts 复制代码

console.log(process.env.FOO); // 'hello'

env.development文件

.env.development 复制代码

URL='https://www.xxx.com'

.env.production文件

env.production 复制代码

URL='https://www.yyy.com'

我们可以在项目中直接使用 process.env.NODE_ENV 来区分环境

npm run dev 启动项目的时候，process.env.NODE_ENV 就会命中 development

npm run build 启动项目的时候，process.env.NODE_ENV 就会命中 production

ts 复制代码

if (process.env.NODE_ENV === 'development') {
  console.log('开发环境')
  console.log(process.env.URL) // 'https://www.xxx.com'
}

if (process.env.NODE_ENV === 'production') {
  console.log('生产环境')
  console.log(process.env.URL) // 'https://www.yyy.com'
}

配置浏览器范围

在项目根目录新建 .browserslistrc 文件，需要注意的是该文件默认只对浏览器端的构建产物生效，包括 web 和 web-worker 这两种产物类型。

web产物默认配置

browserslistrc 复制代码

chrome >= 87
edge >= 88
firefox >= 78
safari >= 14

兼容IE11

browserslistrc 复制代码

> 0.5%
not dead
IE 11

移动端H5兼容iOS 和 Android 系统

browserslistrc 复制代码

iOS >= 9
Android >= 4.4
last 2 versions
> 0.2%
not dead

浏览器列表：browserslist.dev

查询浏览器支持性：caniuse.com

配置浏览器兼容性

Rsbuild默认 会对当前项目中的源代码进行降级，不需要添加额外的配置，只需要配置好.browserslistrc

可通过配置项来切换不同的 polyfill 方案

polyfill可选值有：usage、entry、off

usage：默认方案，注入的 polyfill 体积更小，polyfill 可能注入不全。
entry：大而全，不需要担心项目源码及第三方包的问题，但是会增加最终包的大小。
off：关闭polyfill

ts 复制代码

export default defineConfig({
  output: {
    polyfill: 'entry' 
  }
})

优化配置

产物体积优化

使用更轻量的库

例如将moment.js替换为day.js

在.env.production文件中加上BUNDLE_ANALYZE=true pnpm build可以用来检测出体积较大的第三方库

提升 Browserslist 范围

不兼容旧版本的浏览器，只兼容指定浏览器的范围，减少在语法和 Polyfill 上的编译开销

按需引入 polyfill

配置polyfill的值为usage，Rsbuild的默认配置

使用图片压缩

注册图片压缩插件

ts 复制代码

import { pluginImageCompress } from '@rsbuild/plugin-image-compress'
export default defineConfig({
  plugins: [pluginImageCompress()]
})

代码拆包

如果没有什么特殊的拆包需求，Rsbuild 默认采用 split-by-experience 策略，这是根据经验制定的拆分策略，也是官网推荐的。

查看更过拆包策略：rsbuild.dev/zh/guide/op...

ts 复制代码

export default defineConfig({
  performance: {
    chunkSplit: {
      strategy: 'split-by-experience'
    }
  }
})

提升构建性能

升级 Node.js 版本

推荐将 Node.js 版本升级到长期支持版本

调整 Source Map 格式

例如在开发环境下设置为开销最小的 eval Source Map 格式，生产环境下设置为高质量的 Source Map 格式。

ts 复制代码

export default defineConfig({
  output: {
    sourceMap: {
      js: process.env.NODE_ENV === 'development' ? 'eval' : false,
    }
  }
})

调整 Browserslist 范围

我们可以为开发环境和生产环境设置不同的 browserslist，从而减少开发环境下的编译开销，开发环境兼容最新版本的浏览器，生产环境兼容实际需求要兼容的浏览器。

json 复制代码

{
  "browserslist": {
    "production": [">0.2%", "not dead", "not op_mini all"],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  }
}

看完全文，是不是感觉几乎零配置便可以快速构建项目，这正是 Rsbuild 所要传达的，开箱即用。

本文依据其官方文档整理，更详细具体的配置还请参考 Rsbuild 官网和 Rspack 官网。

想要感受Rspack带来的极致体验？快上车！Rsbuild带你飞

概述

上手实操

基本配置

引用样式资源

使用 Less、Sass

使用 PostCSS

CSS 压缩

内联 CSS 文件

引用 node_modules 里的样式

引用静态资源

在 Vue 文件中引用

在 CSS 文件中引用

引用 JSON 文件

配置 HTML 模板

设置模板文件

设置页面图标

设置 meta 标签

使用 CSS Modules

使用 TypeScript

使用 Tailwind CSS

进阶配置

配置路径别名

配置环境变量

配置浏览器范围

配置浏览器兼容性

优化配置

产物体积优化

使用更轻量的库

提升 Browserslist 范围

按需引入 polyfill

使用图片压缩

代码拆包

提升构建性能

升级 Node.js 版本

调整 Source Map 格式

调整 Browserslist 范围