Migrate from webpack to Vite 8

[silverwind]

Replace webpack with Vite 8 as the frontend bundler. Frontend build is around 3-4 times faster than before. Will work on all platforms including riscv64 (via wasm).

JS loading order is exactly like before, index.js remains a classic script that is render-blocking. All other JS chunks are now module scripts (supported in all browsers since 2018).

Entry filenames are content-hashed (e.g. index.C6Z2MRVQ.js) and resolved at runtime via the Vite manifest, eliminating the ?v= cache busting (which was unreliable in some scenarios like vscode dev build).

Fixes: #17793
Docs: https://gitea.com/gitea/docs/pulls/364

[lafriks]

But this will break Firefox support?

[silverwind]

But this will break Firefox support?

Why should it? I've already tested everything in Firefox.

The only new browser requirement is module scripts which are supported in Firefox since 2018.

[Copilot]

Pull request overview

This PR migrates Gitea’s frontend build pipeline from Webpack to Vite 8, switching to content-hashed asset filenames resolved at runtime via a manifest to improve build performance and cache correctness.

Changes:

• Replace Webpack configuration/build flow with a new Vite 8 build (including manifest generation and hashed outputs).
• Update backend + templates to resolve asset filenames via public.GetAssetPath / GetAssetPath instead of ?v={{AssetVersion}}.
• Adjust frontend entrypoints and dynamic imports for Vite, including a dedicated blocking webcomponents bundle and updated Monaco worker wiring.

Reviewed changes

Copilot reviewed 54 out of 60 changed files in this pull request and generated 2 comments.

Show a summary per file

File	Description
webpack.config.ts	Removed legacy Webpack build configuration.
vite.config.ts	Added Vite 8 build config, manifest output, webcomponents IIFE build, and license generation.
package.json	Replaced Webpack deps with Vite/Vite Vue plugin and related tooling.
pnpm-lock.yaml	Lockfile updates reflecting bundler/tooling migration.
types.d.ts	Removed webpack-specific module typing.
tsconfig.json	Switched TS global types from webpack/module to vite/client.
eslint.config.ts	Dropped globals.webpack for web sources.
Makefile	Replaced webpack build/watch targets with Vite equivalents and new outputs.
.gitignore	Ignored Vite manifest output directory under public/assets/.vite.
web_src/js/webcomponents/webcomponents-blocking.ts	New blocking webcomponents entry used for FOUC avoidance.
web_src/js/vitest.setup.ts	Updated unit test window config to remove webpack globals and add shared worker path field.
web_src/js/utils/testhelper.ts	Updated “unit test mode” detection for Vite/Vitest.
web_src/js/utils/dom.test.ts	Adjusted Vitest expectation API usage.
web_src/js/utils.test.ts	Adjusted Vitest expectation API usage.
web_src/js/standalone/swagger.ts	Ensured standalone CSS is imported from the entrypoint for Vite bundling.
web_src/js/standalone/external-render-iframe.ts	Ensured standalone CSS is imported from the entrypoint for Vite bundling.
web_src/js/standalone/devtest.ts	Ensured standalone CSS is imported from the entrypoint for Vite bundling.
web_src/js/render/plugins/pdf-viewer.ts	Removed webpack chunk annotations; rely on Vite dynamic import.
web_src/js/render/plugins/3d-viewer.ts	Removed webpack chunk annotations; rely on Vite dynamic import.
web_src/js/modules/sortable.ts	Removed webpack chunk annotation; keep dynamic import for code-splitting.
web_src/js/modules/monaco.ts	New Monaco module that wires Vite ?worker imports and exports Monaco API.
web_src/js/markup/refissue.ts	Removed webpack chunk annotation; use Vite dynamic import for Vue component.
web_src/js/markup/mermaid.ts	Removed webpack chunk annotations; use Vite dynamic import.
web_src/js/markup/math.ts	Switched KaTeX + CSS loading to plain dynamic imports for Vite.
web_src/js/markup/asciicast.ts	Switched asciinema player + CSS loading to plain dynamic imports for Vite.
web_src/js/index.ts	Moved CSS imports into the JS entry; updated dynamic import error handling.
web_src/js/globals.d.ts	Updated window.config shape; added MonacoEnvironment typing and *?worker module declaration.
web_src/js/features/tribute.ts	Removed webpack chunk annotation; rely on Vite dynamic import.
web_src/js/features/stopwatch.ts	Switched SharedWorker URL construction to use manifest-resolved worker path.
web_src/js/features/notification.ts	Switched SharedWorker URL construction to use manifest-resolved worker path.
web_src/js/features/sharedworker.ts	Added new SharedWorker implementation for event streaming.
web_src/js/features/repo-issue-pull.ts	Removed webpack chunk annotation for Vue component dynamic import.
web_src/js/features/repo-findfile.ts	Removed webpack chunk annotation for Vue component dynamic import.
web_src/js/features/recent-commits.ts	Removed webpack chunk annotation for Vue component dynamic import.
web_src/js/features/heatmap.ts	Removed webpack chunk annotation for Vue component dynamic import.
web_src/js/features/dropzone.ts	Switched Dropzone + CSS loading to plain dynamic imports for Vite.
web_src/js/features/contributors.ts	Removed webpack chunk annotation for Vue component dynamic import.
web_src/js/features/comp/Cropper.ts	Removed webpack chunk annotation; rely on Vite dynamic import.
web_src/js/features/comp/ComboMarkdownEditor.ts	Switched EasyMDE + CSS loading to plain dynamic imports for Vite.
web_src/js/features/colorpicker.ts	Switched color picker + CSS loading to plain dynamic imports for Vite.
web_src/js/features/codeeditor.ts	Updated Monaco import to use the new modules/monaco.ts wrapper.
web_src/js/features/code-frequency.ts	Removed webpack chunk annotation for Vue component dynamic import.
web_src/js/features/citation.ts	Removed webpack chunk annotations; rely on Vite dynamic imports.
web_src/js/features/captcha.ts	Removed webpack chunk annotation; rely on Vite dynamic import.
web_src/js/bootstrap.ts	Removed webpack public path setup; adjusted ignore patterns and asset base URL logic.
templates/swagger/ui.tmpl	Updated Swagger assets to use GetAssetPath and module script.
templates/status/500.tmpl	Updated “minimal template functions” comment to reference GetAssetPath.
templates/shared/combomarkdowneditor.tmpl	Converted inline script to module script.
templates/repo/diff/box.tmpl	Converted inline script to module script and adjusted file-tree visibility init.
templates/devtest/devtest-header.tmpl	Updated devtest CSS link to GetAssetPath.
templates/devtest/devtest-footer.tmpl	Updated devtest JS to module script + GetAssetPath.
templates/base/head_style.tmpl	Updated core CSS and theme CSS to use GetAssetPath.
templates/base/head_script.tmpl	Removed AssetVersion usage; added sharedWorkerPath config; added blocking webcomponents script and module index.js script via GetAssetPath.
modules/templates/helper.go	Exposed GetAssetPath to templates (replacing AssetVersion).
modules/setting/server.go	Removed AssetVersion from server settings initialization.
modules/public/manifest.go	Added Vite manifest loader/cache + GetAssetPath resolver.
modules/public/manifest_test.go	Added unit tests for manifest parsing and GetAssetPath fallback behavior.
modules/markup/render.go	Updated external render iframe asset URLs to resolve via GetAssetPath and module script.
modules/markup/external/openapi.go	Updated OpenAPI renderer to use GetAssetPath-resolved swagger assets and module script.
tests/integration/markup_external_test.go	Updated expected HTML to match module script + manifest-resolved asset paths.
services/webtheme/webtheme.go	Stripped Vite content hash from theme internal names when loading theme metadata.

Files not reviewed (1)

• pnpm-lock.yaml: Language not supported

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

You can also share your feedback on Copilot code review. Take the survey.

[silverwind]

Actually the mermaid-core group caused a regression in the domready chunk because it contains a shared js-yaml dependency which causes rolldown to pull mermaid-parser into index-domready. As demonstrated by that, manual chunking is tricky to get right, and imho barely worth it for the chance at regressions it can cause. Best to go with the default chunking, even if it results in more files.

[wxiaoguang]

But why home page also loads "mermaid"?

I don't remember that webpack's output will load the unrelated chunks on home page.

Details

[silverwind]

But why home page also loads "mermaid"?

because of the bug mentioned in #36896 (comment) caused by js-yaml shared dependency.

[wxiaoguang]

Best to go with the default chunking, even if it results in more files.

OK, if you can clearly document the behavior and most people agree to increase most page's loading time.

[silverwind]

OK, if you can clearly document the behavior and most people agree to increase most page's loading time.

Async chunks do not increase page load times, those scripts are deferred, so all they cause is the deferred JS to become active maybe a few milliseconds later, dependant on how many waterfall effects there are.

[wxiaoguang]

OK, if you can clearly document the behavior and most people agree to increase most page's loading time.

Async chunks do not increase page load times, those scripts are deferred, so all they cause is the deferred JS to become active maybe a few milliseconds later, dependant on how many waterfall effects there are.

It increases "network time" during the page loading. Don't you see that in your screenshots?

If the "network request" doesn't finish, how can the JS scripts get executed? If the JS scripts don't execute, how can the page JS-related functions work?

[silverwind]

It increases "network time" during the page loading. Don't you see that in your screenshots?

The page is interactive at the same time regardless of how many async chunks, the loading times in the footer are variable, not representative. Only the IIFE chunk is render-blocking and therefor involved in the actual page load time.

[silverwind]

svg shouldn't be chunked, utils shouldn't be chunked, fetch shouldn't be chunked.

Let me quote Claude on this:

svg.ts is already inlined into the entry. The remaining two (utils 8.9 kB, fetch 0.5 kB) exist because they're shared between the index-domready and swagger entry points. Rolldown automatically splits shared code across entries.

So the only way to un-chunk them is remove them from the swagger entry point.

[wxiaoguang]

Although you act as a "frontend expert", you knows nothing about page loading.

Just like you didn't understand what is "async": #17386 (comment)

[silverwind]

svg shouldn't be chunked, utils shouldn't be chunked, fetch shouldn't be chunked.

All fixed except svg which must remain a chunk because 6 Vue components import it which themselves are lazy-loaded.

dismiss

[silverwind]

Although you act as a "frontend expert", you knows nothing about page loading.

Just like you didn't understand what is "async": #17386 (comment)

Async and module scripts are non-parser-blocking, meaning the browser will render the page and then execute the scripts after page load when DOMContentReady fires.

[silverwind]

Will do a few more refactors in vite config and maybe try to get the chunk number down a bit more.

[silverwind]

Down to 197 files wil latest tweaks. Nothing more is feasible in terms of de-chunking and the code is already rather hacky. Ultimatlely rolldown optimizes for smallest possible total size, which is ideal for binary size, and given caching and HTTP 2, a non-issue in practice.