perf: bump chokidar to v4 and remove fsevents dependency (#3960)

Author: chenjiahan

.github/renovate.json5

@@ -73,7 +73,6 @@
     // require Node 18
     'copy-webpack-plugin',
     // major version contains breaking changes
-    'chokidar',
     'style-loader',
     'http-proxy-middleware',
   ],

packages/core/package.json

@@ -60,12 +60,13 @@
     "@rslib/core": "0.0.18",
     "@types/connect": "3.4.38",
     "@types/fs-extra": "^11.0.4",
+    "@types/is-glob": "^4.0.4",
     "@types/node": "^22.9.0",
     "@types/on-finished": "2.3.4",
     "@types/webpack-bundle-analyzer": "4.7.0",
     "@types/ws": "^8.5.13",
     "browserslist-load-config": "1.0.0",
-    "chokidar": "3.6.0",
+    "chokidar": "^4.0.1",
     "commander": "^12.1.0",
     "connect": "3.7.0",
     "connect-history-api-fallback": "^2.0.0",
@@ -76,6 +77,7 @@
     "fs-extra": "^11.2.0",
     "html-rspack-plugin": "6.0.2",
     "http-proxy-middleware": "^2.0.6",
+    "is-glob": "^4.0.3",
     "jiti": "^1.21.6",
     "launch-editor-middleware": "^2.9.1",
     "mrmime": "^2.0.0",
@@ -94,15 +96,13 @@
     "rspack-manifest-plugin": "5.0.2",
     "sirv": "^3.0.0",
     "style-loader": "3.3.4",
+    "tinyglobby": "^0.2.10",
     "typescript": "^5.6.3",
     "webpack": "^5.96.1",
     "webpack-bundle-analyzer": "^4.10.2",
     "webpack-merge": "6.0.1",
     "ws": "^8.18.0"
   },
-  "optionalDependencies": {
-    "fsevents": "~2.3.3"
-  },
   "engines": {
     "node": ">=16.7.0"
   },

packages/core/prebundle.config.mjs

@@ -39,12 +39,8 @@ export default {
     'webpack-merge',
     'html-rspack-plugin',
     'mrmime',
-    {
-      name: 'chokidar',
-      externals: {
-        fsevents: 'fsevents',
-      },
-    },
+    'tinyglobby',
+    'chokidar',
     {
       name: 'picocolors',
       beforeBundle({ depPath }) {

packages/core/src/cli/init.ts

@@ -60,14 +60,14 @@ export async function init({
 
           const paths = castArray(watchFilesConfig.paths);
           if (watchFilesConfig.options) {
-            watchFilesForRestart(paths, watchFilesConfig.options);
+            watchFilesForRestart(paths, root, watchFilesConfig.options);
           } else {
             files.push(...paths);
           }
         }
       }
 
-      watchFilesForRestart(files);
+      watchFilesForRestart(files, root);
     }
 
     config.source ||= {};

packages/core/src/config.ts

@@ -1,7 +1,7 @@
 import fs from 'node:fs';
 import { createRequire } from 'node:module';
 import { dirname, isAbsolute, join } from 'node:path';
-import type { WatchOptions } from '../compiled/chokidar/index.js';
+import type { ChokidarOptions } from '../compiled/chokidar/index.js';
 import RspackChain from '../compiled/rspack-chain/index.js';
 import {
   ASSETS_DIST_DIR,
@@ -33,6 +33,7 @@ import {
 import { logger } from './logger';
 import { mergeRsbuildConfig } from './mergeConfig';
 import { restartDevServer } from './server/restart';
+import { createChokidar } from './server/watchFiles.js';
 import type {
   InspectConfigOptions,
   InspectConfigResult,
@@ -348,14 +349,14 @@ const resolveConfigPath = (root: string, customConfig?: string) => {
 
 export async function watchFilesForRestart(
   files: string[],
-  watchOptions?: WatchOptions,
+  root: string,
+  watchOptions?: ChokidarOptions,
 ): Promise<void> {
   if (!files.length) {
     return;
   }
 
-  const chokidar = await import('../compiled/chokidar/index.js');
-  const watcher = chokidar.watch(files, {
+  const watcher = await createChokidar(files, root, {
     // do not trigger add for initial files
     ignoreInitial: true,
     // If watching fails due to read permissions, the errors will be suppressed silently.

packages/core/src/server/devServer.ts

@@ -249,14 +249,15 @@ export async function createDevServer<
 
   const compileMiddlewareAPI = runCompile ? await startCompile() : undefined;
 
+  const root = options.context.rootPath;
+
   const fileWatcher = await setupWatchFiles({
     dev: devConfig,
     server: config.server,
     compileMiddlewareAPI,
+    root,
   });
 
-  const pwd = options.context.rootPath;
-
   const readFileSync = (fileName: string) => {
     if ('readFileSync' in outputFileSystem) {
       // bundle require needs a synchronous method, although readFileSync is not within the outputFileSystem type definition, but nodejs fs API implemented.
@@ -298,7 +299,7 @@ export async function createDevServer<
   );
 
   const devMiddlewares = await getMiddlewares({
-    pwd,
+    pwd: root,
     compileMiddlewareAPI,
     dev: devConfig,
     server: config.server,

packages/core/src/server/watchFiles.ts

@@ -1,8 +1,9 @@
+import isGlob from 'is-glob';
 import type { FSWatcher } from '../../compiled/chokidar/index.js';
 import { normalizePublicDirs } from '../config';
 import { castArray } from '../helpers';
 import type {
-  ChokidarWatchOptions,
+  ChokidarOptions,
   DevConfig,
   ServerConfig,
   WatchFiles,
@@ -13,6 +14,7 @@ type WatchFilesOptions = {
   dev: DevConfig;
   server: ServerConfig;
   compileMiddlewareAPI?: CompileMiddlewareAPI;
+  root: string;
 };
 
 export async function setupWatchFiles(options: WatchFilesOptions): Promise<
@@ -21,17 +23,22 @@ export async function setupWatchFiles(options: WatchFilesOptions): Promise<
     }
   | undefined
 > {
-  const { dev, server, compileMiddlewareAPI } = options;
+  const { dev, server, root, compileMiddlewareAPI } = options;
 
   const { hmr, liveReload } = dev;
   if ((!hmr && !liveReload) || !compileMiddlewareAPI) {
     return;
   }
 
-  const closeDevFilesWatcher = await watchDevFiles(dev, compileMiddlewareAPI);
+  const closeDevFilesWatcher = await watchDevFiles(
+    dev,
+    compileMiddlewareAPI,
+    root,
+  );
   const serverFilesWatcher = await watchServerFiles(
     server,
     compileMiddlewareAPI,
+    root,
   );
 
   return {
@@ -47,6 +54,7 @@ export async function setupWatchFiles(options: WatchFilesOptions): Promise<
 async function watchDevFiles(
   devConfig: DevConfig,
   compileMiddlewareAPI: CompileMiddlewareAPI,
+  root: string,
 ) {
   const { watchFiles } = devConfig;
   if (!watchFiles) {
@@ -57,7 +65,11 @@ async function watchDevFiles(
 
   for (const { paths, options, type } of castArray(watchFiles)) {
     const watchOptions = prepareWatchOptions(paths, options, type);
-    const watcher = await startWatchFiles(watchOptions, compileMiddlewareAPI);
+    const watcher = await startWatchFiles(
+      watchOptions,
+      compileMiddlewareAPI,
+      root,
+    );
     if (watcher) {
       watchers.push(watcher);
     }
@@ -73,6 +85,7 @@ async function watchDevFiles(
 function watchServerFiles(
   serverConfig: ServerConfig,
   compileMiddlewareAPI: CompileMiddlewareAPI,
+  root: string,
 ) {
   const publicDirs = normalizePublicDirs(serverConfig.publicDir);
   if (!publicDirs.length) {
@@ -88,12 +101,12 @@ function watchServerFiles(
   }
 
   const watchOptions = prepareWatchOptions(watchPaths);
-  return startWatchFiles(watchOptions, compileMiddlewareAPI);
+  return startWatchFiles(watchOptions, compileMiddlewareAPI, root);
 }
 
 function prepareWatchOptions(
   paths: string | string[],
-  options: ChokidarWatchOptions = {},
+  options: ChokidarOptions = {},
   type?: WatchFiles['type'],
 ) {
   return {
@@ -103,20 +116,53 @@ function prepareWatchOptions(
   };
 }
 
+export async function createChokidar(
+  pathOrGlobs: string[],
+  root: string,
+  options: ChokidarOptions,
+): Promise<FSWatcher> {
+  const chokidar = await import('../../compiled/chokidar/index.js');
+
+  const watchFiles: Set<string> = new Set();
+
+  const globPatterns = pathOrGlobs.filter((pathOrGlob) => {
+    if (isGlob(pathOrGlob)) {
+      return true;
+    }
+    watchFiles.add(pathOrGlob);
+    return false;
+  });
+
+  if (globPatterns.length) {
+    const tinyglobby = await import('../../compiled/tinyglobby/index.js');
+    // interop default to make both CJS and ESM work
+    const { glob } = tinyglobby.default || tinyglobby;
+    const files = await glob(globPatterns, {
+      cwd: root,
+      absolute: true,
+    });
+    for (const file of files) {
+      watchFiles.add(file);
+    }
+  }
+
+  return chokidar.watch(Array.from(watchFiles), options);
+}
+
 async function startWatchFiles(
   {
     paths,
     options,
     type = 'reload-page',
   }: ReturnType<typeof prepareWatchOptions>,
   compileMiddlewareAPI: CompileMiddlewareAPI,
+  root: string,
 ) {
   if (type !== 'reload-page') {
     return;
   }
 
-  const chokidar = await import('../../compiled/chokidar/index.js');
-  const watcher = chokidar.watch(paths, options);
+  const watcher = await createChokidar(paths, root, options);
 
   watcher.on('change', () => {
     compileMiddlewareAPI.sockWrite('static-changed');

packages/core/src/types/config.ts

@@ -12,7 +12,7 @@ import type {
   SwcLoaderOptions,
   rspack,
 } from '@rspack/core';
-import type { WatchOptions } from '../../compiled/chokidar/index.js';
+import type { ChokidarOptions } from '../../compiled/chokidar/index.js';
 import type {
   Options as HttpProxyOptions,
   Filter as ProxyFilter,
@@ -1253,11 +1253,11 @@ export type ClientConfig = {
 export type NormalizedClientConfig = Pick<ClientConfig, 'protocol'> &
   Omit<Required<ClientConfig>, 'protocol'>;
 
-export type ChokidarWatchOptions = WatchOptions;
+export type { ChokidarOptions };
 
 export type WatchFiles = {
   paths: string | string[];
-  options?: WatchOptions;
+  options?: ChokidarOptions;
   type?: 'reload-page' | 'reload-server';
 };