web-infra-dev · SoonIter · Sep 18, 2024 · Sep 18, 2024 · Sep 18, 2024 · Sep 18, 2024
diff --git a/.github/workflows/test-ubuntu.yml b/.github/workflows/test-ubuntu.yml
@@ -111,3 +111,10 @@ jobs:
  if: steps.changes.outputs.changed == 'true'
  run: |
  pnpm run build:examples
+
+ - name: Run benchmarks
+ uses: CodSpeedHQ/action@v3
+ with:
+ run: pnpm run test:benchmark
+ # token retrieved from the CodSpeed app at the previous step
+ token: ${{ secrets.CODSPEED_TOKEN }}
diff --git a/benchmark/index.bench.ts b/benchmark/index.bench.ts
@@ -0,0 +1,13 @@
+import { bench, describe } from 'vitest';
+import { getCwdByExample, rslibBuild } from './utils';
+
+describe('express-plugin', () => {
+ bench(
+ 'rslib build',
+ async () => {
+ const cwd = getCwdByExample('express-plugin');
+ await rslibBuild(cwd);
+ },
+ { time: 10 },
+ );
+});
diff --git a/benchmark/package.json b/benchmark/package.json
@@ -0,0 +1,17 @@
+{
+ "name": "@rslib/benchmark",
+ "private": true,
+ "type": "module",
+ "scripts": {
+ "benchmark": "vitest bench"
+ },
+ "dependencies": {
+ "react": "^18.3.1"
+ },
+ "devDependencies": {
+ "@codspeed/vitest-plugin": "^3.1.1",
+ "@e2e/helper": "workspace:*",
+ "typescript": "^5.6.2",
+ "vitest": "^2.0.5"
+ }
+}
diff --git a/benchmark/rspack.bench.ts b/benchmark/rspack.bench.ts
@@ -0,0 +1,21 @@
+import { rspack } from '../examples/rspack-latest/node_modules/@rspack/core';
+
+import { bench, describe } from 'vitest';
+
+import config from '../examples/rspack-latest/rspack.config.mjs';
+
+describe('rspack', () => {
+ bench(
+ 'run rspack build',
+ async () => {
+ const compiler = rspack(config);
+ return new Promise((resolve) =>
+ compiler.run((error) => {
+ console.error(error);
+ resolve();
+ }),
+ );
+ },
+ { time: 10 },
+ );
+});
diff --git a/benchmark/utils.ts b/benchmark/utils.ts
@@ -0,0 +1,12 @@
+import path from 'node:path';
+import { fileURLToPath } from 'node:url';
+import { rslibBuild } from '@e2e/helper';
+
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = path.dirname(__filename);
+
+export function getCwdByExample(exampleName: string) {
+ return path.join(__dirname, '../examples', exampleName);
+}
+
+export { rslibBuild };
diff --git a/benchmark/vitest.config.ts b/benchmark/vitest.config.ts
@@ -0,0 +1,11 @@
+import codspeedPlugin from '@codspeed/vitest-plugin';
+import { defineConfig } from 'vitest/config';
+import { shared } from '../vitest.workspace';
+
+export default defineConfig({
+ test: {
+ ...shared,
+ name: 'bench',
+ },
+ plugins: [codspeedPlugin()],
+});
diff --git a/e2e/scripts/shared.ts b/e2e/scripts/shared.ts
@@ -136,6 +136,15 @@ export async function getResults(
  };
 }
 
+export async function rslibBuild(fixturePath: string) {
+ const rslibConfig = await loadConfig({
+ cwd: fixturePath,
+ });
+ process.chdir(fixturePath);
+ const rsbuildInstance = await build(rslibConfig);
+ return { rsbuildInstance, rslibConfig };
+}
+
 export async function buildAndGetResults(
  fixturePath: string,
  type: 'all',
@@ -152,11 +161,7 @@ export async function buildAndGetResults(
  fixturePath: string,
  type: 'js' | 'dts' | 'css' | 'all' = 'js',
 ) {
- const rslibConfig = await loadConfig({
- cwd: fixturePath,
- });
- process.chdir(fixturePath);
- const rsbuildInstance = await build(rslibConfig);
+ const { rsbuildInstance, rslibConfig } = await rslibBuild(fixturePath);
  const {
  origin: { bundlerConfigs, rsbuildConfig },
  } = await rsbuildInstance.inspectConfig({ verbose: true });

diff --git a/examples/express-plugin/rslib.config.ts b/examples/express-plugin/rslib.config.ts
@@ -1,24 +1,18 @@
 import { defineConfig } from '@rslib/core';
 
-const shared = {
- dts: {
- bundle: false,
- },
-};
-
 export default defineConfig({
  lib: [
  {
- ...shared,
  format: 'esm',
+ dts: false,
  output: {
  distPath: {
  root: './dist/esm',
  },
  },
  },
  {
- ...shared,
+ dts: false,
  format: 'cjs',
  output: {
  distPath: {

diff --git a/examples/rspack-latest/index.html b/examples/rspack-latest/index.html
@@ -0,0 +1,15 @@
+<!doctype html>
+<html>
+
+<head>
+ <meta charset="UTF-8" />
+ <link rel="icon" type="image/svg+xml" href="/react.svg" />
+ <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+ <title>Rspack + React + TS</title>
+</head>
+
+<body>
+ <div id="root"></div>
+</body>
+
+</html>
diff --git a/examples/rspack-latest/package.json b/examples/rspack-latest/package.json
@@ -0,0 +1,25 @@
+{
+ "name": "rspack-latest-react-ts-codspeed",
+ "version": "1.0.0",
+ "private": true,
+ "scripts": {
+ "build": "cross-env NODE_ENV=production rspack build",
+ "check": "biome check --write",
+ "dev": "cross-env NODE_ENV=development rspack serve"
+ },
+ "dependencies": {
+ "react": "^18.2.0",
+ "react-dom": "^18.2.0"
+ },
+ "devDependencies": {
+ "@rspack/cli": "^1.0.5",
+ "@rspack/core": "^1.0.5",
+ "@rspack/plugin-react-refresh": "1.0.0",
+ "@types/react": "^18.2.48",
+ "@types/react-dom": "^18.2.18",
+ "cross-env": "^7.0.3",
+ "react-refresh": "^0.14.0",
+ "ts-node": "^10.9.2",
+ "typescript": "5.6.2"
+ }
+}
diff --git a/examples/rspack-latest/rspack.config.mjs b/examples/rspack-latest/rspack.config.mjs
@@ -0,0 +1,78 @@
+import { defineConfig } from '@rspack/cli';
+import { rspack } from '@rspack/core';
+import RefreshPlugin from '@rspack/plugin-react-refresh';
+
+const __dirname = new URL('.', import.meta.url).pathname;
+
+const isDev = process.env.NODE_ENV === 'development';
+
+// Target browsers, see: https://github.com/browserslist/browserslist
+function getTargets() {
+ const targets = [
+ 'chrome >= 87',
+ 'edge >= 88',
+ 'firefox >= 78',
+ 'safari >= 14',
+ ];
+ return targets;
+}
+
+export default defineConfig({
+ context: __dirname,
+ entry: {
+ main: './src/main.tsx',
+ },
+ resolve: {
+ extensions: ['...', '.ts', '.tsx', '.jsx'],
+ },
+ module: {
+ rules: [
+ {
+ test: /\.svg$/,
+ type: 'asset',
+ },
+ {
+ test: /\.(jsx?|tsx?)$/,
+ use: [
+ {
+ loader: 'builtin:swc-loader',
+ options: {
+ jsc: {
+ parser: {
+ syntax: 'typescript',
+ tsx: true,
+ },
+ transform: {
+ react: {
+ runtime: 'automatic',
+ development: isDev,
+ refresh: isDev,
+ },
+ },
+ },
+ env: { targets: getTargets() },
+ },
+ },
+ ],
+ },
+ ],
+ },
+ plugins: [
+ new rspack.HtmlRspackPlugin({
+ template: './index.html',
+ }),
+ isDev ? new RefreshPlugin() : null,
+ ].filter(Boolean),
+ optimization: {
+ minimize: false,
+ minimizer: [
+ new rspack.SwcJsMinimizerRspackPlugin(),
+ new rspack.LightningCssMinimizerRspackPlugin({
+ minimizerOptions: { targets: getTargets() },
+ }),
+ ],
+ },
+ experiments: {
+ css: true,
+ },
+});
diff --git a/examples/rspack-latest/src/App.css b/examples/rspack-latest/src/App.css
@@ -0,0 +1,41 @@
+#root {
+ max-width: 1280px;
+ margin: 0 auto;
+ padding: 2rem;
+ text-align: center;
+}
+
+.logo {
+ height: 6em;
+ padding: 1.5em;
+ will-change: filter;
+}
+.logo:hover {
+ filter: drop-shadow(0 0 2em #646cffaa);
+}
+.logo.react:hover {
+ filter: drop-shadow(0 0 2em #61dafbaa);
+}
+
+@keyframes logo-spin {
+ from {
+ transform: rotate(0deg);
+ }
+ to {
+ transform: rotate(360deg);
+ }
+}
+
+@media (prefers-reduced-motion: no-preference) {
+ a > .logo {
+ animation: logo-spin infinite 20s linear;
+ }
+}
+
+.card {
+ padding: 2em;
+}
+
+.read-the-docs {
+ color: #888;
+}
diff --git a/examples/rspack-latest/src/App.tsx b/examples/rspack-latest/src/App.tsx
@@ -0,0 +1,31 @@
+import { useState } from 'react';
+import reactLogo from './assets/react.svg';
+import './App.css';
+
+function App() {
+ const [count, setCount] = useState(0);
+
+ return (
+ <div className="App">
+ <div>
+ <a href="https://reactjs.org" target="_blank" rel="noreferrer">
+ <img src={reactLogo} className="logo react" alt="React logo" />
+ </a>
+ </div>
+ <h1>Rspack + React + TypeScript</h1>
+ <div className="card">
+ <button type="button" onClick={() => setCount((count) => count + 1)}>
+ count is {count}
+ </button>
+ <p>
+ Edit <code>src/App.tsx</code> and save to test HMR
+ </p>
+ </div>
+ <p className="read-the-docs">
+ Click on the Rspack and React logos to learn more
+ </p>
+ </div>
+ );
+}
+
+export default App;
diff --git a/examples/rspack-latest/src/assets/react.svg b/examples/rspack-latest/src/assets/react.svg