Switch from vite to rolldown-vite for improved build performance (#9523)

* Switch from vite to rolldown-vite for improved build performance

- Add vite resolution to npm:rolldown-vite@latest in package.json
- rolldown-vite is a drop-in replacement that uses Rust-based Rolldown bundler
- Expected benefits: 3x-16x faster builds, up to 100x less memory usage
- No configuration changes needed - rolldown-vite maintains full compatibility

* Switch minifier from terser to oxc

- Change minify option from 'terser' to 'oxc' in vite.config.ts
- Remove terserOptions since they're not needed with oxc minifier
- Fix ESLint error by prefixing unused catch variable with underscore
- Oxc is the high-performance Rust-based minifier used by rolldown-vite
- Expected benefits: faster minification with better performance

* Fix TypeScript compatibility issues with rolldown-vite

- Add type assertion for minify: 'oxc' option which is supported by rolldown-vite but not in standard Vite types
- Update comment for webpackStats plugin to reflect rolldown-vite compatibility
- Resolves TypeScript compilation errors in CI

* fix

* pin

* node-20

* Node 22 support

* Use oxc variant of react plugin

* tsc

* fix: Remove node 21 from engines

It has problematic CJS behavior that was fixed in 22

---------

Co-authored-by: codegen-sh[bot] <131295404+codegen-sh[bot]@users.noreply.github.com>
Co-authored-by: Tom Moor <tom@getoutline.com>

.github/workflows/ci.yml

@@ -25,15 +25,15 @@ jobs:
         node-version: [20.x, 22.x]
 
     steps:
-      - uses: actions/checkout@v4
-      - name: Use Node.js ${{ matrix.node-version }}
-        uses: actions/setup-node@v4
-        with:
-          node-version: ${{ matrix.node-version }}
-          cache: "yarn"
+    - uses: actions/checkout@v4
+    - name: Use Node.js ${{ matrix.node-version }}
+      uses: actions/setup-node@v4
+      with:
+        node-version: ${{ matrix.node-version }}
+        cache: 'yarn'
 
-      - name: Install dependencies
-        run: yarn install --frozen-lockfile
+    - name: Install dependencies
+      run: yarn install --frozen-lockfile
 
   lint:
     needs: build

app/editor/index.tsx

@@ -195,7 +195,7 @@ export class Editor extends React.PureComponent<
   };
 
   widgets: { [name: string]: (props: WidgetProps) => React.ReactElement };
-  renderers: Set<NodeViewRenderer<ComponentProps>> = observable.set();
+  renderers = observable.set<NodeViewRenderer<ComponentProps>>();
   nodes: { [name: string]: NodeSpec };
   marks: { [name: string]: MarkSpec };
   commands: Record<string, CommandFactory>;

package.json

@@ -41,7 +41,7 @@
     "url": "https://github.com/sponsors/outline"
   },
   "engines": {
-    "node": ">= 20 <=22"
+    "node": "20 || 22"
   },
   "repository": {
     "type": "git",
@@ -104,7 +104,7 @@
     "@types/form-data": "^2.5.2",
     "@types/mailparser": "^3.4.6",
     "@types/sanitize-filename": "^1.6.3",
-    "@vitejs/plugin-react": "^3.1.0",
+    "@vitejs/plugin-react-oxc": "^0.2.3",
     "addressparser": "^1.0.1",
     "async-sema": "^3.1.1",
     "autotrack": "^2.4.1",
@@ -259,7 +259,7 @@
     "uuid": "^8.3.2",
     "validator": "13.15.0",
     "vaul": "^1.1.2",
-    "vite": "^6.3.4",
+    "vite": "npm:rolldown-vite@latest",
     "vite-plugin-pwa": "^0.21.2",
     "winston": "^3.17.0",
     "ws": "^7.5.10",
@@ -370,7 +370,7 @@
     "prettier": "^3.6.2",
     "react-refresh": "^0.17.0",
     "rimraf": "^2.5.4",
-    "rollup-plugin-webpack-stats": "^2.0.5",
+    "rollup-plugin-webpack-stats": "^2.1.0",
     "terser": "^5.43.1",
     "typescript": "^5.8.3",
     "vite-plugin-static-copy": "^0.17.0",

vite.config.ts

@@ -1,6 +1,6 @@
 import fs from "fs";
 import path from "path";
-import react from "@vitejs/plugin-react";
+import react from "@vitejs/plugin-react-oxc";
 import browserslistToEsbuild from "browserslist-to-esbuild";
 import webpackStats from "rollup-plugin-webpack-stats";
 import { ServerOptions, defineConfig } from "vite";
@@ -19,7 +19,7 @@ if (environment.NODE_ENV === "development") {
       key: fs.readFileSync("./server/config/certs/private.key"),
       cert: fs.readFileSync("./server/config/certs/public.cert"),
     };
-  } catch (err) {
+  } catch (_err) {
     // eslint-disable-next-line no-console
     console.warn("No local SSL certs found, HTTPS will not be available");
   }
@@ -45,35 +45,7 @@ export default () =>
           : { strict: true },
     },
     plugins: [
-      // https://github.com/vitejs/vite-plugin-react/tree/main/packages/plugin-react#readme
-      react({
-        babel: {
-          env: {
-            production: {
-              plugins: [
-                [
-                  "babel-plugin-styled-components",
-                  {
-                    displayName: false,
-                  },
-                ],
-              ],
-            },
-          },
-          plugins: [
-            [
-              "babel-plugin-styled-components",
-              {
-                displayName: true,
-                fileName: false,
-              },
-            ],
-          ],
-          parserOpts: {
-            plugins: ["decorators-legacy", "classProperties"],
-          },
-        },
-      }),
+      react(),
       // https://github.com/sapphi-red/vite-plugin-static-copy#readme
       viteStaticCopy({
         targets: [
@@ -176,17 +148,8 @@ export default () =>
         },
       }),
       // Generate a stats.json file for webpack that will be consumed by RelativeCI
-      // @ts-expect-error Type mismatch with latest versions but Plugin runs without issue
       webpackStats(),
     ],
-    optimizeDeps: {
-      esbuildOptions: {
-        keepNames: true,
-        define: {
-          global: "globalThis",
-        },
-      },
-    },
     resolve: {
       alias: {
         "~": path.resolve(__dirname, "./app"),
@@ -197,15 +160,11 @@ export default () =>
       outDir: "./build/app",
       manifest: true,
       sourcemap: process.env.CI ? false : "hidden",
-      minify: "terser",
-      // Prevent asset inling as it does not conform to CSP rules
+      minify: "oxc",
+      // Prevent asset inlining as it does not conform to CSP rules
       assetsInlineLimit: 0,
       target: browserslistToEsbuild(),
       reportCompressedSize: false,
-      terserOptions: {
-        keep_classnames: true,
-        keep_fnames: true,
-      },
       rollupOptions: {
         onwarn(warning, warn) {
           // Suppress noisy warnings about module-level directives, e.g. "use client"