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>
This commit is contained in:
@@ -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);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user