From 5aecd2513b81efe22d1628ec7d25100b96080dac Mon Sep 17 00:00:00 2001 From: yifancong Date: Wed, 18 Dec 2024 17:41:58 +0800 Subject: [PATCH] perf: reduce the bundle size of client (#644) --- packages/client/rsbuild.config.ts | 8 +--- .../src/pages/TreeShaking/table.tsx | 2 +- .../src/pages/TreeShaking/utils.tsx | 3 +- packages/graph/package.json | 4 +- .../graph/src/graph/module-graph/module.ts | 6 +-- .../graph/src/graph/module-graph/utils.ts | 8 ++-- .../graph/src/graph/package-graph/graph.ts | 4 +- packages/utils/package.json | 2 - packages/utils/src/common/index.ts | 1 + packages/utils/src/common/lodash.ts | 37 +++++++++++++++++++ packages/utils/src/common/package.ts | 2 +- packages/utils/src/error/error.ts | 2 +- .../utils/src/rule-utils/document/document.ts | 2 +- .../utils/src/rule-utils/parser/asserts.ts | 2 +- pnpm-lock.yaml | 28 ++++++++------ 15 files changed, 73 insertions(+), 38 deletions(-) create mode 100644 packages/utils/src/common/lodash.ts diff --git a/packages/client/rsbuild.config.ts b/packages/client/rsbuild.config.ts index d3e4490a..47d5d1a4 100644 --- a/packages/client/rsbuild.config.ts +++ b/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, - }, }, ]); } diff --git a/packages/components/src/pages/TreeShaking/table.tsx b/packages/components/src/pages/TreeShaking/table.tsx index c78caa45..52c18a76 100644 --- a/packages/components/src/pages/TreeShaking/table.tsx +++ b/packages/components/src/pages/TreeShaking/table.tsx @@ -1,5 +1,5 @@ import { SDK } from '@rsdoctor/types'; -import { +import type { Module, ModuleGraph, Statement, diff --git a/packages/components/src/pages/TreeShaking/utils.tsx b/packages/components/src/pages/TreeShaking/utils.tsx index cfd2d282..2082596e 100644 --- a/packages/components/src/pages/TreeShaking/utils.tsx +++ b/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'; diff --git a/packages/graph/package.json b/packages/graph/package.json index fa64ff0f..a18fb933 100644 --- a/packages/graph/package.json +++ b/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", diff --git a/packages/graph/src/graph/module-graph/module.ts b/packages/graph/src/graph/module-graph/module.ts index 93582018..cbdbdde0 100644 --- a/packages/graph/src/graph/module-graph/module.ts +++ b/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, diff --git a/packages/graph/src/graph/module-graph/utils.ts b/packages/graph/src/graph/module-graph/utils.ts index 7b0e9e4e..2e7cb20d 100644 --- a/packages/graph/src/graph/module-graph/utils.ts +++ b/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; diff --git a/packages/graph/src/graph/package-graph/graph.ts b/packages/graph/src/graph/package-graph/graph.ts index d9753a40..cb348785 100644 --- a/packages/graph/src/graph/package-graph/graph.ts +++ b/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'; diff --git a/packages/utils/package.json b/packages/utils/package.json index 909fd991..b03fbfc0 100644 --- a/packages/utils/package.json +++ b/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" diff --git a/packages/utils/src/common/index.ts b/packages/utils/src/common/index.ts index ed13dbbd..fbc4c340 100644 --- a/packages/utils/src/common/index.ts +++ b/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'; diff --git a/packages/utils/src/common/lodash.ts b/packages/utils/src/common/lodash.ts new file mode 100644 index 00000000..ba3d93b8 --- /dev/null +++ b/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 { + 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(array: T[]): T | undefined { + return array[array.length - 1]; +} + +// Replace lodash's compact function +export function compact(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; +} diff --git a/packages/utils/src/common/package.ts b/packages/utils/src/common/package.ts index e1382800..5031a7bf 100644 --- a/packages/utils/src/common/package.ts +++ b/packages/utils/src/common/package.ts @@ -1,5 +1,5 @@ import { SDK } from '@rsdoctor/types'; -import { isEmpty, last, compact } from 'lodash'; +import { compact, isEmpty, last } from './lodash'; /** * The following code is modified based on diff --git a/packages/utils/src/error/error.ts b/packages/utils/src/error/error.ts index d04aa53f..0e6293e4 100644 --- a/packages/utils/src/error/error.ts +++ b/packages/utils/src/error/error.ts @@ -2,10 +2,10 @@ import { codeFrameColumns } from '@babel/code-frame'; import { Err, Rule } from '@rsdoctor/types'; import { Chalk, Instance } from 'chalk'; import deepEql from 'deep-eql'; -import { isNil } from 'lodash'; import stripAnsi from 'strip-ansi'; import { transform } from './transform'; import { insertSpace, toLevel } from './utils'; +import { isNil } from 'src/common/lodash'; let id = 1; diff --git a/packages/utils/src/rule-utils/document/document.ts b/packages/utils/src/rule-utils/document/document.ts index 2d312b2a..460c51d6 100644 --- a/packages/utils/src/rule-utils/document/document.ts +++ b/packages/utils/src/rule-utils/document/document.ts @@ -1,6 +1,6 @@ import { LinesAndColumns } from 'lines-and-columns'; -import { isUndefined, isNumber } from 'lodash'; import { Range, OffsetRange, Position, DocumentEditData } from './types'; +import { isNumber, isUndefined } from 'src/common/lodash'; /** Document Catalogue */ export class Document { diff --git a/packages/utils/src/rule-utils/parser/asserts.ts b/packages/utils/src/rule-utils/parser/asserts.ts index 7d27199d..702c2797 100644 --- a/packages/utils/src/rule-utils/parser/asserts.ts +++ b/packages/utils/src/rule-utils/parser/asserts.ts @@ -1,4 +1,4 @@ -import { isObject } from 'lodash'; +import { isObject } from 'src/common/lodash'; import { Node } from './types'; function isSyntaxNode(node: unknown): node is Node.SyntaxNode { diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 65a9f1ad..4f543c37 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -821,9 +821,9 @@ importers: '@rsdoctor/utils': specifier: workspace:* version: link:../utils - lodash: - specifier: ^4.17.21 - version: 4.17.21 + lodash.unionby: + specifier: ^4.8.0 + version: 4.8.0 socket.io: specifier: 4.8.1 version: 4.8.1 @@ -837,9 +837,9 @@ importers: '@types/estree': specifier: 1.0.5 version: 1.0.5 - '@types/lodash': - specifier: ^4.17.13 - version: 4.17.13 + '@types/lodash.unionby': + specifier: ^4.8.9 + version: 4.8.9 '@types/node': specifier: ^16 version: 16.18.104 @@ -1051,9 +1051,6 @@ importers: lines-and-columns: specifier: 2.0.4 version: 2.0.4 - lodash: - specifier: ^4.17.21 - version: 4.17.21 rslog: specifier: ^1.2.3 version: 1.2.3 @@ -1076,9 +1073,6 @@ importers: '@types/fs-extra': specifier: ^11.0.4 version: 11.0.4 - '@types/lodash': - specifier: ^4.17.13 - version: 4.17.13 '@types/node': specifier: ^16 version: 16.18.104 @@ -8713,6 +8707,12 @@ packages: '@types/lodash': 4.17.13 dev: true + /@types/lodash.unionby@4.8.9: + resolution: {integrity: sha512-mhu+q4xOl7nwf1EJi0jknjrOMBbKip54kW6rlvu7/gna5zqOIdwJjBfiMa26n6oPb5Bjbcz08tC2oz62p6EqyQ==} + dependencies: + '@types/lodash': 4.17.13 + dev: true + /@types/lodash@4.17.13: resolution: {integrity: sha512-lfx+dftrEZcdBPczf9d0Qv0x+j/rfNCMuC6OcfXmO8gkfeNAY88PgKUbvG56whcN23gc27yenwF6oJZXGFpYxg==} @@ -14241,6 +14241,10 @@ packages: resolution: {integrity: sha512-jttmRe7bRse52OsWIMDLaXxWqRAmtIUccAQ3garviCqJjafXOfNMO0yMfNpdD6zbGaTU0P5Nz7e7gAT6cKmJRw==} dev: true + /lodash.unionby@4.8.0: + resolution: {integrity: sha512-e60kn4GJIunNkw6v9MxRnUuLYI/Tyuanch7ozoCtk/1irJTYBj+qNTxr5B3qVflmJhwStJBv387Cb+9VOfABMg==} + dev: false + /lodash.uniq@4.5.0: resolution: {integrity: sha512-xfBaXQd9ryd9dlSDvnvI0lvxfLJlYAZzXomUYzLKtUeOQvOP5piqAWuGtrhWeqaXK9hhoM/iyJc5AV+XfsX3HQ==} dev: true