[v1.3] rspack 打包优化

package.json

@@ -54,6 +54,7 @@
     "@eslint/js": "9.38.0",
     "@rspack/cli": "^1.5.8",
     "@rspack/core": "^1.5.8",
+    "@swc/helpers": "^0.5.17",
     "@testing-library/jest-dom": "^6.6.3",
     "@testing-library/react": "^16.3.0",
     "@types/chrome": "^0.1.27",
@@ -89,5 +90,10 @@
     "unocss": "66.5.4",
     "vitest": "^3.2.4"
   },
-  "packageManager": "pnpm@10.12.4"
+  "packageManager": "pnpm@10.12.4",
+  "sideEffects": [
+    "**/*.css",
+    "**/*.scss",
+    "**/*.less"
+  ]
 }

rspack.config.ts

@@ -1,9 +1,11 @@
+/* eslint-disable no-fallthrough */
 import * as path from "path";
 import { defineConfig } from "@rspack/cli";
 import { rspack } from "@rspack/core";
 import { readFileSync } from "fs";
+import { NormalModule } from "@rspack/core";
 
-const pkg = JSON.parse(readFileSync("./package.json") as unknown as string);
+const pkg = JSON.parse(readFileSync("./package.json", "utf-8"));
 
 const version = pkg.version;
 const dirname = path.resolve();
@@ -13,9 +15,12 @@ const isBeta = version.includes("-");
 // Target browsers, see: https://github.com/browserslist/browserslist
 const targets = ["chrome >= 87", "edge >= 88", "firefox >= 78", "safari >= 14"];
 
-const src = `${dirname}/src`;
-const dist = `${dirname}/dist`;
-const assets = `${src}/assets`;
+const src = path.join(dirname, "src");
+const dist = path.join(dirname, "dist");
+const assets = path.join(src, "assets");
+
+// 排除这些文件，不进行分离
+const chunkExcludeSet = new Set(["editor.worker", "ts.worker", "linter.worker", "service_worker", "content", "inject"]);
 
 export default defineConfig({
   ...(isDev
@@ -92,6 +97,7 @@ export default defineConfig({
             loader: "builtin:swc-loader",
             options: {
               jsc: {
+                externalHelpers: true,
                 parser: {
                   syntax: "typescript",
                   tsx: true,
@@ -212,25 +218,123 @@ export default defineConfig({
       chunks: ["sandbox"],
     }),
   ].filter(Boolean),
+  experiments: {
+    css: true,
+    parallelCodeSplitting: true,
+    parallelLoader: true,
+  },
   optimization: {
     minimizer: [
-      new rspack.SwcJsMinimizerRspackPlugin({}),
+      new rspack.SwcJsMinimizerRspackPlugin({
+        minimizerOptions: {
+          minify: !isDev,
+          mangle: {
+            keep_classnames: false,
+            keep_fnames: false,
+            keep_private_props: false,
+            ie8: false,
+            toplevel: true,
+          },
+          module: true,
+          compress: {
+            passes: 2,
+            drop_console: false,
+            drop_debugger: !isDev,
+            ecma: 2020,
+            arrows: true,
+            dead_code: true,
+            ie8: false,
+            keep_classnames: false,
+            keep_fargs: false,
+            keep_fnames: false,
+            toplevel: true,
+            sequences: true,
+            hoist_props: false,
+            hoist_vars: false,
+            reduce_funcs: true,
+            reduce_vars: true,
+            pure_getters: "strict",
+          },
+          format: {
+            comments: false,
+            beautify: false,
+            ecma: 2020,
+          },
+        },
+      }),
       new rspack.LightningCssMinimizerRspackPlugin({
         minimizerOptions: { targets },
       }),
     ],
+    removeAvailableModules: true,
+    removeEmptyChunks: true,
+    realContentHash: true,
+    sideEffects: true,
+    providedExports: true,
+    concatenateModules: true,
+    avoidEntryIife: true,
+    mergeDuplicateChunks: true,
     splitChunks: {
-      chunks: (chunk) => {
-        // 排除这些文件，不进行分离
-        return !["editor.worker", "ts.worker", "linter.worker", "service_worker", "content", "inject"].includes(
-          chunk.name || ""
-        );
+      minChunks: 1,
+      maxAsyncRequests: 30,
+      maxInitialRequests: 30,
+      minSize: {
+        javascript: 40 * 1024, // 40 kB
+        css: 10 * 1024, // 10 kB
+      },
+      maxSize: {
+        javascript: 2 * 1024 * 1024, // 2 MB
+        css: 2 * 1024 * 1024, // 2 MB
+      },
+      chunks: (chunk) => !chunkExcludeSet.has(chunk.name || ""),
+      hidePathInfo: false,
+      name: (module, _ctx) => {
+        if (module instanceof NormalModule) {
+          const p = `/${module.rawRequest}|/${module.resource}`.toLowerCase().replace(/[\\@/]+/g, "/");
+          if (p.startsWith("/packages/message/")) return "lib_message";
+          if (module.type === "json" && p.includes("translation.json")) return "translation_json";
+          let tag = "";
+          const idx = p.indexOf("/node_modules/");
+          if (idx >= 0) {
+            let q = p.replace(/\.pnpm\/?/g, "");
+            q = q.substring(idx);
+            q = q.replace(/\..*/, "");
+            tag = q.split("/")[2] || "";
+          }
+          if (module.type !== "css" && tag === "monaco-editor") return "lib_monaco";
+          switch (tag) {
+            case "react-icons":
+              if (p.includes("/react-icons/tb")) return undefined;
+            case "react-dropzone":
+            case "react-dom":
+            case "react-i18next":
+            case "react-router-dom":
+            case "react-joyride":
+            case "react":
+              return `lib_${tag}`;
+          }
+          if (tag.startsWith("dnd-kit")) return "lib_dnd-kit";
+          if (tag.startsWith("popper")) return "lib_react-joyride";
+          if (tag.startsWith("react-")) return "lib_react";
+          if (tag.startsWith("eslint")) return "lib_eslint";
+          if (tag.startsWith("i18n")) return "lib_i18n";
+          if (
+            tag.startsWith("arco-design") ||
+            tag === "resize-observer-polyfill" ||
+            tag === "b-validate" ||
+            tag === "lodash" ||
+            tag === "focus-lock"
+          ) {
+            return "lib_arco_design";
+          }
+          if (tag) {
+            // cron, dayjs, yaml, jszip, prettier, ...
+            if (tag === "luxon") return "lib_cron";
+            return `lib_${tag}`;
+          }
+          return "chunk";
+        }
       },
-      minSize: 307200,
-      maxSize: 4194304,
     },
   },
-  experiments: {
-    css: true,
-  },
 });

src/pages/components/CodeEditor/index.tsx

@@ -2,6 +2,9 @@ import { editor, Range } from "monaco-editor";
 import React, { useEffect, useImperativeHandle, useRef, useState } from "react";
 import { globalCache, systemConfig } from "@App/pages/store/global";
 import { LinterWorker } from "@App/pkg/utils/monaco-editor";
+import { fnPlaceHolder } from "@App/pages/store/AppContext";
+
+fnPlaceHolder.setEditorTheme = (theme: string) => editor.setTheme(theme);
 
 type Props = {
   className?: string;

src/pages/store/AppContext.tsx

@@ -1,6 +1,8 @@
 import React, { useState, createContext, type ReactNode, useEffect, useContext } from "react";
 import { messageQueue } from "./global";
-import { editor } from "monaco-editor";
+export const fnPlaceHolder = {
+  setEditorTheme: null,
+} as { setEditorTheme: ((theme: string) => void) | null };
 
 export type ThemeParam = { theme: "auto" | "light" | "dark" };
 export interface AppContextType {
@@ -46,12 +48,12 @@ const setAppColorTheme = (theme: "light" | "dark" | "auto") => {
     case "dark":
       document.documentElement.classList.add("dark");
       document.body.setAttribute("arco-theme", "dark");
-      editor.setTheme("vs-dark");
+      fnPlaceHolder.setEditorTheme?.("vs-dark");
       break;
     case "light":
       document.documentElement.classList.remove("dark");
       document.body.removeAttribute("arco-theme");
-      editor.setTheme("vs");
+      fnPlaceHolder.setEditorTheme?.("vs");
       break;
   }
 };