feat: add large code splitting tests

web-infra-dev · Jan 7, 2025 · 8791bf5 · 8791bf5
1 parent ffd5191
commit 8791bf5
Show file tree

Hide file tree

Showing 9 changed files with 208 additions and 0 deletions.
diff --git a/.gitignore b/.gitignore
@@ -8,3 +8,4 @@ output
 *.cpuprofile
 *.heapprofile
 .DS_Store
+cases/large-dyn-imports/src/**/
diff --git a/bench.config.js b/bench.config.js
@@ -9,6 +9,8 @@ export default {
 		"arco-pro_production-mode",
 		"arco-pro_production-mode_traverse-chunk-modules",
 		"arco-pro_production-mode_generate-package-json-webpack-plugin",
+		"large-dyn-imports_development-mode",
+		"large-dyn-imports_production-mode",
 		"threejs_development-mode_10x",
 		"threejs_development-mode_10x_hmr",
 		"threejs_production-mode_10x"

diff --git a/bin/cli.js b/bin/cli.js
@@ -7,6 +7,7 @@ import actionsCore from "@actions/core";
 import { run, formatResultTable } from "../lib/index.js";
 import { isGitHubActions, dirExist } from "../lib/utils.js";
 import { compare } from "../lib/compare.js";
+import { generateCodeSplittingCase } from "../lib/gen-code-splitting-case.js";
 
 $.verbose = true;
 
@@ -79,6 +80,9 @@ const jobs = (_job.length === 0 ? undefined : _job) ?? config.jobs ?? [];
 const rspackDirectory = config.rspackDirectory ?? join(cwd, ".rspack");
 const benchmarkDirectory = config.benchmarkDirectory ?? join(cwd, "output");
 
+// prepare some benchmark case
+await generateCodeSplittingCase();
+
 if (!command || command === "build") {
 	const fetchUrl = `https://github.com/${repository}`;
 	if (!(await dirExist(rspackDirectory))) {

diff --git a/cases/large-dyn-imports/hmr.js b/cases/large-dyn-imports/hmr.js
@@ -0,0 +1,11 @@
+module.exports = [
+	{
+		rebuildChangeFile: "./src/index.js",
+		generateContent: function (originalContent, runTimes) {
+			return (
+				`import "data:text/javascript,export default ${runTimes}";
+` + originalContent
+			);
+		}
+	}
+];
diff --git a/cases/large-dyn-imports/index.html b/cases/large-dyn-imports/index.html
@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta http-equiv="X-UA-Compatible" content="IE=edge">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>large dyn imports</title>
+</head>
+<body>
+  <div id="root"></div>
+</body>
+</html>
diff --git a/cases/large-dyn-imports/package.json b/cases/large-dyn-imports/package.json
@@ -0,0 +1,3 @@
+{
+  "name": "large-dyn-imports"
+}
diff --git a/cases/large-dyn-imports/rspack.config.js b/cases/large-dyn-imports/rspack.config.js
@@ -0,0 +1,71 @@
+const fs = require("fs");
+const path = require("path");
+const rspack = require("@rspack/core");
+const ReactRefreshPlugin = require("@rspack/plugin-react-refresh");
+
+const prod = process.env.NODE_ENV === "production";
+/** @type {import("@rspack/cli").Configuration} */
+
+module.exports = {
+	resolve: {
+		extensions: [".js", ".jsx"]
+	},
+	entry: { main: "./src/index.js" },
+	plugins: [
+		new rspack.HtmlRspackPlugin({
+			template: path.resolve(__dirname, "./index.html")
+		}),
+		!prod && new ReactRefreshPlugin()
+	].filter(Boolean),
+	optimization: {
+		splitChunks: {
+			chunks: "all",
+		}
+	},
+	module: {
+		rules: [
+			{
+				test: /\.(j|t)s$/,
+				exclude: [/[\\/]node_modules[\\/]/],
+				loader: "builtin:swc-loader",
+				options: {
+					sourceMap: true,
+					jsc: {
+						parser: {
+							syntax: "typescript"
+						},
+						externalHelpers: true
+					},
+					env: {
+						targets: "Chrome >= 48"
+					}
+				}
+			},
+			{
+				test: /\.(j|t)sx$/,
+				loader: "builtin:swc-loader",
+				exclude: [/[\\/]node_modules[\\/]/],
+				options: {
+					sourceMap: true,
+					jsc: {
+						parser: {
+							syntax: "typescript",
+							tsx: true
+						},
+						transform: {
+							react: {
+								runtime: "automatic",
+								development: !prod,
+								refresh: !prod
+							}
+						},
+						externalHelpers: true
+					},
+					env: {
+						targets: "Chrome >= 48"
+					}
+				}
+			}
+		]
+	},
+};
diff --git a/cases/large-dyn-imports/src/index.js b/cases/large-dyn-imports/src/index.js
@@ -0,0 +1 @@
+import './dynamic/dynamic-0.jsx'
diff --git a/lib/gen-code-splitting-case.js b/lib/gen-code-splitting-case.js
@@ -0,0 +1,103 @@
+import fs from "fs/promises";
+import path from "path";
+import { fileURLToPath } from 'node:url';
+
+const __dirname = path.dirname(fileURLToPath(import.meta.url));
+
+const NUM_DYN_MODULES = 3_000;
+const NUM_STATIC_IMPORTS_PER_MODULE = 10;
+const NUM_REUSE_IMPORTS_PER_MODULE = 3;
+const NUM_DYN_IMPORTS_PER_MODULE = 3;
+
+const CONTEXT = path.resolve(__dirname, "../cases/large-dyn-imports/src");
+
+async function genStaticLeafModule(index) {
+	const code = `import React from 'react'
+
+function Navbar({ show }) {
+	return (
+		<div>
+			{show}
+		</div>
+	)
+}
+
+export default Navbar`;
+
+	await fs.mkdir(path.join(CONTEXT, "./leaves"), { recursive: true });
+	await fs.writeFile(
+		path.join(CONTEXT, `./leaves/Component-${index}.jsx`),
+		code
+	);
+}
+
+const generated = new Set();
+
+export async function generateCodeSplittingCase() {
+	await genDynamicModule();
+}
+
+async function genDynamicModule(index = 0) {
+	if (generated.has(index)) return false;
+	generated.add(index);
+	if (index > NUM_DYN_MODULES) return false;
+
+	const access = [];
+	const staticImports = [];
+
+	const promises = [];
+	for (let i = index; i < index + NUM_STATIC_IMPORTS_PER_MODULE; i++) {
+		staticImports.push(`import Comp${i} from '../leaves/Component-${i}.jsx';`);
+		promises.push(genStaticLeafModule(i));
+		access.push(`Comp${i}`);
+	}
+	await Promise.all(promises);
+
+	const usedNames = new Set();
+  const reusedStaticImports = [];
+
+  for (let i = 0; i < NUM_REUSE_IMPORTS_PER_MODULE; i++) {
+    usedNames.add(i);
+
+    const random = Math.floor(Math.random() * index);
+    if (random < index) {
+      if (usedNames.has(random)) {
+        continue;
+      }
+      usedNames.add(random);
+      reusedStaticImports.push(
+        `import Comp_${random} from '../leaves/Component-${random}.jsx'`
+      );
+      access.push(`Comp_${i}`);
+    }
+  }
+
+
+	const dynamicImports = [];
+
+	for (let i = index + 1; i < index + NUM_DYN_IMPORTS_PER_MODULE + 1; i++) {
+		if ((await genDynamicModule(i)) !== false) {
+			dynamicImports.push(`import('./dynamic-${i}.jsx')`);
+		}
+	}
+
+	const code = `
+${staticImports.join("\n")}
+
+// reuse imports
+${reusedStaticImports.join("\n")}
+
+// access data
+${access.join("\n")}
+
+// dynamic import
+${dynamicImports.join("\n")}
+
+export default ${index};`;
+
+	await fs.mkdir(path.join(CONTEXT, "./dynamic"), { recursive: true });
+	await fs.writeFile(
+		path.join(CONTEXT, `./dynamic/dynamic-${index}.jsx`),
+		code
+	);
+}