feat(ui): lazy-load all Vue components (#9444)

Some Vue components were already lazy-loaded, but not all.

There are three main changes:
1. Move init scripts outside Vue code.
2. Make the init scripts lazy-load the Vue components.
3. Deal with vue linters, because apparently if you do `export default` then some Vue linters will notice that's vue sfc.

The rationale for this pull requests is that this reduces the size of the `index.js` file.
- Uncompressed: 1.24 MB -> 954.40 kB
- Compressed (gzip, via `reverse_proxy` of Caddy): 400.45 kB -> 298.95 kB
- Compressed (zstd, via `bindata` tag): 363.75 kB -> 274.22 kB

Reviewed-on: https://codeberg.org/forgejo/forgejo/pulls/9444
Reviewed-by: Otto <otto@codeberg.org>
Co-authored-by: Gusted <postmaster@gusted.xyz>
Co-committed-by: Gusted <postmaster@gusted.xyz>
This commit is contained in:
Gusted 2025-09-28 05:40:40 +02:00 committed by 0ko
parent 5da9c6ce64
commit c8ec9bc2cc
17 changed files with 269 additions and 235 deletions

View file

@ -1,10 +1,10 @@
import {createApp} from 'vue';
import DiffCommitSelector from '../components/DiffCommitSelector.vue';
export function initDiffCommitSelect() {
export async function initDiffCommitSelect() {
const el = document.getElementById('diff-commit-select');
if (!el) return;
const {default: DiffCommitSelector} = await import(/* webpackChunkName: "diff-commit-selector" */'../components/DiffCommitSelector.vue');
const commitSelect = createApp(DiffCommitSelector);
commitSelect.mount(el);
}