feat: preload ImportsFile, reduce subsequent loading times by more th…

…an 50%

src/Header.vue

@@ -1,14 +1,20 @@
 <script setup lang="ts">
+import { onBeforeMount } from 'vue'
 import Sun from './icons/Sun.vue'
 import Moon from './icons/Moon.vue'
 import Share from './icons/Share.vue'
 import Download from './icons/Download.vue'
 import GitHub from './icons/GitHub.vue'
 import NpmVersionSwitch from './components/npm-version-switch/index.vue'
 import { npmVersionSwitchList } from './components/npm-version-switch/helps'
+import { preFetchImportsFile } from './config'
 
 const { store } = defineProps(['store'])
 
+onBeforeMount(() => {
+  preFetchImportsFile(store.getImportMap().imports)
+})
+
 async function copyLink () {
   await navigator.clipboard.writeText(location.href)
   alert('Sharable URL has been copied to clipboard.')

src/config.ts

@@ -15,6 +15,8 @@ export const getVueRuntimeURL = (version: string) => `${DEFAULT_CDN}/@vue/runtim
 /** get vue compiler cdn url buy version */
 export const getVueCompilerURL = (version: string) => `${DEFAULT_CDN}/@vue/compiler-sfc@${version}/dist/compiler-sfc.esm-browser.js`
 
+export const vantCss = `${DEFAULT_CDN}/vant/lib/index.css`
+
 /** get vant cdn url buy version */
 export const getVantURL = (version?: string) => {
   if (version) {
@@ -37,6 +39,22 @@ export const vantImports = {
 export const additionalImports = {
   ...vantImports
 }
+/**
+ * preload ImportsFile, reduce subsequent loading times by more than 50%
+ */
+export function preFetchImportsFile (imports?: Record<string, string>) {
+  const fragment = document.createDocumentFragment();
+  [...Object.values(imports || additionalImports), vantCss].forEach((src) => {
+    const isCss = src.endsWith('.css')
+    const usedLaterScript = document.createElement('link')
+    usedLaterScript.href = src
+    // preload
+    usedLaterScript.rel = 'modulepreload'
+    usedLaterScript.as = isCss ? 'style' : 'script'
+    fragment.appendChild(usedLaterScript)
+  })
+  document.head.appendChild(fragment)
+}
 
 export const welcomeCode = `\
 <script setup lang='ts'>
@@ -60,8 +78,6 @@ const msg = ref('Hello Vant!')
 </template>
 `
 
-export const vantCss = `${DEFAULT_CDN}/vant/lib/index.css`
-
 export const vantReplPluginCode = `\
 import { getCurrentInstance } from 'vue'