[Bug]: 本地开发 hmr 速度缓慢

[iwtem]

Version

System:
    OS: macOS 14.2.1
    CPU: (16) x64 Intel(R) Core(TM) i9-9880H CPU @ 2.30GHz
    Memory: 19.84 MB / 16.00 GB
    Shell: 5.9 - /bin/zsh
  Browsers:
    Chrome: 120.0.6099.234
    Safari: 17.2.1

Details

项目采用的是 monorepo 代码管理模式，大致的目录结构如下：

ui/
├── apps/
│   ├── main/ ----------------- 主应用
│   ├── app1/ ----------------- 应用 1
│   └── app2/ ----------------- 应用 2
├── packages/
│   ├── config/ -------------- 项目基础配置，包括 taidwind，rsbuild
│   ├── package1/ ------------ 组件库1
│   └── package2/ ------------ 组件库2
├── package.json ------------- 项目配置文件
├── pnpm-lock.yaml ----------- 依赖关系及版本锁
├── pnpm-workspace.yaml ------ monorepo workspace 配置
├── README.md ---------------- 项目说明与开发文档
└── tsconfig.json ------------ TypeScript 配置

在从 rspack 替换到 rsbuild 后，发现热更新的时间增加了 3.x，之前平均保持在 1s - 2s 之间，下面是现在的热更新的时间截图：

下面是我的 rsbuild 配置：

import { defineConfig } from '@rsbuild/core';
import { pluginReact } from '@rsbuild/plugin-react';
import { pluginSvgr } from '@rsbuild/plugin-svgr';

export default defineConfig({
  source: {
    entry: { index: './src/index.tsx' },
  },
  output: {
    copy: ['public/favicon.ico', { from: 'public/img', to: 'img' }],
  },
  html: { template: 'public/index.html' },
  server: {
    historyApiFallback: true,
    proxy: {
      '/app': { target: 'https:xxx', changeOrigin: true },
    },
  },
  plugins: [pluginReact(), pluginSvgr({ svgDefaultExport: 'component' })],
  performance: {
    bundleAnalyze: process.env.BUNDLE_ANALYZE
      ? { analyzerMode: 'server', openAnalyzer: true }
      : undefined,
  },
});

有考虑过可能和 taildwind 的 content 配置有关系，但是删除部分元素后，没有明显的效果，下面是我的 taildwind 配置：

import type { Config } from 'tailwindcss';

const config: Config = {
  content: [
    'public/index.html',
    'src/**/*.tsx',
    '../app1/src/**/*.tsx',
    '../app2/src/**/*.{ts,tsx}',
    '../../packages/package1/src/**/*.tsx',
    '../../packages/package2/src/**/*.tsx',
  ],
  plugins: [],
};

export default config;

Reproduce link

1

Reproduce Steps

项目启动后，之后的热更新就会很慢

[chenjiahan]

可以把 tailwindcss 关闭再对比一下

[chenjiahan]

没有复现链接的话很难排查

[iwtem]

可以把 tailwindcss 关闭再对比一下

我把 taildwind 从 postcss.confing.js 配置中移除，发现几乎没效果，还是保持在 3s 以上，下面是 postcss.config 的配置：

module.exports = {
  plugins: {},
};

[chenjiahan]

从现有信息看可能的原因有：

• Rspack 版本不同导致的性能差异
• 使用 SVGR 导致的性能开销

你可以按照这两个因素排查下

[github-actions[bot]]

Hello @iwtem. Please provide a reproduction repository or online demo. For background, see Why reproductions are required. Thanks ❤️