Build frontend with Vite

[silverwind]

Work in progress, does not fully work yet. TODOs:

• Figure out why dynamic imports fail with import declarations may only appear at top level of a module
• Replace _webpack_public_path with renderBuiltUrl
• Remove webpack and webpackChunkName
• Fix sortablejs warning
• Figure out a better file structure for the entry point files
• Enable CSS minify

Interestingly, vite is about 2-3 times as slow as webpack on my machine.

Fixes: #17793

[silverwind]

Still a number of open chunk loading issues. If build performance does not improve, I don't think the switch will be worth it as it's a worse development experience.

Even the dev server takes over 1 minute to start up, while webpack does the same in 20s. The majority of build time is spent in rollup, esbuild completes in around 5-10s.

[silverwind]

Around 30s of build time is allocated to Monaco, maybe https://github.com/vdesjs/vite-plugin-monaco-editor or https://twitter.com/youyuxi/status/1355316139144970240 is needed to bring that down. Or maybe vite has some way to cache specific dependencies.

[delvh]

I haven't quite understood yet what the benefit about that would be, especially if it appears to be slower than webpack?
Could you please elaborate why it's a better idea?

[6543]

Interestingly, vite is about 2-3 times as slow as webpack on my machine.

@silverwind are you on windows?

[silverwind]

I haven't quite understood yet what the benefit about that would be, especially if it appears to be slower than webpack? Could you please elaborate why it's a better idea?

• More modern
• Active development
• Buit-in dev server
• Can output ESM, the modern JS module format
• Usually faster

@silverwind are you on windows?

Mac

[silverwind]

So I don't think this will work out. Vite is really hard to integrate when it does not manage the HTML, likely the whole dev server needs a custom implementation as I can't figure out on which path it outputs the assets.

While working on this I found two more issues:

• window._globalHandlerErrors implementation is not strict-mode compatible with this fake array being created.
• jquery.are-you-sure is not strict-mode compatible because it has two accidential globals in the code
• There seem to be more strict mode violations in Vue code.

The build is still massively slow because of big dependencies Monaco, Swagger-UI and Mermaid. I see no way to speed it up. No real idea why it's so much slower in Webpack, but Rollup seems like the most likely suspect, but it's a hard dependency of Vite unfortunately.

[silverwind]

I give up here. Until the speed issue is resolved, which imho can only come from evanw/esbuild#16 and vite adopting esbuild to bundle in place of rollup, but I guess it may take a few years for that to happen.

I will follow up with the discovered issues, specifically the strict mode issue needs to be fixed anyways.

#17793 (comment) outlines my reasons for not pursuing vite anymore.

[6543]

well another option and also modern would be https://turbo.build/pack but did not got it working for gitea jet

[silverwind]

Turbo is definitely on my radar, yes. I think the only thing that we are really missing currently with webpack is type="module" output, but it's a minor issue really. Build performance with webpack is alreasy very satisfactory imho.

[silverwind]

Maybe the slow build time is acceptable when it is never observed during development. The vite developers have promised to look into the slow prod build times.

I will try to figure out the remaining issues with the dev server, will likely get rid of the /js/ etc subdirectories. I don't think there is actually much missing to get this into operational state.

[silverwind]

Waiting on #25940.

[silverwind]

Will revisit this in a future version of Vite that will hopefully have increased the prod build speed.