减少 Vue 应用白屏时间的经验总结

npm install vite-plugin-prerender-spa --save-dev
\`\`\`

\`\`\`ts
// vite.config.ts
import prerender from 'vite-plugin-prerender-spa'

export default {
  plugins: [
    prerender({
      staticDir: 'dist',
      routes: ['/', '/about'] // 构建时生成 HTML
    })
  ]
}

// router/index.ts
import { createRouter, createWebHistory } from 'vue-router'

const Home = () => import('@/views/Home.vue')
const About = () => import('@/views/About.vue')

export default createRouter({
  history: createWebHistory(),
  routes: [
    { path: '/', component: Home },
    { path: '/about', component: About }
  ]
})

<template>
  <div v-if="loading" class="skeleton"></div>
  <HomePage v-else />
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'
import HomePage from './views/Home.vue'

const loading = ref(true)
onMounted(() => setTimeout(() => (loading.value = false), 1500))
</script>

<style>
.skeleton {
  height: 100vh;
  background: linear-gradient(90deg, #eee 25%, #ddd 50%, #eee 75%);
  background-size: 200% 100%;
  animation: shimmer 1.2s infinite;
}
@keyframes shimmer {
  0% { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}
</style>

<!-- 懒加载图片指令 -->
<img v-lazy="imgUrl" />

<script setup lang="ts">
import { onMounted } from 'vue'

const imgUrl = '/big-banner.jpg'
</script>

// main.ts
app.directive('lazy', {
  mounted(el, binding) {
    const observer = new IntersectionObserver(([entry]) => {
      if (entry.isIntersecting) {
        el.src = binding.value
        observer.disconnect()
      }
    })
    observer.observe(el)
  }
})

@font-face {
  font-family: 'MyFont';
  src: url('/fonts/my-font.woff2') format('woff2');
  font-display: swap;
}

onMounted(() => {
  requestIdleCallback(() => {
    import('echarts').then(echarts => {
      const chart = echarts.init(document.getElementById('chart')!)
      chart.setOption({ title: { text: '懒加载图表' } })
    })
  })
})

npm install vite-plugin-critical --save-dev

// vite.config.ts
import critical from 'vite-plugin-critical'

export default {
  plugins: [
    critical({
      criticalUrl: '',
      criticalBase: './dist/',
      criticalPages: [{ uri: '', template: 'index' }]
    })
  ]
}

npm install vite-plugin-compression --save-dev

// vite.config.ts
import compression from 'vite-plugin-compression'

export default {
  plugins: [compression({ algorithm: 'gzip' })]
}

<!-- index.html -->
<link rel="preload" href="/fonts/my-font.woff2" rel="external nofollow"  as="font" type="font/woff2" crossorigin />
<link rel="modulepreload" href="/assets/main.js" rel="external nofollow"  />