Replace webpack with rspack (#35460)

Given that this bundler is almost a drop-in replacement to webpack, it might be worth switching. So far it seems everything is working, but more testing is needed, so I'm setting draft. - Dev build time is reduced from 10s to 5s - Prod build time is reduced from 16s to 10s - JS output size is reduced from 21.3MB to 19.8MB - CSS output size is increased from 778kB to 818kB
2025-09-13 04:08:14 +00:00 · 2025-09-12 21:25:59 +02:00
parent 7a474d1c95
commit 866c636f52
5 changed files with 1746 additions and 281 deletions
--- a/30
+++ b/30
@@ -135,10 +135,10 @@ LINUX_ARCHS ?= linux/amd64,linux/386,linux/arm-5,linux/arm-6,linux/arm64,linux/r
 GO_TEST_PACKAGES ?= $(filter-out $(shell $(GO) list code.gitea.io/gitea/models/migrations/...) code.gitea.io/gitea/tests/integration/migration-test code.gitea.io/gitea/tests code.gitea.io/gitea/tests/integration code.gitea.io/gitea/tests/e2e,$(shell $(GO) list ./... | grep -v /vendor/))
 MIGRATE_TEST_PACKAGES ?= $(shell $(GO) list code.gitea.io/gitea/models/migrations/...)

-WEBPACK_SOURCES := $(shell find web_src/js web_src/css -type f)
-WEBPACK_CONFIGS := webpack.config.ts tailwind.config.ts
-WEBPACK_DEST := public/assets/js/index.js public/assets/css/index.css
-WEBPACK_DEST_ENTRIES := public/assets/js public/assets/css public/assets/fonts
+RSPACK_SOURCES := $(shell find web_src/js web_src/css -type f)
+RSPACK_CONFIGS := rspack.config.ts tailwind.config.ts
+RSPACK_DEST := public/assets/js/index.js public/assets/css/index.css
+RSPACK_DEST_ENTRIES := public/assets/js public/assets/css public/assets/fonts

 BINDATA_DEST_WILDCARD := modules/migration/bindata.* modules/public/bindata.* modules/options/bindata.* modules/templates/bindata.*

@@ -238,7 +238,7 @@ node-check:

 .PHONY: clean-all
 clean-all: clean ## delete backend, frontend and integration files
-	rm -rf $(WEBPACK_DEST_ENTRIES) node_modules
+	rm -rf $(RSPACK_DEST_ENTRIES) node_modules

 .PHONY: clean
 clean: ## delete backend and integration files
@@ -428,8 +428,8 @@ watch: ## watch everything and continuously rebuild

 .PHONY: watch-frontend
 watch-frontend: node-check node_modules ## watch frontend files and continuously rebuild
-	@rm -rf $(WEBPACK_DEST_ENTRIES)
-	NODE_ENV=development $(NODE_VARS) pnpm exec webpack --watch --progress --disable-interpret
+	@rm -rf $(RSPACK_DEST_ENTRIES)
+	NODE_ENV=development $(NODE_VARS) pnpm exec rspack --watch

 .PHONY: watch-backend
 watch-backend: go-check ## watch backend files and continuously rebuild
@@ -747,7 +747,7 @@ install: $(wildcard *.go)
 build: frontend backend ## build everything

 .PHONY: frontend
-frontend: $(WEBPACK_DEST) ## build frontend files
+frontend: $(RSPACK_DEST) ## build frontend files

 .PHONY: backend
 backend: go-check generate-backend $(EXECUTABLE) ## build backend files
@@ -878,15 +878,15 @@ update-py: node-check | node_modules ## update py dependencies
 	uv sync
 	@touch .venv

-.PHONY: webpack
-webpack: $(WEBPACK_DEST) ## build webpack files
+.PHONY: rspack
+rspack: $(RSPACK_DEST) ## build rspack files

-$(WEBPACK_DEST): $(WEBPACK_SOURCES) $(WEBPACK_CONFIGS) pnpm-lock.yaml
+$(RSPACK_DEST): $(RSPACK_SOURCES) $(RSPACK_CONFIGS) pnpm-lock.yaml
 	@$(MAKE) -s node-check node_modules
-	@rm -rf $(WEBPACK_DEST_ENTRIES)
-	@echo "Running webpack..."
-	@BROWSERSLIST_IGNORE_OLD_DATA=true $(NODE_VARS) pnpm exec webpack --disable-interpret
-	@touch $(WEBPACK_DEST)
+	@rm -rf $(RSPACK_DEST_ENTRIES)
+	@echo "Running rspack..."
+	@$(NODE_VARS) pnpm exec rspack
+	@touch $(RSPACK_DEST)

 .PHONY: svg
 svg: node-check | node_modules ## build svg files
--- a/package.json
+++ b/package.json
@@ -16,9 +16,11 @@
    "@mcaptcha/vanilla-glue": "0.1.0-alpha-3",
    "@primer/octicons": "19.18.0",
    "@resvg/resvg-wasm": "2.6.2",
+    "@rspack/cli": "1.5.3",
+    "@rspack/core": "1.5.3",
    "@silverwind/vue3-calendar-heatmap": "2.0.6",
    "@techknowlogick/license-checker-webpack-plugin": "0.3.0",
-    "add-asset-webpack-plugin": "3.0.0",
+    "add-asset-webpack-plugin": "3.1.0",
    "ansi_up": "6.0.6",
    "asciinema-player": "3.10.0",
    "chart.js": "4.5.0",
@@ -30,13 +32,11 @@
    "dayjs": "1.11.18",
    "dropzone": "6.0.0-beta.2",
    "easymde": "2.20.0",
-    "esbuild-loader": "4.3.0",
    "htmx.org": "2.0.7",
    "idiomorph": "0.7.3",
    "jquery": "3.7.1",
    "katex": "0.16.22",
    "mermaid": "11.11.0",
-    "mini-css-extract-plugin": "2.9.4",
    "minimatch": "10.0.3",
    "monaco-editor": "0.53.0",
    "monaco-editor-webpack-plugin": "7.1.0",
@@ -61,8 +61,6 @@
    "vue-bar-graph": "2.2.0",
    "vue-chartjs": "5.3.2",
    "vue-loader": "17.4.2",
-    "webpack": "5.101.3",
-    "webpack-cli": "6.0.1",
    "wrap-ansi": "9.0.2"
  },
  "devDependencies": {
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
--- a/webpack.config.ts
+++ b/webpack.config.ts
@@ -1,12 +1,17 @@
 import wrapAnsi from 'wrap-ansi';
 import AddAssetPlugin from 'add-asset-webpack-plugin';
 import LicenseCheckerWebpackPlugin from '@techknowlogick/license-checker-webpack-plugin';
-import MiniCssExtractPlugin from 'mini-css-extract-plugin';
 import MonacoWebpackPlugin from 'monaco-editor-webpack-plugin';
 import {VueLoaderPlugin} from 'vue-loader';
-import EsBuildLoader from 'esbuild-loader';
 import {parse} from 'node:path';
-import webpack, {type Configuration, type EntryObject} from 'webpack';
+import {
+  SourceMapDevToolPlugin,
+  DefinePlugin,
+  EnvironmentPlugin,
+  CssExtractRspackPlugin,
+  type Configuration,
+  type EntryObject,
+} from '@rspack/core';
 import {fileURLToPath} from 'node:url';
 import {readFileSync, globSync} from 'node:fs';
 import {env} from 'node:process';
@@ -15,8 +20,6 @@ import tailwindConfig from './tailwind.config.ts';
 import tailwindcssNesting from 'tailwindcss/nesting/index.js';
 import postcssNesting from 'postcss-nesting';

-const {EsbuildPlugin} = EsBuildLoader;
-const {SourceMapDevToolPlugin, DefinePlugin, EnvironmentPlugin} = webpack;
 const formatLicenseText = (licenseText: string) => wrapAnsi(licenseText || '', 80).trim();

 const themes: EntryObject = {};
@@ -30,7 +33,7 @@ const isProduction = env.NODE_ENV !== 'development';
 // true - all enabled, the default in development
 // reduced - minimal sourcemaps, the default in production
 // false - all disabled
-let sourceMaps;
+let sourceMaps: string;
 if ('ENABLE_SOURCEMAP' in env) {
  sourceMaps = ['true', 'false'].includes(env.ENABLE_SOURCEMAP) ? env.ENABLE_SOURCEMAP : 'reduced';
 } else {
@@ -93,20 +96,12 @@ export default {
    path: fileURLToPath(new URL('public/assets', import.meta.url)),
    filename: () => 'js/[name].js',
    chunkFilename: ({chunk}) => {
-      const language = (/monaco.*languages?_.+?_(.+?)_/.exec(String(chunk.id)) || [])[1];
+      const language = (/monaco.*languages?_.+?_(.+?)_/.exec(chunk.id) || [])[1];
      return `js/${language ? `monaco-language-${language.toLowerCase()}` : `[name]`}.[contenthash:8].js`;
    },
  },
  optimization: {
    minimize: isProduction,
-    minimizer: [
-      new EsbuildPlugin({
-        target: 'es2020',
-        minify: true,
-        css: true,
-        legalComments: 'none',
-      }),
-    ],
    splitChunks: {
      chunks: 'async',
      name: (_, chunks) => chunks.map((item) => item.name).join('-'),
@@ -118,45 +113,34 @@ export default {
    rules: [
      {
        test: /\.vue$/i,
-        exclude: /node_modules/,
+        exclude: /[\\/]node_modules[\\/]/,
        loader: 'vue-loader',
        options: {
          compilerOptions: {
            isCustomElement: (tag: string) => webComponents.has(tag),
          },
+          experimentalInlineMatchResource: true,
        },
      },
      {
-        test: /\.js$/i,
-        exclude: /node_modules/,
-        use: [
-          {
-            loader: 'esbuild-loader',
-            options: {
-              loader: 'js',
-              target: 'es2020',
+        test: /\.(j|t)s$/i,
+        exclude: /[\\/]node_modules[\\/]/,
+        loader: 'builtin:swc-loader',
+        options: {
+          jsc: {
+            parser: {
+              syntax: 'typescript',
            },
+            externalHelpers: false,
+            target: 'es2020',
          },
-        ],
-      },
-      {
-        test: /\.ts$/i,
-        exclude: /node_modules/,
-        use: [
-          {
-            loader: 'esbuild-loader',
-            options: {
-              loader: 'ts',
-              target: 'es2020',
-            },
-          },
-        ],
+        },
      },
      {
        test: /\.css$/i,
        use: [
          {
-            loader: MiniCssExtractPlugin.loader,
+            loader: CssExtractRspackPlugin.loader,
          },
          {
            loader: 'css-loader',
@@ -205,7 +189,7 @@ export default {
      TEST: 'false',
    }),
    new VueLoaderPlugin(),
-    new MiniCssExtractPlugin({
+    new CssExtractRspackPlugin({
      filename: 'css/[name].css',
      chunkFilename: 'css/[name].[contenthash:8].css',
    }),
@@ -257,7 +241,7 @@ export default {
  },
  stats: {
    assetsSort: 'name',
-    assetsSpace: Infinity,
+    assetsSpace: Number.MAX_SAFE_INTEGER,
    cached: false,
    cachedModules: false,
    children: false,
--- a/types.d.ts
+++ b/types.d.ts
@@ -1,8 +1,3 @@
-declare module 'add-asset-webpack-plugin' {
-  const plugin: any;
-  export = plugin
-}
-
 declare module '@techknowlogick/license-checker-webpack-plugin' {
  const plugin: any;
  export = plugin