Lazy-load some Vue components, fix heatmap chunk loading on every page (#36719)

Lazy-load 3 Vue components that are safe to defer (no pop-in effects).
This reduces `index-domready` from 515 KiB to 502 KiB (-2.5%).

The old `vue3-calendar-heatmap` vendor chunk (264 KiB) that previously
loaded on every page is eliminated entirely — it was mostly duplicate
`tippy.js` and `vue` copies that webpack had split out. The actual
heatmap library is only ~12 KiB minified, now inlined into the
`ActivityHeatmap` async chunk.

---------

Co-authored-by: Claude Opus 4.6 <noreply@anthropic.com>
Co-authored-by: wxiaoguang <wxiaoguang@gmail.com>

web_src/js/features/heatmap.ts

@@ -1,5 +1,4 @@
 import {createApp} from 'vue';
-import ActivityHeatmap from '../components/ActivityHeatmap.vue';
 import {translateMonth, translateDay} from '../utils.ts';
 import {GET} from '../modules/fetch.ts';
 
@@ -46,6 +45,7 @@ export async function initHeatmap() {
       noDataText: el.getAttribute('data-locale-no-contributions'),
     };
 
+    const {default: ActivityHeatmap} = await import(/* webpackChunkName: "ActivityHeatmap" */ '../components/ActivityHeatmap.vue');
     const View = createApp(ActivityHeatmap, {values, locale});
     View.mount(el);
     el.classList.remove('is-loading');

web_src/js/features/repo-findfile.ts

@@ -1,5 +1,4 @@
 import {createApp} from 'vue';
-import RepoFileSearch from '../components/RepoFileSearch.vue';
 import {registerGlobalInitFunc} from '../modules/observer.ts';
 
 const threshold = 50;
@@ -69,7 +68,8 @@ export function filterRepoFilesWeighted(files: Array<string>, filter: string) {
 }
 
 export function initRepoFileSearch() {
-  registerGlobalInitFunc('initRepoFileSearch', (el) => {
+  registerGlobalInitFunc('initRepoFileSearch', async (el) => {
+    const {default: RepoFileSearch} = await import(/* webpackChunkName: "RepoFileSearch" */ '../components/RepoFileSearch.vue');
     createApp(RepoFileSearch, {
       repoLink: el.getAttribute('data-repo-link'),
       currentRefNameSubURL: el.getAttribute('data-current-ref-name-sub-url'),

web_src/js/features/repo-issue-pull.ts

@@ -1,5 +1,4 @@
 import {createApp} from 'vue';
-import PullRequestMergeForm from '../components/PullRequestMergeForm.vue';
 import {GET, POST} from '../modules/fetch.ts';
 import {fomanticQuery} from '../modules/fomantic/base.ts';
 import {createElementFromHTML} from '../utils/dom.ts';
@@ -63,10 +62,11 @@ function initRepoPullRequestCommitStatus(el: HTMLElement) {
   }
 }
 
-function initRepoPullRequestMergeForm(box: HTMLElement) {
+async function initRepoPullRequestMergeForm(box: HTMLElement) {
   const el = box.querySelector('#pull-request-merge-form');
   if (!el) return;
 
+  const {default: PullRequestMergeForm} = await import(/* webpackChunkName: "PullRequestMergeForm" */ '../components/PullRequestMergeForm.vue');
   const view = createApp(PullRequestMergeForm);
   view.mount(el);
 }