perf: reduce the bundle size of client (#644)

Author: yifancong

packages/client/rsbuild.config.ts

@@ -146,6 +146,7 @@ export default defineConfig(({ env }) => {
                     ids: true,
                     version: true,
                     entrypoints: true,
+                    optimizationBailout: true,
                   });
                   await fs.promises.writeFile(
                     WebpackStatsFilePath,
@@ -161,13 +162,6 @@ export default defineConfig(({ env }) => {
           chainConfig.plugin('rsdoctor').use(RsdoctorRspackPlugin, [
             {
               disableClientServer: !ENABLE_CLIENT_SERVER,
-              features: {
-                loader: true,
-                plugins: true,
-                resolver: true,
-                bundle: true,
-                treeShaking: true,
-              },
             },
           ]);
         }

packages/components/src/pages/TreeShaking/table.tsx

@@ -1,5 +1,5 @@
 import { SDK } from '@rsdoctor/types';
-import {
+import type {
   Module,
   ModuleGraph,
   Statement,

packages/components/src/pages/TreeShaking/utils.tsx

@@ -1,7 +1,8 @@
 import { useMemo } from 'react';
 import path from 'path-browserify';
 import { escape, get } from 'lodash-es';
-import { Module, ModuleGraph, Statement, Variable } from '@rsdoctor/graph';
+import type { ModuleGraph, Statement, Variable } from '@rsdoctor/graph';
+import { Module } from '@rsdoctor/graph';
 import { Tag, Space } from 'antd';
 import { Range } from './range';
 import type { editor, Range as RangeClass } from 'monaco-editor';

packages/graph/package.json

@@ -22,14 +22,14 @@
   "dependencies": {
     "@rsdoctor/types": "workspace:*",
     "@rsdoctor/utils": "workspace:*",
-    "lodash": "^4.17.21",
+    "lodash.unionby": "^4.8.0",
     "socket.io": "4.8.1",
     "source-map": "^0.7.4"
   },
   "devDependencies": {
     "@types/body-parser": "1.19.5",
     "@types/estree": "1.0.5",
-    "@types/lodash": "^4.17.13",
+    "@types/lodash.unionby": "^4.8.9",
     "@types/node": "^16",
     "fs-extra": "^11.1.1",
     "tslib": "2.8.1",

packages/graph/src/graph/module-graph/module.ts

@@ -1,6 +1,6 @@
 import { SDK } from '@rsdoctor/types';
 import path from 'path';
-import { isNumber } from 'lodash';
+import { Lodash } from '@rsdoctor/utils/common';
 import type { SourceMapConsumer } from 'source-map';
 import type { Program } from 'estree';
 import { Dependency } from './dependency';
@@ -263,7 +263,7 @@ export class Module implements SDK.ModuleInstance {
       bias: 1,
     });
 
-    if (isNumber(startInSource.line)) {
+    if (Lodash.isNumber(startInSource.line)) {
       source.start = {
         line: startInSource.line,
         column: startInSource.column ?? undefined,
@@ -278,7 +278,7 @@ export class Module implements SDK.ModuleInstance {
         // bias: 2,
       });
 
-      if (isNumber(endInSource.line)) {
+      if (Lodash.isNumber(endInSource.line)) {
         source.end = {
           line: endInSource.line,
           column: endInSource.column ?? undefined,

packages/graph/src/graph/module-graph/utils.ts

@@ -1,5 +1,5 @@
 import type { SDK } from '@rsdoctor/types';
-import { last, isUndefined, isNil } from 'lodash';
+import { Lodash } from '@rsdoctor/utils/common';
 
 export function isSamePosition(
   po1: SDK.SourcePosition,
@@ -13,11 +13,11 @@ export function isSameRange(po1: SDK.SourceRange, po2: SDK.SourceRange) {
     return false;
   }
 
-  if (!isNil(po1.end) && !isNil(po2.end)) {
+  if (!Lodash.isNil(po1.end) && !Lodash.isNil(po2.end)) {
     return isSamePosition(po1.end, po2.end);
   }
 
-  return isUndefined(po1.end) && isUndefined(po2.end);
+  return Lodash.isUndefined(po1.end) && Lodash.isUndefined(po2.end);
 }
 
 /**
@@ -44,7 +44,7 @@ export function getModuleName(name?: string) {
   }
 
   if (NAME_WITH_LOADERS.test(name)) {
-    const normalizedName = last(name.split(NAME_WITH_LOADERS));
+    const normalizedName = Lodash.last(name.split(NAME_WITH_LOADERS));
 
     if (normalizedName?.trim()) {
       return normalizedName;

packages/graph/src/graph/package-graph/graph.ts

@@ -1,5 +1,5 @@
-import { unionBy } from 'lodash';
-import { dirname, join, resolve } from 'path';
+import unionBy from 'lodash.unionby';
+import { resolve } from 'path';
 import { SDK } from '@rsdoctor/types';
 import type { ModuleGraph, Module } from '../module-graph';
 import { Package } from './package';

packages/utils/package.json

@@ -88,7 +88,6 @@
     "get-port": "5.1.1",
     "json-stream-stringify": "3.0.1",
     "lines-and-columns": "2.0.4",
-    "lodash": "^4.17.21",
     "rslog": "^1.2.3",
     "strip-ansi": "^6.0.1"
   },
@@ -98,7 +97,6 @@
     "@types/deep-eql": "4.0.2",
     "@types/envinfo": "7.8.4",
     "@types/fs-extra": "^11.0.4",
-    "@types/lodash": "^4.17.13",
     "@types/node": "^16",
     "tslib": "2.8.1",
     "typescript": "^5.2.2"

packages/utils/src/common/index.ts

@@ -13,3 +13,4 @@ export * as Data from './data';
 export * as Alerts from './alerts';
 export * as Rspack from './rspack';
 export * as Package from './package';
+export * as Lodash from './lodash';

packages/utils/src/common/lodash.ts

@@ -0,0 +1,37 @@
+// Replace lodash's isUndefined function
+export function isUndefined(value: unknown): value is undefined {
+  return typeof value === 'undefined';
+}
+
+// Replace lodash's isNumber function
+export function isNumber(value: unknown): value is number {
+  return typeof value === 'number' && !Number.isNaN(value);
+}
+
+export function isObject(value: unknown): value is Record<string, unknown> {
+  return typeof value === 'object' && value !== null;
+}
+
+// Replace lodash's isEmpty function
+export function isEmpty(value: unknown): boolean {
+  return (
+    value == null || // Check for null or undefined
+    (Array.isArray(value) && value.length === 0) || // Check for empty array
+    (typeof value === 'object' && Object.keys(value).length === 0) // Check for empty object
+  );
+}
+
+// Replace lodash's last function
+export function last<T>(array: T[]): T | undefined {
+  return array[array.length - 1];
+}
+
+// Replace lodash's compact function
+export function compact<T>(array: (T | null | undefined)[]): T[] {
+  return array.filter((item): item is T => item != null || !item); // Filter out null and undefined
+}
+
+// Replace lodash's isNil function
+export function isNil(value: unknown): value is null | undefined {
+  return value === null || value === undefined;
+}