Vite 构建优化与部署

# 安装 rollup-plugin-visualizer
pnpm add -D rollup-plugin-visualizer

// vite.config.ts
import { visualizer } from 'rollup-plugin-visualizer'

export default defineConfig({
  plugins: [
    visualizer({
      filename: 'stats.html',
      open: true,
      gzipSize: true,
      brotliSize: true
    })
  ]
})

pnpm build  # 生成 stats.html 可视化报告

# 查看各 chunk 大小
vite build --mode production

# 输出示例：
# dist/assets/index-a1b2c3.js    142.56 kB │ gzip: 45.21 kB
# dist/assets/vendor-d4e5f6.js   289.34 kB │ gzip: 92.18 kB
# dist/assets/echarts-g7h8i9.js  812.45 kB │ gzip: 261.03 kB

// router/index.ts
const routes = [
  {
    path: '/',
    component: () => import('@/views/Home.vue')  // 独立 chunk
  },
  {
    path: '/dashboard',
    component: () => import('@/views/Dashboard.vue')
  },
  {
    path: '/settings',
    // webpackChunkName 注释在 Vite 中无效
    // 使用 rollup 的 manualChunks 或输出命名
    component: () => import('@/views/Settings.vue')
  }
]

export default defineConfig({
  build: {
    rollupOptions: {
      output: {
        manualChunks: {
          // 框架核心（极少变动 → 长期缓存）
          'framework': ['vue', 'vue-router', 'pinia'],

          // UI 组件库
          'ui': ['ant-design-vue', '@ant-design/icons-vue'],

          // 工具库
          'utils': ['lodash-es', 'dayjs', 'axios'],

          // 图表（体积大，按需加载）
          'charts': ['echarts', 'zrender']
        }
      }
    }
  }
})

pnpm add -D vite-plugin-imagemin

import viteImagemin from 'vite-plugin-imagemin'

export default defineConfig({
  plugins: [
    viteImagemin({
      gifsicle: { optimizationLevel: 3 },
      optipng: { optimizationLevel: 7 },
      mozjpeg: { quality: 80 },
      pngquant: { quality: [0.65, 0.8], speed: 4 },
      svgo: {
        plugins: [
          { name: 'removeViewBox', active: false },
          { name: 'removeEmptyAttrs', active: true }
        ]
      }
    })
  ]
})

pnpm add -D vite-plugin-fonts

import { VitePluginFonts } from 'vite-plugin-fonts'

export default defineConfig({
  plugins: [
    VitePluginFonts({
      custom: {
        families: [{
          name: 'MyFont',
          local: 'MyFont',
          src: './src/assets/fonts/*.woff2'
        }],
        display: 'swap',
        preload: true
      }
    })
  ]
})

export default defineConfig({
  build: {
    // esbuild 压缩（默认，速度最快）
    minify: 'esbuild',

    // 或改用 terser（压缩率略高，速度慢）
    // minify: 'terser',
    // terserOptions: {
    //   compress: {
    //     drop_console: true,      // 移除 console
    //     drop_debugger: true,     // 移除 debugger
    //     pure_funcs: ['console.log']  // 移除指定函数调用
    //   },
    //   format: {
    //     comments: false  // 移除注释
    //   }
    // }
  }
})

pnpm add vite-ssg

// src/main.ts
import { ViteSSG } from 'vite-ssg'
import App from './App.vue'

export const createApp = ViteSSG(App, { routes }, ({ app, router }) => {
  // 安装插件
})

pnpm add -D vite-plugin-ssr

pages/
├── index/
│   ├── +Page.vue
│   ├── +data.ts       ← 数据获取
│   └── +config.ts     ← 页面配置
└── about/
    └── +Page.vue

server {
    listen 80;
    server_name example.com;
    root /var/www/my-app/dist;
    index index.html;

    # 带 hash 的资源 → 强缓存
    location /assets/ {
        expires 1y;
        add_header Cache-Control "public, immutable";
    }

    # HTML → 协商缓存
    location / {
        try_files $uri $uri/ /index.html;
        add_header Cache-Control "no-cache";
    }

    # Gzip / Brotli
    gzip on;
    gzip_types text/plain application/javascript text/css application/json;
    gzip_min_length 1024;
}

{
  "buildCommand": "pnpm build",
  "outputDirectory": "dist",
  "framework": "vite",
  "rewrites": [
    { "source": "/(.*)", "destination": "/index.html" }
  ]
}

# 构建阶段
FROM node:20-alpine AS builder
WORKDIR /app
COPY package.json pnpm-lock.yaml ./
RUN corepack enable && pnpm install --frozen-lockfile
COPY . .
RUN pnpm build

# 运行阶段
FROM 11-Nginx基础概述:alpine
COPY --from=builder /app/dist /usr/share/11-Nginx基础概述/html
COPY 11-Nginx基础概述.conf /etc/11-Nginx基础概述/conf.d/default.conf
EXPOSE 80
CMD ["11-Nginx基础概述", "-g", "daemon off;"]

# 使用 --profile 生成 CPU profile
vite build --profile

# 用 Chrome DevTools → Performance → Load profile 分析

// 在入口文件注入 Web Vitals 采集
import { onCLS, onINP, onLCP, onFCP, onTTFB } from 'web-vitals'

function reportMetric(metric) {
  navigator.sendBeacon('/analytics', JSON.stringify({
    name: metric.name,
    value: metric.value,
    rating: metric.rating
  }))
}

onCLS(reportMetric)
onINP(reportMetric)
onLCP(reportMetric)
onFCP(reportMetric)
onTTFB(reportMetric)