From c8ec9bc2cc821bd43940550f8933dcbeca46b521 Mon Sep 17 00:00:00 2001
From: Gusted <postmaster@gusted.xyz>
Date: Sun, 28 Sep 2025 05:40:40 +0200
Subject: [PATCH] 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>
---
 web_src/js/components/DashboardRepoList.vue   |  12 +-
 web_src/js/components/RepoActionView.vue      | 155 ++++++++----------
 .../js/components/RepoActivityTopAuthors.vue  | 110 ++++++-------
 .../js/components/RepoBranchTagSelector.vue   |  44 +----
 .../components/ScopedAccessTokenSelector.vue  |  20 +--
 web_src/js/features/contextpopup.js           |   4 +-
 web_src/js/features/dashboard-repo-list.ts    |  12 ++
 web_src/js/features/heatmap.js                |   4 +-
 web_src/js/features/repo-action-view.ts       |  55 +++++++
 .../js/features/repo-activity-top-authors.ts  |  16 ++
 .../js/features/repo-branch-tag-selector.js   |  36 ++++
 web_src/js/features/repo-diff-commitselect.js |   4 +-
 web_src/js/features/repo-diff-filetree.js     |   4 +-
 web_src/js/features/repo-issue-pr-form.js     |   4 +-
 web_src/js/features/repo-legacy.js            |   2 +-
 .../features/scoped-access-token-selector.ts  |  14 ++
 web_src/js/index.js                           |   8 +-
 17 files changed, 269 insertions(+), 235 deletions(-)
 create mode 100644 web_src/js/features/dashboard-repo-list.ts
 create mode 100644 web_src/js/features/repo-action-view.ts
 create mode 100644 web_src/js/features/repo-activity-top-authors.ts
 create mode 100644 web_src/js/features/repo-branch-tag-selector.js
 create mode 100644 web_src/js/features/scoped-access-token-selector.ts

diff --git a/web_src/js/components/DashboardRepoList.vue b/web_src/js/components/DashboardRepoList.vue
index e8c1b76a7f..7debf6240e 100644
--- a/web_src/js/components/DashboardRepoList.vue
+++ b/web_src/js/components/DashboardRepoList.vue
@@ -1,5 +1,4 @@
 <script>
-import {createApp} from 'vue';
 import $ from 'jquery';
 import {SvgIcon} from '../svg.js';
 import {GET} from '../modules/fetch.js';
@@ -15,7 +14,7 @@ const commitStatus = {
   warning: {name: 'gitea-exclamation', color: 'yellow'},
 };
 
-const sfc = {
+export default {
   components: {SvgIcon},
   data() {
     const params = new URLSearchParams(window.location.search);
@@ -323,15 +322,6 @@ const sfc = {
     },
   },
 };
-
-export function initDashboardRepoList() {
-  const el = document.getElementById('dashboard-repo-list');
-  if (el) {
-    createApp(sfc).mount(el);
-  }
-}
-
-export default sfc; // activate the IDE's Vue plugin
 </script>
 <template>
   <div>
diff --git a/web_src/js/components/RepoActionView.vue b/web_src/js/components/RepoActionView.vue
index 24bc32e348..3328976925 100644
--- a/web_src/js/components/RepoActionView.vue
+++ b/web_src/js/components/RepoActionView.vue
@@ -1,29 +1,58 @@
 <script>
 import {SvgIcon} from '../svg.js';
 import ActionRunStatus from './ActionRunStatus.vue';
-import {createApp} from 'vue';
 import {toggleElem} from '../utils/dom.js';
 import {formatDatetime} from '../utils/time.js';
 import {renderAnsi} from '../render/ansi.js';
 import {GET, POST, DELETE} from '../modules/fetch.js';
 
-const sfc = {
+export default {
   name: 'RepoActionView',
   components: {
     SvgIcon,
     ActionRunStatus,
   },
   props: {
-    initialJobData: Object,
-    initialArtifactData: Object,
-    runIndex: String,
-    runID: String,
-    jobIndex: String,
-    attemptNumber: String,
-    actionsURL: String,
-    workflowName: String,
-    workflowURL: String,
-    locale: Object,
+    initialJobData: {
+      type: Object,
+      required: true,
+    },
+    initialArtifactData: {
+      type: Object,
+      required: true,
+    },
+    runIndex: {
+      type: String,
+      required: true,
+    },
+    runID: {
+      type: String,
+      required: true,
+    },
+    jobIndex: {
+      type: String,
+      required: true,
+    },
+    attemptNumber: {
+      type: String,
+      required: true,
+    },
+    actionsURL: {
+      type: String,
+      required: true,
+    },
+    workflowName: {
+      type: String,
+      required: true,
+    },
+    workflowURL: {
+      type: String,
+      required: true,
+    },
+    locale: {
+      type: Object,
+      required: true,
+    },
   },
 
   data() {
@@ -97,30 +126,6 @@ const sfc = {
     };
   },
 
-  async mounted() {
-    // Need to await first loadJob so this.currentJobStepsStates is initialized and can be used in hashChangeListener,
-    // but with the initializing data being passed in this should end up as a synchronous invocation.  loadJob is
-    // responsible for setting up its refresh interval during this first invocation.
-    await this.loadJob({initialJobData: this.initialJobData, initialArtifactData: this.initialArtifactData});
-    document.body.addEventListener('click', this.closeDropdown);
-    this.hashChangeListener();
-    window.addEventListener('hashchange', this.hashChangeListener);
-  },
-
-  beforeUnmount() {
-    document.body.removeEventListener('click', this.closeDropdown);
-    window.removeEventListener('hashchange', this.hashChangeListener);
-  },
-
-  unmounted() {
-    // clear the interval timer when the component is unmounted
-    // even our page is rendered once, not spa style
-    if (this.intervalID) {
-      clearInterval(this.intervalID);
-      this.intervalID = null;
-    }
-  },
-
   computed: {
     shouldShowAttemptDropdown() {
       return this.initialLoadComplete && this.currentJob.allAttempts && this.currentJob.allAttempts.length > 1;
@@ -176,6 +181,30 @@ const sfc = {
     },
   },
 
+  async mounted() {
+    // Need to await first loadJob so this.currentJobStepsStates is initialized and can be used in hashChangeListener,
+    // but with the initializing data being passed in this should end up as a synchronous invocation.  loadJob is
+    // responsible for setting up its refresh interval during this first invocation.
+    await this.loadJob({initialJobData: this.initialJobData, initialArtifactData: this.initialArtifactData});
+    document.body.addEventListener('click', this.closeDropdown);
+    this.hashChangeListener();
+    window.addEventListener('hashchange', this.hashChangeListener);
+  },
+
+  beforeUnmount() {
+    document.body.removeEventListener('click', this.closeDropdown);
+    window.removeEventListener('hashchange', this.hashChangeListener);
+  },
+
+  unmounted() {
+    // clear the interval timer when the component is unmounted
+    // even our page is rendered once, not spa style
+    if (this.intervalID) {
+      clearInterval(this.intervalID);
+      this.intervalID = null;
+    }
+  },
+
   methods: {
     // show/hide the step logs for a step
     toggleStepLogs(idx) {
@@ -485,60 +514,6 @@ const sfc = {
     },
   },
 };
-
-export default sfc;
-
-export function initRepositoryActionView() {
-  const el = document.getElementById('repo-action-view');
-  if (!el) return;
-
-  // TODO: the parent element's full height doesn't work well now,
-  // but we can not pollute the global style at the moment, only fix the height problem for pages with this component
-  const parentFullHeight = document.querySelector('body > div.full.height');
-  if (parentFullHeight) parentFullHeight.style.paddingBottom = '0';
-
-  const initialJobData = JSON.parse(el.getAttribute('data-initial-post-response'));
-  const initialArtifactData = JSON.parse(el.getAttribute('data-initial-artifacts-response'));
-
-  const view = createApp(sfc, {
-    initialJobData,
-    initialArtifactData,
-    runIndex: el.getAttribute('data-run-index'),
-    runID: el.getAttribute('data-run-id'),
-    jobIndex: el.getAttribute('data-job-index'),
-    attemptNumber: el.getAttribute('data-attempt-number'),
-    actionsURL: el.getAttribute('data-actions-url'),
-    workflowName: el.getAttribute('data-workflow-name'),
-    workflowURL: el.getAttribute('data-workflow-url'),
-    locale: {
-      approve: el.getAttribute('data-locale-approve'),
-      cancel: el.getAttribute('data-locale-cancel'),
-      rerun: el.getAttribute('data-locale-rerun'),
-      artifactsTitle: el.getAttribute('data-locale-artifacts-title'),
-      areYouSure: el.getAttribute('data-locale-are-you-sure'),
-      confirmDeleteArtifact: el.getAttribute('data-locale-confirm-delete-artifact'),
-      rerun_all: el.getAttribute('data-locale-rerun-all'),
-      showTimeStamps: el.getAttribute('data-locale-show-timestamps'),
-      showLogSeconds: el.getAttribute('data-locale-show-log-seconds'),
-      showFullScreen: el.getAttribute('data-locale-show-full-screen'),
-      downloadLogs: el.getAttribute('data-locale-download-logs'),
-      runAttemptLabel: el.getAttribute('data-locale-run-attempt-label'),
-      viewingOutOfDateRun: el.getAttribute('data-locale-viewing-out-of-date-run'),
-      viewMostRecentRun: el.getAttribute('data-locale-view-most-recent-run'),
-      status: {
-        unknown: el.getAttribute('data-locale-status-unknown'),
-        waiting: el.getAttribute('data-locale-status-waiting'),
-        running: el.getAttribute('data-locale-status-running'),
-        success: el.getAttribute('data-locale-status-success'),
-        failure: el.getAttribute('data-locale-status-failure'),
-        cancelled: el.getAttribute('data-locale-status-cancelled'),
-        skipped: el.getAttribute('data-locale-status-skipped'),
-        blocked: el.getAttribute('data-locale-status-blocked'),
-      },
-    },
-  });
-  view.mount(el);
-}
 </script>
 <template>
   <div class="ui container fluid padded action-view-container" :class="{ 'interval-pending': intervalID }">
diff --git a/web_src/js/components/RepoActivityTopAuthors.vue b/web_src/js/components/RepoActivityTopAuthors.vue
index 3752bc582b..22c0b9bdb3 100644
--- a/web_src/js/components/RepoActivityTopAuthors.vue
+++ b/web_src/js/components/RepoActivityTopAuthors.vue
@@ -8,7 +8,6 @@ import {
   LinearScale,
 } from 'chart.js';
 import {chartJsColors} from '../utils/color.js';
-import {createApp} from 'vue';
 
 Chart.defaults.color = chartJsColors.text;
 Chart.defaults.borderColor = chartJsColors.border;
@@ -20,7 +19,7 @@ Chart.register(
   Tooltip,
 );
 
-const sfc = {
+export default {
   components: {Bar},
   props: {
     locale: {
@@ -42,53 +41,6 @@ const sfc = {
     activityTopAuthors: window.config.pageData.repoActivityTopAuthors || [],
     i18nCommitActivity: this,
   }),
-  methods: {
-    graphPoints() {
-      return {
-        datasets: [{
-          label: this.locale.commitActivity,
-          data: this.activityTopAuthors.map((item) => item.commits),
-          backgroundColor: this.colors.barColor,
-          barThickness: 40,
-          borderWidth: 0,
-          tension: 0.3,
-        }],
-        labels: this.activityTopAuthors.map((item) => item.name),
-      };
-    },
-    getOptions() {
-      return {
-        responsive: true,
-        maintainAspectRatio: false,
-        animation: true,
-        scales: {
-          x: {
-            type: 'category',
-            grid: {
-              display: false,
-            },
-            ticks: {
-              // Disable the drawing of the labels on the x-asis and force them all
-              // of them to be 'shown', this avoids them being internally skipped
-              // for some data points. We rely on the internally generated ticks
-              // to know where to draw our own ticks. Set rotation to 90 degree
-              // and disable autoSkip. autoSkip is disabled to ensure no ticks are
-              // skipped and rotation is set to avoid messing with the width of the chart.
-              color: 'transparent',
-              minRotation: 90,
-              maxRotation: 90,
-              autoSkip: false,
-            },
-          },
-          y: {
-            ticks: {
-              stepSize: 1,
-            },
-          },
-        },
-      };
-    },
-  },
   mounted() {
     const refStyle = window.getComputedStyle(this.$refs.style);
     this.colors.barColor = refStyle.backgroundColor;
@@ -141,20 +93,54 @@ const sfc = {
       },
     });
   },
+  methods: {
+    graphPoints() {
+      return {
+        datasets: [{
+          label: this.locale.commitActivity,
+          data: this.activityTopAuthors.map((item) => item.commits),
+          backgroundColor: this.colors.barColor,
+          barThickness: 40,
+          borderWidth: 0,
+          tension: 0.3,
+        }],
+        labels: this.activityTopAuthors.map((item) => item.name),
+      };
+    },
+    getOptions() {
+      return {
+        responsive: true,
+        maintainAspectRatio: false,
+        animation: true,
+        scales: {
+          x: {
+            type: 'category',
+            grid: {
+              display: false,
+            },
+            ticks: {
+              // Disable the drawing of the labels on the x-asis and force them all
+              // of them to be 'shown', this avoids them being internally skipped
+              // for some data points. We rely on the internally generated ticks
+              // to know where to draw our own ticks. Set rotation to 90 degree
+              // and disable autoSkip. autoSkip is disabled to ensure no ticks are
+              // skipped and rotation is set to avoid messing with the width of the chart.
+              color: 'transparent',
+              minRotation: 90,
+              maxRotation: 90,
+              autoSkip: false,
+            },
+          },
+          y: {
+            ticks: {
+              stepSize: 1,
+            },
+          },
+        },
+      };
+    },
+  },
 };
-
-export function initRepoActivityTopAuthorsChart() {
-  const el = document.getElementById('repo-activity-top-authors-chart');
-  if (el) {
-    createApp(sfc, {
-      locale: {
-        commitActivity: el.getAttribute('data-locale-commit-activity'),
-      },
-    }).mount(el);
-  }
-}
-
-export default sfc; // activate the IDE's Vue plugin
 </script>
 <template>
   <div>
diff --git a/web_src/js/components/RepoBranchTagSelector.vue b/web_src/js/components/RepoBranchTagSelector.vue
index 81b1244328..b921dfcac4 100644
--- a/web_src/js/components/RepoBranchTagSelector.vue
+++ b/web_src/js/components/RepoBranchTagSelector.vue
@@ -1,26 +1,25 @@
 <script>
-import {createApp, nextTick} from 'vue';
+import {nextTick} from 'vue';
 import $ from 'jquery';
 import {SvgIcon} from '../svg.js';
 import {pathEscapeSegments} from '../utils/url.js';
 import {showErrorToast} from '../modules/toast.js';
 import {GET} from '../modules/fetch.js';
 
-const sfc = {
+export default {
   components: {SvgIcon},
 
   // no `data()`, at the moment, the `data()` is provided by the init code, which is not ideal and should be fixed in the future
 
   computed: {
+    active() {
+      return !this.filteredItems.length && this.showCreateNewBranch ? 0 : -1;
+    },
     filteredItems() {
-      const items = this.items.filter((item) => {
+      return this.items.filter((item) => {
         return ((this.mode === 'branches' && item.branch) || (this.mode === 'tags' && item.tag)) &&
           (!this.searchTerm || item.name.toLowerCase().includes(this.searchTerm.toLowerCase()));
       });
-
-      // TODO: fix this anti-pattern: side-effects-in-computed-properties
-      this.active = !items.length && this.showCreateNewBranch ? 0 : -1;
-      return items;
     },
     showNoResults() {
       return !this.filteredItems.length && !this.showCreateNewBranch;
@@ -213,37 +212,6 @@ const sfc = {
     },
   },
 };
-
-export function initRepoBranchTagSelector(selector) {
-  for (const [elIndex, elRoot] of document.querySelectorAll(selector).entries()) {
-    const data = {
-      csrfToken: window.config.csrfToken,
-      items: [],
-      searchTerm: '',
-      refNameText: '',
-      menuVisible: false,
-      release: null,
-
-      isViewTag: false,
-      isViewBranch: false,
-      isViewTree: false,
-
-      active: 0,
-      isLoading: false,
-      // This means whether branch list/tag list has initialized
-      hasListInitialized: {
-        'branches': false,
-        'tags': false,
-      },
-      ...window.config.pageData.branchDropdownDataList[elIndex],
-    };
-
-    const comp = {...sfc, data() { return data }};
-    createApp(comp).mount(elRoot);
-  }
-}
-
-export default sfc; // activate IDE's Vue plugin
 </script>
 <template>
   <div class="ui dropdown custom">
diff --git a/web_src/js/components/ScopedAccessTokenSelector.vue b/web_src/js/components/ScopedAccessTokenSelector.vue
index 925e531c6b..91356d8bf5 100644
--- a/web_src/js/components/ScopedAccessTokenSelector.vue
+++ b/web_src/js/components/ScopedAccessTokenSelector.vue
@@ -1,8 +1,7 @@
 <script>
-import {createApp} from 'vue';
 import {hideElem, showElem} from '../utils/dom.js';
 
-const sfc = {
+export default {
   props: {
     isAdmin: {
       type: Boolean,
@@ -71,23 +70,6 @@ const sfc = {
     },
   },
 };
-
-export default sfc;
-
-/**
- * Initialize category toggle sections
- */
-export function initScopedAccessTokenCategories() {
-  for (const el of document.getElementsByClassName('scoped-access-token')) {
-    createApp(sfc, {
-      isAdmin: el.getAttribute('data-is-admin') === 'true',
-      noAccessLabel: el.getAttribute('data-no-access-label'),
-      readLabel: el.getAttribute('data-read-label'),
-      writeLabel: el.getAttribute('data-write-label'),
-    }).mount(el);
-  }
-}
-
 </script>
 <template>
   <div v-for="category in categories" :key="category" class="field tw-pl-1 tw-pb-1 access-token-category">
diff --git a/web_src/js/features/contextpopup.js b/web_src/js/features/contextpopup.js
index ce90f3e505..b719ec09cd 100644
--- a/web_src/js/features/contextpopup.js
+++ b/web_src/js/features/contextpopup.js
@@ -1,5 +1,4 @@
 import {createApp} from 'vue';
-import ContextPopup from '../components/ContextPopup.vue';
 import {parseIssueHref} from '../utils.js';
 import {createTippy} from '../modules/tippy.js';
 
@@ -8,7 +7,7 @@ export function initContextPopups() {
   attachRefIssueContextPopup(refIssues);
 }
 
-export function attachRefIssueContextPopup(refIssues) {
+export async function attachRefIssueContextPopup(refIssues) {
   for (const refIssue of refIssues) {
     if (refIssue.classList.contains('ref-external-issue')) {
       return;
@@ -20,6 +19,7 @@ export function attachRefIssueContextPopup(refIssues) {
     const el = document.createElement('div');
     refIssue.parentNode.insertBefore(el, refIssue.nextSibling);
 
+    const {default: ContextPopup} = await import(/* webpackChunkName: "context-popup" */'../components/ContextPopup.vue');
     const view = createApp(ContextPopup);
 
     try {
diff --git a/web_src/js/features/dashboard-repo-list.ts b/web_src/js/features/dashboard-repo-list.ts
new file mode 100644
index 0000000000..f55aa5343b
--- /dev/null
+++ b/web_src/js/features/dashboard-repo-list.ts
@@ -0,0 +1,12 @@
+import {createApp} from 'vue';
+
+export async function initDashboardRepoList() {
+  const el = document.getElementById('dashboard-repo-list');
+  if (!el) {
+    return;
+  }
+
+  const {default: DashboardRepoList} = await import(/* webpackChunkName: "dashboard-repo-list" */'../components/DashboardRepoList.vue');
+  const dashboardList = createApp(DashboardRepoList);
+  dashboardList.mount(el);
+}
diff --git a/web_src/js/features/heatmap.js b/web_src/js/features/heatmap.js
index 688f06c2b2..3c73e56c4e 100644
--- a/web_src/js/features/heatmap.js
+++ b/web_src/js/features/heatmap.js
@@ -1,11 +1,11 @@
 import {createApp} from 'vue';
-import ActivityHeatmap from '../components/ActivityHeatmap.vue';
 import {translateMonth, translateDay} from '../utils.js';
 
-export function initHeatmap() {
+export async function initHeatmap() {
   const el = document.getElementById('user-heatmap');
   if (!el) return;
 
+  const {default: ActivityHeatmap} = await import(/* webpackChunkName: "activity-heatmap" */'../components/ActivityHeatmap.vue');
   try {
     const heatmap = {};
     for (const {contributions, timestamp} of JSON.parse(el.getAttribute('data-heatmap-data'))) {
diff --git a/web_src/js/features/repo-action-view.ts b/web_src/js/features/repo-action-view.ts
new file mode 100644
index 0000000000..a43a12c37d
--- /dev/null
+++ b/web_src/js/features/repo-action-view.ts
@@ -0,0 +1,55 @@
+import {createApp} from 'vue';
+
+export async function initRepositoryActionView() {
+  const el = document.getElementById('repo-action-view');
+  if (!el) return;
+
+  const {default: RepoActionView} = await import(/* webpackChunkName: "repo-action-view" */'../components/RepoActionView.vue');
+
+  // TODO: the parent element's full height doesn't work well now,
+  // but we can not pollute the global style at the moment, only fix the height problem for pages with this component
+  const parentFullHeight = document.querySelector('body > div.full.height') as HTMLDivElement;
+  if (parentFullHeight) parentFullHeight.style.paddingBottom = '0';
+
+  const initialJobData = JSON.parse(el.getAttribute('data-initial-post-response'));
+  const initialArtifactData = JSON.parse(el.getAttribute('data-initial-artifacts-response'));
+
+  const view = createApp(RepoActionView, {
+    initialJobData,
+    initialArtifactData,
+    runIndex: el.getAttribute('data-run-index'),
+    runID: el.getAttribute('data-run-id'),
+    jobIndex: el.getAttribute('data-job-index'),
+    attemptNumber: el.getAttribute('data-attempt-number'),
+    actionsURL: el.getAttribute('data-actions-url'),
+    workflowName: el.getAttribute('data-workflow-name'),
+    workflowURL: el.getAttribute('data-workflow-url'),
+    locale: {
+      approve: el.getAttribute('data-locale-approve'),
+      cancel: el.getAttribute('data-locale-cancel'),
+      rerun: el.getAttribute('data-locale-rerun'),
+      artifactsTitle: el.getAttribute('data-locale-artifacts-title'),
+      areYouSure: el.getAttribute('data-locale-are-you-sure'),
+      confirmDeleteArtifact: el.getAttribute('data-locale-confirm-delete-artifact'),
+      rerun_all: el.getAttribute('data-locale-rerun-all'),
+      showTimeStamps: el.getAttribute('data-locale-show-timestamps'),
+      showLogSeconds: el.getAttribute('data-locale-show-log-seconds'),
+      showFullScreen: el.getAttribute('data-locale-show-full-screen'),
+      downloadLogs: el.getAttribute('data-locale-download-logs'),
+      runAttemptLabel: el.getAttribute('data-locale-run-attempt-label'),
+      viewingOutOfDateRun: el.getAttribute('data-locale-viewing-out-of-date-run'),
+      viewMostRecentRun: el.getAttribute('data-locale-view-most-recent-run'),
+      status: {
+        unknown: el.getAttribute('data-locale-status-unknown'),
+        waiting: el.getAttribute('data-locale-status-waiting'),
+        running: el.getAttribute('data-locale-status-running'),
+        success: el.getAttribute('data-locale-status-success'),
+        failure: el.getAttribute('data-locale-status-failure'),
+        cancelled: el.getAttribute('data-locale-status-cancelled'),
+        skipped: el.getAttribute('data-locale-status-skipped'),
+        blocked: el.getAttribute('data-locale-status-blocked'),
+      },
+    },
+  });
+  view.mount(el);
+}
diff --git a/web_src/js/features/repo-activity-top-authors.ts b/web_src/js/features/repo-activity-top-authors.ts
new file mode 100644
index 0000000000..26632c5c7e
--- /dev/null
+++ b/web_src/js/features/repo-activity-top-authors.ts
@@ -0,0 +1,16 @@
+import {createApp} from 'vue';
+
+export async function initRepoActivityTopAuthorsChart() {
+  const el = document.getElementById('repo-activity-top-authors-chart');
+  if (!el) {
+    return;
+  }
+
+  const {default: RepoActivityTopAuthors} = await import(/* webpackChunkName: "repo-activity-top-authors" */'../components/RepoActivityTopAuthors.vue');
+  const repoActivityTopAuthors = createApp(RepoActivityTopAuthors);
+  repoActivityTopAuthors.mount(el, {
+    locale: {
+      commitActivity: el.getAttribute('data-locale-commit-activity'),
+    },
+  });
+}
diff --git a/web_src/js/features/repo-branch-tag-selector.js b/web_src/js/features/repo-branch-tag-selector.js
new file mode 100644
index 0000000000..ab78b3d98d
--- /dev/null
+++ b/web_src/js/features/repo-branch-tag-selector.js
@@ -0,0 +1,36 @@
+import {createApp} from 'vue';
+
+export async function initRepoBranchTagSelector() {
+  for (const [elIndex, elRoot] of document
+    .querySelectorAll('.js-branch-tag-selector')
+    .entries()) {
+    const {default: RepoBranchTagSelector} = await import(/* webpackChunkName: "repo-branch-tag-selector" */'../components/RepoBranchTagSelector.vue');
+
+    createApp({
+      ...RepoBranchTagSelector,
+      data() {
+        return {
+          csrfToken: window.config.csrfToken,
+          items: [],
+          searchTerm: '',
+          refNameText: '',
+          menuVisible: false,
+          release: null,
+
+          isViewTag: false,
+          isViewBranch: false,
+          isViewTree: false,
+
+          active: 0,
+          isLoading: false,
+          // This means whether branch list/tag list has initialized
+          hasListInitialized: {
+            branches: false,
+            tags: false,
+          },
+          ...window.config.pageData.branchDropdownDataList[elIndex],
+        };
+      },
+    }).mount(elRoot);
+  }
+}
diff --git a/web_src/js/features/repo-diff-commitselect.js b/web_src/js/features/repo-diff-commitselect.js
index ebac64e855..7d9abe77aa 100644
--- a/web_src/js/features/repo-diff-commitselect.js
+++ b/web_src/js/features/repo-diff-commitselect.js
@@ -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);
 }
diff --git a/web_src/js/features/repo-diff-filetree.js b/web_src/js/features/repo-diff-filetree.js
index 5a52b9942d..85dec4088e 100644
--- a/web_src/js/features/repo-diff-filetree.js
+++ b/web_src/js/features/repo-diff-filetree.js
@@ -1,10 +1,10 @@
 import {createApp} from 'vue';
-import DiffFileTree from '../components/DiffFileTree.vue';
 
-export function initDiffFileTree() {
+export async function initDiffFileTree() {
   const el = document.getElementById('diff-file-tree');
   if (!el) return;
 
+  const {default: DiffFileTree} = await import(/* webpackChunkName: "diff-file-tree" */'../components/DiffFileTree.vue');
   const fileTreeView = createApp(DiffFileTree);
   fileTreeView.mount(el);
 }
diff --git a/web_src/js/features/repo-issue-pr-form.js b/web_src/js/features/repo-issue-pr-form.js
index 7b26e643c0..242beb60db 100644
--- a/web_src/js/features/repo-issue-pr-form.js
+++ b/web_src/js/features/repo-issue-pr-form.js
@@ -1,10 +1,10 @@
 import {createApp} from 'vue';
-import PullRequestMergeForm from '../components/PullRequestMergeForm.vue';
 
-export function initRepoPullRequestMergeForm() {
+export async function initRepoPullRequestMergeForm() {
   const el = document.getElementById('pull-request-merge-form');
   if (!el) return;
 
+  const {default: PullRequestMergeForm} = await import(/* webpackChunkName: "pull-request-merge-form" */'../components/PullRequestMergeForm.vue');
   const view = createApp(PullRequestMergeForm);
   view.mount(el);
 }
diff --git a/web_src/js/features/repo-legacy.js b/web_src/js/features/repo-legacy.js
index 66ee945d02..54a7d86c54 100644
--- a/web_src/js/features/repo-legacy.js
+++ b/web_src/js/features/repo-legacy.js
@@ -9,7 +9,7 @@ import {
 import {initUnicodeEscapeButton} from './repo-unicode-escape.js';
 import {svg} from '../svg.js';
 import {htmlEscape} from 'escape-goat';
-import {initRepoBranchTagSelector} from '../components/RepoBranchTagSelector.vue';
+import {initRepoBranchTagSelector} from './repo-branch-tag-selector.js';
 import {
   initRepoCloneLink, initRepoCommonBranchOrTagDropdown, initRepoCommonFilterSearchDropdown,
 } from './repo-common.js';
diff --git a/web_src/js/features/scoped-access-token-selector.ts b/web_src/js/features/scoped-access-token-selector.ts
new file mode 100644
index 0000000000..481ee0b57d
--- /dev/null
+++ b/web_src/js/features/scoped-access-token-selector.ts
@@ -0,0 +1,14 @@
+import {createApp} from 'vue';
+
+export async function initScopedAccessTokenCategories() {
+  for (const el of document.getElementsByClassName('scoped-access-token')) {
+    const {default: ScopedAccessTokenSelector} = await import(/* webpackChunkName: "scoped-access-token-selector" */'../components/ScopedAccessTokenSelector.vue');
+    const scopedAccessTokenSelector = createApp(ScopedAccessTokenSelector, {
+      isAdmin: el.getAttribute('data-is-admin') === 'true',
+      noAccessLabel: el.getAttribute('data-no-access-label'),
+      readLabel: el.getAttribute('data-read-label'),
+      writeLabel: el.getAttribute('data-write-label'),
+    });
+    scopedAccessTokenSelector.mount(el);
+  }
+}
diff --git a/web_src/js/index.js b/web_src/js/index.js
index 430579348e..1d687c2082 100644
--- a/web_src/js/index.js
+++ b/web_src/js/index.js
@@ -1,9 +1,9 @@
 // bootstrap module must be the first one to be imported, it handles webpack lazy-loading and global errors
 import './bootstrap.js';
 
-import {initRepoActivityTopAuthorsChart} from './components/RepoActivityTopAuthors.vue';
-import {initScopedAccessTokenCategories} from './components/ScopedAccessTokenSelector.vue';
-import {initDashboardRepoList} from './components/DashboardRepoList.vue';
+import {initRepoActivityTopAuthorsChart} from './features/repo-activity-top-authors.ts';
+import {initScopedAccessTokenCategories} from './features/scoped-access-token-selector.ts';
+import {initDashboardRepoList} from './features/dashboard-repo-list.ts';
 
 import {initGlobalCopyToClipboardListener} from './features/clipboard.js';
 import {initContextPopups} from './features/contextpopup.js';
@@ -71,7 +71,7 @@ import {initRepoWikiForm} from './features/repo-wiki.js';
 import {initRepoCommentForm, initRepository} from './features/repo-legacy.js';
 import {initCopyContent} from './features/copycontent.js';
 import {initCaptcha} from './features/captcha.js';
-import {initRepositoryActionView} from './components/RepoActionView.vue';
+import {initRepositoryActionView} from './features/repo-action-view.ts';
 import {initGlobalTooltips} from './modules/tippy.js';
 import {initDropdowns} from './modules/dropdown.ts';
 import {initGiteaFomantic} from './modules/fomantic.js';