Consider replacing Webpack with Vite

[silverwind]

Feature Description

It might be a bit early, but I think it's worth investigating switching the build process to pure esbuild. It supports experimental code splitting and has a plugin ecosystem as well. It should build supremely fast.

Vite was suggested previously as a Webpack replacment but I think it's a dead-end because it relies on legacy systems like Rollup and Babel and seems to be generally header into a similar bloated direction like Webpack. Also, in terms of speed, Vite is barely faster than Webpack in my testing.

Screenshots

No response

[Gusted]

You got mine +1

I think you have a good argument about the legacy systems like Rollup and especially Babel, and they are written in Javascript which is a magnitude slower of programs that uses languages like go(esbuild) or rust(swc).

As for the fast building time - I've personal experience with this, and the claims about being really fast isn't a lie. A lot of programs(max 1K LOC) whereby I used ESBuild were transpiled into bundled code within a few ms.

A more world-case scenario is darkreader(15K LOC) shameless plug.

Currently we're using Rollup+Typescript compiler and it the whole codebase can be transpiled within 15 seconds on a high-end CPU.
When I was testing out ESBuild(darkreader/darkreader#4492) the code was generally transpilled within 50-500ms

Just a few notes on ESBuild, it doesn't have top-notch dead-code remover as Rollup,Webpack etc. does. So I'm not sure if that's highly used in gitea's frontend as that will require some manual code moving to get that working.
While plugins are now mature, if you find yourself in a edge-case, goodluck writing your own plugin as it isn't as big as rollup/webpack/babel's plugin ecosystem.

In the end, ESBuild is awesome. And the trade-off that you get for performance is really worth it IMO.

[silverwind]

evanw/esbuild#1441 could be one potential blocker for us, given that we modify the public path prefix at runtime.

[lafriks]

Can't we just build with public path {{PUBLIC_PATH}}/ and then just replace it in gitea server code either on gitea startup or on first usage before serving?

[silverwind]

I'm not sure if the esbuild loader can be easily set to use it at runtime, maybe a string replacement in JS will be necessary and if we have to do it, we lose the performance benefit of serving pre-compressed gzip.

[anbraten]

Also, in terms of speed, Vite is barely faster than Webpack in my testing.

I thing this is mainly coming from the fact how the code is currently structured. Vites power is code-splitting and being fast on dynamically importing code on demand. In case of the Gitea code it seems to me that it loads the features a monolithic bundle and "only" uses dynamic imports for libraries atm, so Vite probably can't optimize that to well.

If Vue is a thing for Gitea, Vite has some benefits over esbuild from my experiences considering for example the setup complexity for vue SFC building with native esbuild. Maybe https://vitejs.dev/guide/why.html#why-not-bundle-with-esbuild has some helping hints as well.

[silverwind]

Maybe https://vitejs.dev/guide/why.html#why-not-bundle-with-esbuild has some helping hints as well.

That page looks a bit outdated to me, esbuild can now do CSS handling/minification and code splitting (althought beta-level). Vue SFCs will probably require a plugin.

[silverwind]

I guess Vite has matured enough to be a possible Webpack replacement. It will require quite a bit of configuration and probably some plugins, but I think it could be made to work.

I see Vite as a possibly more "complete" version of esbuild, which still lacks code splitting.

[silverwind]

Actually, there are at least two blockers I think:

• Vite can't do multiple CSS entrypoints. The entrypoint config is provided by rollup and I think rollup can only do JS entrypoints. It may be possible to run vite multiple times, but that would complicate things a lot.
• license.txt generation will need to be rewritten or a suitable plugin to be found.

[silverwind]

I don't see a compelling reason to switch to vite currently for Gitea. Our webpack setup is supremely fast currently at around 18-20s to build, and that includes heavyweights like monaco. Vite just does not seem to be made for complex projects that need multiple entry points and fine-grained configurability.

[silverwind]

Let's reopen. Vite is still a goal and I think with some Rollup plugins to load CSS, we may be able to achieve what Webpack currently does.

[silverwind]

Likely use https://github.com/mjeanroy/rollup-plugin-license for license.txt generation with vite.

[silverwind]

Attempt to migrate to Vite was done in #25874, but it did not work out:

• Vite, or more specifically Rollup is 2-3 times slower to bundle our dependencies than Webpack, likely needs [Feature] Code splitting on async import() statements. evanw/esbuild#16 and adoption of esbuild bundling in vite to really speed it up.
• Vite is heavily geared towards SPAs, or at least apps where it can build HTML. This will never be the case for gitea, so it's a bad fit and would require a ton of workarounds with manual wrestling with rollup for correct asset paths and I was never able to get the devserver working.

[silverwind]

Vite should be re-attempted again after they release a version based on rolldown, which should provide a level of speed suitable to us.

[silverwind]

Maybe https://github.com/farm-fe/farm is worth a try in the future (e.g. definitely not so early). It promises to alleviate all problems I have with vite (rollup slowness, missing code splitting, lazy compilation, prod/dev difference).