CRA 迁移 Rspack（实战）

文章目录

- 前言
- [一. 使用步骤](#一. 使用步骤)
- - [1. 依赖安装](#1. 依赖安装)
  - [2. 修改命令](#2. 修改命令)
  - [3. 创建 Rsbuild 配置文件](#3. 创建 Rsbuild 配置文件)
- [二. 注意事项](#二. 注意事项)
- - [1. 使用 CSS 预处理器](#1. 使用 CSS 预处理器)
  - [2. 使用 SVGR](#2. 使用 SVGR)
- [三. 配置迁移](#三. 配置迁移)
- - [1. 迁移Proxy](#1. 迁移Proxy)
  - [2. 迁移 Webpack 配置](#2. 迁移 Webpack 配置)
- 总结

前言

近期随着项目业务复杂度的不断提升，项目大小逐渐增加，模块数量也越来越多，原本基于CRA搭建的项目性能瓶颈被逐渐放大体现了出来：

dev ：开发环境启动需要等待数分钟；
热更新 ：等待5-6秒；
build ：生产环境构建在未开启webpack构建缓存时，等待十几分钟也是常态。

针对这个情况，决定将已有项目迁移至Rspack，彻底解决了以上痛点；工作效率也得到极大的提升。下面将详细讲解迁移过程与常见问题解决。

一. 使用步骤

1. 依赖安装

首先安装以下依赖：

javascript 复制代码

// 核心依赖
npm add @rsbuild/core @rsbuild/plugin-react -D

2. 修改命令

将 package.json 中的 npm scripts 更新为 Rsbuild 的 CLI 命令。

json 复制代码

{
  "scripts": {
  	// 原本为：
    "start": "react-scripts start",
    "build": "react-scripts build",
    "eject": "react-scripts eject",
    // 修改后：
    "start": "rsbuild dev",
    "build": "rsbuild build",
    "preview": "rsbuild preview"
  }
}

3. 创建 Rsbuild 配置文件

在 package.json 的同级目录下创建 Rsbuild 的配置文件 rsbuild.config.ts，并添加以下内容：

js 复制代码

import { defineConfig, loadEnv } from '@rsbuild/core';
import { pluginReact } from '@rsbuild/plugin-react';

const { publicVars, rawPublicVars } = loadEnv({ prefixes: ["REACT_APP_"] });

export default defineConfig({
  plugins: [pluginReact()],
  // 指定 HTML 模版
  html: {
    template: './public/index.html',
  },
  output: {
  	// 指定打包目录
    distPath: {
      root: "build",
    },
    polyfill: 'usage',
  },
  // Rsbuild 默认会注入 PUBLIC_ 开头的环境变量，需手动修改
  source: {
    define: {
      ...publicVars,
      "process.env": JSON.stringify(rawPublicVars),
    },
  },
});

在 HTML 模板中，如果使用了 CRA 的 %PUBLIC_URL% 变量，需替换为 Rsbuild 的 assetPrefix 变量，并使用斜杠进行连接：

html 复制代码

<link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
// 修改变量为 assetPrefix
<link rel="icon" href="<%= assetPrefix %>/favicon.ico" />

此时可以执行 npm run start 命令来尝试启动开发服务器。

二. 注意事项

1. 使用 CSS 预处理器

如果项目中使用了 CSS 预处理器需要安装 Plugin，根据情况选择：

powershell 复制代码

npm add @rsbuild/plugin-sass -D  // sass
npm add @rsbuild/plugin-less -D	 // less

根据安装的依赖，在 rsbuild.config.ts 中添加：

js 复制代码

import { pluginSass } from '@rsbuild/plugin-sass';
import { pluginLess } from '@rsbuild/plugin-less';

export default {
  plugins: [pluginSass()],
};

2. 使用 SVGR

如果使用了 CRA 的 "SVG 转 React 组件" 功能（即 SVGR），还需要安装 Rsbuild 的 SVGR 插件。

如使用了：

js 复制代码

import { ReactComponent as Logo } from './logo.svg';

const App = () => (
  <div>
    <Logo />
  </div>
);

需要安装和注册 @rsbuild/plugin-svgr，同样添加 Plugins：

js 复制代码

import { pluginSvgr } from '@rsbuild/plugin-svgr';

export default {
  plugins: [pluginSvgr({ mixedImport: true })],
};

三. 配置迁移

1. 迁移Proxy

需要手动将 setupProxy.js 配置迁移到 rsbuild.config.ts 中，如：

js 复制代码

server: {
    proxy: {
      "/api": {
        target: "https://xxx.com",
        secure: false,
        changeOrigin: true,
        pathRewrite: {
          "^/api": "",
        },
      },
    },
  },

2. 迁移 Webpack 配置

如果项目使用了 Cacro 等工具修改了 Webpack 配置，需要手动将配置迁移到 Rsbuild.config.ts 文件中，例如，开启 Cache、优化配置：

js 复制代码

import { pluginBabel } from '@rsbuild/plugin-babel';

export default {
  performance: {
    buildCache: true,
  },
  tools: {
    rspack: (config, { env, appendRules }) => {
      appendRules({
        test: /\.m?js/,
        resolve: {
          fullySpecified: false,
        },
      });

      if (env === 'production') {
        config.devtool = false;
        config.optimization = {
          ...(config.optimization || {}),
          minimize: true,
          splitChunks: productionSplitChunks,
          runtimeChunk: {
            name: 'runtime',
          },
          moduleIds: 'deterministic',
        };

        if (process.env.ANALYZE === 'true') {
          config.plugins ||= [];
          config.plugins.push(
            new BundleAnalyzerPlugin({
              analyzerMode: 'server',
              reportFilename: path.resolve(__dirname, 'build/bundle-report.html'),
              openAnalyzer: true,
              generateStatsFile: true,
              statsFilename: path.resolve(__dirname, 'build/bundle-stats.json'),
            }),
          );
        }
      }

      return config;
    },
  },
};

总结

通过迁移至 Rspack，完美解决了我项目中启动、热更新慢，打包时长过长等问题，极大提高了工作效率；如果你也遇到了类似的问题，尝试迁移，可能会有意想不到的惊喜。

如果你想继续了解Rspack，可以参考上一篇文章介绍：
Rspack简介：https://blog.csdn.net/weixin_38881784/article/details/160254824

后续将会持续更新 React、Vue3、微前端、性能优化 等系列文章，感兴趣可以先点点关注，感谢支持 ~