代码分割与 Bundle 优化

npx nuxi analyze

// nuxt.config.ts
export default defineNuxtConfig({
  vite: {
    build: {
      rollupOptions: {
        output: {
          manualChunks(id) {
            // Vue 核心生态单独打包（更新频率低，长期缓存）
            if (id.includes('node_modules/vue') ||
                id.includes('node_modules/@vue') ||
                id.includes('node_modules/vue-router')) {
              return 'vue-vendor'
            }
            // UI 框架单独打包
            if (id.includes('node_modules/@nuxt/ui') ||
                id.includes('node_modules/@headlessui')) {
              return 'ui-vendor'
            }
            // 工具库单独打包
            if (id.includes('node_modules/lodash-es') ||
                id.includes('node_modules/dayjs')) {
              return 'utils-vendor'
            }
          },
        },
      },
    },
  },
})

<template>
  <!-- Lazy 前缀：Nuxt 自动处理为异步组件 -->
  <LazyVideoPlayer v-if="showPlayer" :src="videoUrl" />
 
  <!-- 条件渲染：只有需要时才加载组件代码 -->
  <LazyRichTextEditor v-if="isEditing" v-model="content" />
</template>

// ❌ 静态导入：打入首屏 bundle
import ECharts from 'echarts'
 
// ✅ 动态导入：使用时才加载
async function renderChart(container: HTMLElement, data: any) {
  const { init } = await import('echarts')
  const chart = init(container)
  chart.setOption(data)
  return chart
}

// app/composables/useVideoPlayer.ts
export function useVideoPlayer() {
  const playerInstance = shallowRef<any>(null)
  const isLoading = ref(false)
 
  async function initPlayer(container: HTMLElement, options: PlayerOptions) {
    isLoading.value = true
    try {
      // 动态导入播放器 SDK
      const { default: Player } = await import('xgplayer')
      playerInstance.value = new Player({
        el: container,
        url: options.url,
        autoplay: false,
        ...options,
      })
    } finally {
      isLoading.value = false
    }
  }
 
  onBeforeUnmount(() => {
    playerInstance.value?.destroy()
  })
 
  return { playerInstance, isLoading, initPlayer }
}

<!-- pages/videos/[id].vue -->
<template>
  <div>
    <div ref="playerContainer" class="aspect-video bg-black">
      <div v-if="isLoading" class="flex items-center justify-center h-full">
        <span class="text-white">播放器加载中...</span>
      </div>
    </div>
  </div>
</template>
 
<script setup>
const playerContainer = ref<HTMLElement>()
const { isLoading, initPlayer } = useVideoPlayer()
 
onMounted(() => {
  if (playerContainer.value) {
    initPlayer(playerContainer.value, { url: video.value.url })
  }
})
</script>

// ❌ 导入整个 lodash（无法 tree-shake）
import _ from 'lodash'
_.debounce(fn, 300)
 
// ✅ 从 lodash-es 具名导入
import { debounce } from 'lodash-es'
debounce(fn, 300)
 
// ✅ 或直接导入子模块
import debounce from 'lodash/debounce'

// nuxt.config.ts
export default defineNuxtConfig({
  vite: {
    optimizeDeps: {
      include: ['some-cjs-lib'],  // 让 Vite 预构建为 ESM
    },
  },
})

// 这个导入有副作用（注册全局 polyfill），不会被 tree-shake
import 'core-js/stable'
 
// 如果只需要特定 polyfill，按需导入
import 'core-js/features/array/flat'

// nuxt.config.ts
export default defineNuxtConfig({
  experimental: {
    crossOriginPrefetch: true,  // 跨域预取
  },
  router: {
    options: {
      // 自动预取可见链接对应的页面 chunk
      // Nuxt 默认开启
    },
  },
})

// 鼠标悬停时预加载
function onHoverVideoCard(videoId: string) {
  preloadRouteComponents(`/videos/${videoId}`)
}