feat: add large code splitting tests

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

Hide file tree

Showing 11 changed files with 10,231 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/code-splitting-case-random-table.js b/lib/code-splitting-case-random-table.js
@@ -0,0 +1,29 @@
+import fs from "fs/promises";
+import path from "path";
+import { fileURLToPath } from "node:url";
+import { NUM_STATIC_MODULES, NUM_REUSE_IMPORTS_PER_MODULE, NUM_STATIC_IMPORTS_PER_MODULE } from "./gen-code-splitting-case.js";
+
+const __dirname = path.dirname(fileURLToPath(import.meta.url));
+
+async function main() {
+	const map = []
+	for (let i = 0; i < NUM_STATIC_MODULES; i += NUM_STATIC_IMPORTS_PER_MODULE) {
+		// imports from i to i + NUM_STATIC_IMPORTS_PER_MODULE
+		const depth = i / NUM_STATIC_IMPORTS_PER_MODULE
+		map[depth] = []
+
+		// reuse imports
+		for (let j = 0; j < NUM_REUSE_IMPORTS_PER_MODULE; j++) {
+			let random = Math.round(Math.random() * i);
+			if (random < i) {
+				if (!map[depth].includes(random)) {
+					map[depth].push(random)
+				}
+			}
+		}
+	}
+
+	fs.writeFile(path.join(__dirname, `./code-splitting-case-random-table.json`), JSON.stringify(map))
+}
+
+main();