From 61dcc7b34fc114f6059e0e3b6bda3be5666e4ec5 Mon Sep 17 00:00:00 2001 From: Cong-Cong Date: Wed, 18 Dec 2024 18:53:42 +0800 Subject: [PATCH] u --- .github/workflows/ci.yml | 1 - packages/bench/fixtures/single/index.js | 1 - packages/bench/fixtures/ts-react/index.html | 12 + .../bench/fixtures/ts-react/rspack.config.ts | 67 ++++++ packages/bench/fixtures/ts-react/src/App.css | 41 ++++ packages/bench/fixtures/ts-react/src/App.tsx | 31 +++ .../fixtures/ts-react/src/assets/react.svg | 1 + .../bench/fixtures/ts-react/src/index.css | 70 ++++++ .../bench/fixtures/ts-react/src/index.tsx | 10 + .../fixtures/ts-react/src/react-env.d.ts | 213 ++++++++++++++++++ .../bench/fixtures/ts-react/tsconfig.json | 27 +++ packages/bench/package.json | 8 + packages/bench/rspack-ecosystem-benchmark | 1 - packages/bench/single.bench.ts | 28 --- packages/bench/ts-react.bench.ts | 21 ++ pnpm-lock.yaml | 16 ++ 16 files changed, 517 insertions(+), 31 deletions(-) delete mode 100644 packages/bench/fixtures/single/index.js create mode 100644 packages/bench/fixtures/ts-react/index.html create mode 100644 packages/bench/fixtures/ts-react/rspack.config.ts create mode 100644 packages/bench/fixtures/ts-react/src/App.css create mode 100644 packages/bench/fixtures/ts-react/src/App.tsx create mode 100644 packages/bench/fixtures/ts-react/src/assets/react.svg create mode 100644 packages/bench/fixtures/ts-react/src/index.css create mode 100644 packages/bench/fixtures/ts-react/src/index.tsx create mode 100644 packages/bench/fixtures/ts-react/src/react-env.d.ts create mode 100644 packages/bench/fixtures/ts-react/tsconfig.json delete mode 160000 packages/bench/rspack-ecosystem-benchmark delete mode 100644 packages/bench/single.bench.ts create mode 100644 packages/bench/ts-react.bench.ts diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml index 17480a9baa7..642c2bc6931 100644 --- a/.github/workflows/ci.yml +++ b/.github/workflows/ci.yml @@ -61,7 +61,6 @@ jobs: uses: ./.github/workflows/reusable-build.yml with: target: x86_64-unknown-linux-gnu - profile: "debug" native: ${{ needs.get-runner-labels.outputs.LINUX_RUNNER_LABELS == '"ubuntu-latest"' }} runner: ${{ needs.get-runner-labels.outputs.LINUX_RUNNER_LABELS }} skipable: ${{ needs.check-changed.outputs.changed != 'true' }} diff --git a/packages/bench/fixtures/single/index.js b/packages/bench/fixtures/single/index.js deleted file mode 100644 index 7a661c2d7f2..00000000000 --- a/packages/bench/fixtures/single/index.js +++ /dev/null @@ -1 +0,0 @@ -console.log("hello, world!"); diff --git a/packages/bench/fixtures/ts-react/index.html b/packages/bench/fixtures/ts-react/index.html new file mode 100644 index 00000000000..dee28f5be88 --- /dev/null +++ b/packages/bench/fixtures/ts-react/index.html @@ -0,0 +1,12 @@ + + + + + + + Rspack + React + TS + + +
+ + diff --git a/packages/bench/fixtures/ts-react/rspack.config.ts b/packages/bench/fixtures/ts-react/rspack.config.ts new file mode 100644 index 00000000000..c420bf754e2 --- /dev/null +++ b/packages/bench/fixtures/ts-react/rspack.config.ts @@ -0,0 +1,67 @@ +import { defineConfig } from "@rspack/cli"; +import { rspack } from "@rspack/core"; +import * as RefreshPlugin from "@rspack/plugin-react-refresh"; + +const isDev = process.env.NODE_ENV === "development"; + +// Target browsers, see: https://github.com/browserslist/browserslist +const targets = ["chrome >= 87", "edge >= 88", "firefox >= 78", "safari >= 14"]; + +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 } + } + } + ] + } + ] + }, + plugins: [ + new rspack.HtmlRspackPlugin({ + template: "./index.html" + }), + isDev ? new RefreshPlugin() : null + ].filter(Boolean), + optimization: { + minimizer: [ + new rspack.SwcJsMinimizerRspackPlugin(), + new rspack.LightningCssMinimizerRspackPlugin({ + minimizerOptions: { targets } + }) + ] + }, + experiments: { + css: true + } +}); diff --git a/packages/bench/fixtures/ts-react/src/App.css b/packages/bench/fixtures/ts-react/src/App.css new file mode 100644 index 00000000000..ac0e6c9c957 --- /dev/null +++ b/packages/bench/fixtures/ts-react/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/packages/bench/fixtures/ts-react/src/App.tsx b/packages/bench/fixtures/ts-react/src/App.tsx new file mode 100644 index 00000000000..b1967dd353f --- /dev/null +++ b/packages/bench/fixtures/ts-react/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 ( +
+
+ + React logo + +
+

Rspack + React + TypeScript

+
+ +

+ Edit src/App.tsx and save to test HMR +

+
+

+ Click on the Rspack and React logos to learn more +

+
+ ); +} + +export default App; diff --git a/packages/bench/fixtures/ts-react/src/assets/react.svg b/packages/bench/fixtures/ts-react/src/assets/react.svg new file mode 100644 index 00000000000..8e0e0f15c01 --- /dev/null +++ b/packages/bench/fixtures/ts-react/src/assets/react.svg @@ -0,0 +1 @@ + diff --git a/packages/bench/fixtures/ts-react/src/index.css b/packages/bench/fixtures/ts-react/src/index.css new file mode 100644 index 00000000000..fbc96a7ac49 --- /dev/null +++ b/packages/bench/fixtures/ts-react/src/index.css @@ -0,0 +1,70 @@ +:root { + font-family: Inter, Avenir, Helvetica, Arial, sans-serif; + font-size: 16px; + line-height: 24px; + font-weight: 400; + + color-scheme: light dark; + color: rgba(255, 255, 255, 0.87); + background-color: #242424; + + font-synthesis: none; + text-rendering: optimizeLegibility; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; + -webkit-text-size-adjust: 100%; +} + +a { + font-weight: 500; + color: #646cff; + text-decoration: inherit; +} +a:hover { + color: #535bf2; +} + +body { + margin: 0; + display: flex; + place-items: center; + min-width: 320px; + min-height: 100vh; +} + +h1 { + font-size: 3.2em; + line-height: 1.1; +} + +button { + border-radius: 8px; + border: 1px solid transparent; + padding: 0.6em 1.2em; + font-size: 1em; + font-weight: 500; + font-family: inherit; + background-color: #1a1a1a; + cursor: pointer; + transition: border-color 0.25s; +} +button:hover { + border-color: #646cff; +} +button:focus, +button:focus-visible { + outline: 4px auto -webkit-focus-ring-color; +} + +@media (prefers-color-scheme: light) { + :root { + color: #213547; + background-color: #ffffff; + } + a:hover { + color: #747bff; + } + button { + background-color: #f9f9f9; + } +} diff --git a/packages/bench/fixtures/ts-react/src/index.tsx b/packages/bench/fixtures/ts-react/src/index.tsx new file mode 100644 index 00000000000..29baf78c550 --- /dev/null +++ b/packages/bench/fixtures/ts-react/src/index.tsx @@ -0,0 +1,10 @@ +import React from "react"; +import ReactDOM from "react-dom/client"; +import App from "./App.tsx"; +import "./index.css"; + +ReactDOM.createRoot(document.getElementById("root") as HTMLElement).render( + + + +); diff --git a/packages/bench/fixtures/ts-react/src/react-env.d.ts b/packages/bench/fixtures/ts-react/src/react-env.d.ts new file mode 100644 index 00000000000..49c347bae23 --- /dev/null +++ b/packages/bench/fixtures/ts-react/src/react-env.d.ts @@ -0,0 +1,213 @@ +// CSS modules +type CSSModuleClasses = { readonly [key: string]: string }; + +declare module "*.module.css" { + const classes: CSSModuleClasses; + export default classes; +} +declare module "*.module.scss" { + const classes: CSSModuleClasses; + export default classes; +} +declare module "*.module.sass" { + const classes: CSSModuleClasses; + export default classes; +} +declare module "*.module.less" { + const classes: CSSModuleClasses; + export default classes; +} +declare module "*.module.styl" { + const classes: CSSModuleClasses; + export default classes; +} +declare module "*.module.stylus" { + const classes: CSSModuleClasses; + export default classes; +} +declare module "*.module.pcss" { + const classes: CSSModuleClasses; + export default classes; +} +declare module "*.module.sss" { + const classes: CSSModuleClasses; + export default classes; +} + +// CSS +declare module "*.css" { + /** + * @deprecated Use `import style from './style.css?inline'` instead. + */ + const css: string; + export default css; +} +declare module "*.scss" { + /** + * @deprecated Use `import style from './style.scss?inline'` instead. + */ + const css: string; + export default css; +} +declare module "*.sass" { + /** + * @deprecated Use `import style from './style.sass?inline'` instead. + */ + const css: string; + export default css; +} +declare module "*.less" { + /** + * @deprecated Use `import style from './style.less?inline'` instead. + */ + const css: string; + export default css; +} +declare module "*.styl" { + /** + * @deprecated Use `import style from './style.styl?inline'` instead. + */ + const css: string; + export default css; +} +declare module "*.stylus" { + /** + * @deprecated Use `import style from './style.stylus?inline'` instead. + */ + const css: string; + export default css; +} +declare module "*.pcss" { + /** + * @deprecated Use `import style from './style.pcss?inline'` instead. + */ + const css: string; + export default css; +} +declare module "*.sss" { + /** + * @deprecated Use `import style from './style.sss?inline'` instead. + */ + const css: string; + export default css; +} + +// images +declare module "*.png" { + const src: string; + export default src; +} +declare module "*.jpg" { + const src: string; + export default src; +} +declare module "*.jpeg" { + const src: string; + export default src; +} +declare module "*.jfif" { + const src: string; + export default src; +} +declare module "*.pjpeg" { + const src: string; + export default src; +} +declare module "*.pjp" { + const src: string; + export default src; +} +declare module "*.gif" { + const src: string; + export default src; +} +declare module "*.svg" { + const ReactComponent: React.FC>; + const content: string; + + export { ReactComponent }; + export default content; +} +declare module "*.ico" { + const src: string; + export default src; +} +declare module "*.webp" { + const src: string; + export default src; +} +declare module "*.avif" { + const src: string; + export default src; +} + +// media +declare module "*.mp4" { + const src: string; + export default src; +} +declare module "*.webm" { + const src: string; + export default src; +} +declare module "*.ogg" { + const src: string; + export default src; +} +declare module "*.mp3" { + const src: string; + export default src; +} +declare module "*.wav" { + const src: string; + export default src; +} +declare module "*.flac" { + const src: string; + export default src; +} +declare module "*.aac" { + const src: string; + export default src; +} + +declare module "*.opus" { + const src: string; + export default src; +} + +// fonts +declare module "*.woff" { + const src: string; + export default src; +} +declare module "*.woff2" { + const src: string; + export default src; +} +declare module "*.eot" { + const src: string; + export default src; +} +declare module "*.ttf" { + const src: string; + export default src; +} +declare module "*.otf" { + const src: string; + export default src; +} + +// other +declare module "*.webmanifest" { + const src: string; + export default src; +} +declare module "*.pdf" { + const src: string; + export default src; +} +declare module "*.txt" { + const src: string; + export default src; +} diff --git a/packages/bench/fixtures/ts-react/tsconfig.json b/packages/bench/fixtures/ts-react/tsconfig.json new file mode 100644 index 00000000000..aa9a37d8bac --- /dev/null +++ b/packages/bench/fixtures/ts-react/tsconfig.json @@ -0,0 +1,27 @@ +{ + "compilerOptions": { + "target": "ES2020", + "lib": [ + "DOM", + "ES2020" + ], + "module": "ESNext", + "jsx": "react-jsx", + "strict": true, + "noEmit": true, + "skipLibCheck": true, + "isolatedModules": true, + "resolveJsonModule": true, + "moduleResolution": "bundler", + "useDefineForClassFields": true, + "allowImportingTsExtensions": true + }, + "include": [ + "src" + ], + "ts-node": { + "compilerOptions": { + "module": "CommonJS" + } + } +} \ No newline at end of file diff --git a/packages/bench/package.json b/packages/bench/package.json index 604d377aa6f..eafd63de577 100644 --- a/packages/bench/package.json +++ b/packages/bench/package.json @@ -8,8 +8,16 @@ }, "devDependencies": { "@codspeed/vitest-plugin": "^4.0.0", + "@rspack/cli": "workspace:*", "@rspack/core": "workspace:*", + "@rspack/plugin-react-refresh": "1.0.0", + "@types/react": "^18.2.48", + "@types/react-dom": "^18.2.18", "vitest": "^2.1.8", "zx": "7.2.3" + }, + "dependencies": { + "react": "^18.2.0", + "react-dom": "^18.2.0" } } \ No newline at end of file diff --git a/packages/bench/rspack-ecosystem-benchmark b/packages/bench/rspack-ecosystem-benchmark deleted file mode 160000 index ffd5191b3b9..00000000000 --- a/packages/bench/rspack-ecosystem-benchmark +++ /dev/null @@ -1 +0,0 @@ -Subproject commit ffd5191b3b9e9693c16b58458d3fb8a768d868fa diff --git a/packages/bench/single.bench.ts b/packages/bench/single.bench.ts deleted file mode 100644 index 5e1eb626610..00000000000 --- a/packages/bench/single.bench.ts +++ /dev/null @@ -1,28 +0,0 @@ -import { join } from "node:path"; -import { bench, describe } from "vitest"; -import { rspack } from "@rspack/core"; - -describe("single module project", () => { - bench( - "build in production mode", - () => - new Promise((resolve, reject) => { - rspack( - { - context: join(__dirname, "fixtures/single"), - entry: "index.js", - mode: "production" - }, - (err, stats) => { - if (err) { - reject(err); - } - if (stats?.hasErrors()) { - reject(new Error(stats.toString({}))); - } - resolve(); - } - ); - }) - ); -}); diff --git a/packages/bench/ts-react.bench.ts b/packages/bench/ts-react.bench.ts new file mode 100644 index 00000000000..c9e2dc2fb30 --- /dev/null +++ b/packages/bench/ts-react.bench.ts @@ -0,0 +1,21 @@ +import { bench, describe } from "vitest"; +import { rspack } from "@rspack/core"; +import rspackConfig from "./fixtures/ts-react/rspack.config"; + +describe("TypeScript React project", () => { + bench( + "build single module project in production mode", + () => + new Promise((resolve, reject) => { + rspack(rspackConfig, (err, stats) => { + if (err) { + reject(err); + } + if (stats?.hasErrors()) { + reject(new Error(stats.toString({}))); + } + resolve(); + }); + }) + ); +}); diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index a93b0edab2e..c344d4ccfaf 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -135,6 +135,13 @@ importers: npm/win32-x64-msvc: {} packages/bench: + dependencies: + react: + specifier: ^18.2.0 + version: 18.3.1 + react-dom: + specifier: ^18.2.0 + version: 18.3.1(react@18.3.1) devDependencies: '@codspeed/vitest-plugin': specifier: ^4.0.0 @@ -145,6 +152,15 @@ importers: '@rspack/core': specifier: workspace:* version: link:../rspack + '@rspack/plugin-react-refresh': + specifier: 1.0.0 + version: 1.0.0(react-refresh@0.16.0) + '@types/react': + specifier: ^18.2.48 + version: 18.2.75 + '@types/react-dom': + specifier: ^18.2.18 + version: 18.2.24 vitest: specifier: ^2.1.8 version: 2.1.8(@types/node@20.12.7)(jsdom@25.0.1)(less@4.2.0)(sass-embedded@1.83.0)(sass@1.56.2)(terser@5.36.0)