feat: optimize bundle size

Author: TrueRou

app/components/widget/dx-rating.vue

@@ -18,8 +18,8 @@ const ratingLevels: any = [
 
 const canvasRef = ref<HTMLCanvasElement | null>(null)
 
-const getNum = (id: string) => new URL(`../../assets/icons/rating/num/UI_CMN_Num_26p_${id}.png`, import.meta.url).href
-const getBase = (id: string) => new URL(`../../assets/icons/rating/UI_CMA_Rating_Base_${id}.png`, import.meta.url).href
+const getNum = async (id: string) => (await import(`../../assets/icons/rating/num/UI_CMN_Num_26p_${id}.png`)).default
+const getBase = async (id: string) => (await import(`../../assets/icons/rating/UI_CMA_Rating_Base_${id}.png`)).default
 
 function countOccurrences(str: string, searchTerm: string) {
     let count = 0
@@ -31,20 +31,19 @@ function countOccurrences(str: string, searchTerm: string) {
     return count
 }
 
-const numImages = computed(() => {
+const numImageIds = computed(() => {
     const numValue = props.rating?.replace(/\+/g, '').replace(/-/g, '')
     if (!numValue || Number.isNaN(Number(numValue)))
         return []
     const arr = numValue.split('')
     while (arr.length < 5) arr.unshift('10')
-    const finalValue = arr.map(num => getNum(num))
-    return finalValue.slice(0, 5)
+    return arr.slice(0, 5)
 })
 
-const baseImage = computed(() => {
+const baseImageId = computed(() => {
     const numValue = props.rating?.replace(/\+/g, '').replace(/-/g, '')
     if (!numValue || Number.isNaN(Number(numValue)))
-        return getBase('0')
+        return '0'
     let rating = Number.parseInt(numValue)
     rating = Math.max(ratingLevels[0], Math.min(rating, ratingLevels[9]))
     let stage = 0
@@ -53,7 +52,7 @@ const baseImage = computed(() => {
     const sideEffect = countOccurrences(props.rating || '', '+') - countOccurrences(props.rating || '', '-')
     const finalValue = Math.max(Math.min(stage + 1 + sideEffect, 10), 0)
 
-    return getBase(String(finalValue))
+    return String(finalValue)
 })
 
 async function drawCanvas() {
@@ -68,14 +67,19 @@ async function drawCanvas() {
 
     ctx.clearRect(0, 0, canvas.width, canvas.height)
 
+    const [baseSrc, numSrcs] = await Promise.all([
+        getBase(baseImageId.value),
+        Promise.all(numImageIds.value.map(id => getNum(id))),
+    ])
+
     const baseImg = new Image()
     baseImg.fetchPriority = 'high'
-    baseImg.src = baseImage.value
+    baseImg.src = baseSrc
 
     baseImg.onload = () => {
         ctx.drawImage(baseImg, 0, 0, canvas.width, canvas.height)
 
-        const numImgPromises = numImages.value.map((src) => {
+        const numImgPromises = numSrcs.map((src) => {
             const img = new Image()
             img.fetchPriority = 'high'
             img.src = src
@@ -96,7 +100,7 @@ async function drawCanvas() {
 }
 
 onMounted(drawCanvas)
-watch([() => props.rating, baseImage, numImages], drawCanvas)
+watch([() => props.rating, baseImageId, numImageIds], drawCanvas)
 </script>
 
 <template>

app/composables/useTour.ts

@@ -11,8 +11,9 @@ export function useTour(updateCallback: () => void = () => {}) {
     /**
      * 启动主页引导（第一阶段）
      */
-    function startMainPageTour() {
-        const intro = nuxtApp.$intro.tour()
+    async function startMainPageTour() {
+        const introJs = await nuxtApp.$getIntro()
+        const intro = introJs.tour()
         inTour.value = true
 
         intro.setOptions({
@@ -76,8 +77,9 @@ export function useTour(updateCallback: () => void = () => {}) {
     /**
      * 启动设置页引导（第二阶段）
      */
-    function startPreferenceTour() {
-        const intro = nuxtApp.$intro.tour()
+    async function startPreferenceTour() {
+        const introJs = await nuxtApp.$getIntro()
+        const intro = introJs.tour()
 
         intro.setOptions({
             steps: [

app/plugins/intro.client.ts

@@ -1,9 +1,17 @@
-import introJs from 'intro.js'
-
 export default defineNuxtPlugin(() => {
+    let introPromise: Promise<typeof import('intro.js').default> | null = null
+
+    async function getIntro() {
+        if (!introPromise) {
+            await import('intro.js/introjs.css')
+            introPromise = import('intro.js').then(mod => mod.default)
+        }
+        return introPromise
+    }
+
     return {
         provide: {
-            intro: introJs,
+            getIntro,
         },
     }
 })

nuxt.config.ts

@@ -3,9 +3,17 @@ import tailwindcss from '@tailwindcss/vite'
 
 export default defineNuxtConfig({
     compatibilityDate: '2025-07-15',
-    devtools: { enabled: true },
+    devtools: { enabled: process.env.NODE_ENV === 'development' },
     modules: ['@pinia/nuxt', '@nuxtjs/i18n', '@nuxt/eslint', 'nuxt-auth-utils'],
-    css: ['~/assets/css/main.css', 'intro.js/introjs.css'],
+    css: ['~/assets/css/main.css'],
+    app: {
+        head: {
+            link: [
+                { rel: 'dns-prefetch', href: 'https://cdn.assets.turou.fun' },
+                { rel: 'preconnect', href: 'https://cdn.assets.turou.fun', crossorigin: '' },
+            ],
+        },
+    },
     vite: {
         plugins: [
             tailwindcss(),