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.