Cao Note

外观

Vite 进阶 ​

SSR（服务端渲染） ​

基本使用 ​

ts
// vite.config.ts
export default defineConfig({
  plugins: [vue()],
  build: {
    ssr: 'src/entry-server.ts',  // SSR 入口
  },
})
// vite.config.ts
export default defineConfig({
  plugins: [vue()],
  build: {
    ssr: 'src/entry-server.ts',  // SSR 入口
  },
})

在 Node 中使用 ​

ts
// server.js
import { createServer } from 'vite'

const vite = await createServer({
  server: { middlewareMode: true },
})

// 旧 API（Vite 6 前）
// const module = await vite.ssrLoadModule('/src/entry-server.ts')

// 新 API（Vite 6+ Environment API）
const runner = createServerModuleRunner(vite.environments.ssr)
const module = await runner.import('/src/entry-server.ts')
// server.js
import { createServer } from 'vite'

const vite = await createServer({
  server: { middlewareMode: true },
})

// 旧 API（Vite 6 前）
// const module = await vite.ssrLoadModule('/src/entry-server.ts')

// 新 API（Vite 6+ Environment API）
const runner = createServerModuleRunner(vite.environments.ssr)
const module = await runner.import('/src/entry-server.ts')

常用 SSR 插件 ​

插件说明
vite-plugin-ssr框架无关的 SSR 方案
@ssrx/vite支持路由级代码分割 + HMR
@vitejs/plugin-vue SSRVue 官方 SSR 支持

Vite 8 + Rolldown（2026） ​

2026 年 3 月发布的 Vite 8 是重大架构更新。

核心变化 ​

Vite 1-7:        源码 → esbuild(dev) + Rollup(prod)
Vite 8:        源码 → Rolldown(Rust, 统一引擎)
Vite 1-7:        源码 → esbuild(dev) + Rollup(prod)
Vite 8:        源码 → Rolldown(Rust, 统一引擎)

Rolldown 由 VoidZero 用 Rust 编写，彻底取代了双引擎架构。

性能提升 ​

场景Vite 7（Rollup）Vite 8（Rolldown）提升
冷启动构建72.4s3.1s23×
热启动构建18.6s1.4s13×
首次启动服务21.3s1.9s11×
HMR（单组件）320ms62ms5×
安装体积~50 MB~18 MB64%↓

迁移要点 ​

  1. Node 版本：需 >=20.19.0 或 >=22.12.0
  2. 配置重命名：
    • build.rollupOptions → build.rolldownOptions
    • worker.rollupOptions → worker.rolldownOptions
  3. SSR 迁移：ssrLoadModule() → ModuleRunner API
  4. 插件兼容：99%+ Rollup 插件兼容，但 hot.accept(new URL(...)) 不再支持
  5. 移除 Babel：@vitejs/plugin-react v6 默认使用 Oxc
ts
// Vite 8 配置示例
export default defineConfig({
  build: {
    rolldownOptions: {
      output: {
        manualChunks: {
          'react-vendor': ['react', 'react-dom'],
        },
      },
    },
    // CSS 默认使用 Lightning CSS
    cssMinify: 'lightningcss',
    // 默认使用 Oxc 压缩
    minify: 'oxc',
  },
  // TS 路径别名原生支持
  resolve: {
    tsconfigPaths: true,
  },
})
// Vite 8 配置示例
export default defineConfig({
  build: {
    rolldownOptions: {
      output: {
        manualChunks: {
          'react-vendor': ['react', 'react-dom'],
        },
      },
    },
    // CSS 默认使用 Lightning CSS
    cssMinify: 'lightningcss',
    // 默认使用 Oxc 压缩
    minify: 'oxc',
  },
  // TS 路径别名原生支持
  resolve: {
    tsconfigPaths: true,
  },
})

Vite 7 到 Vite 8 迁移检查清单 ​

  • [ ] 更新 Node.js 到 20.19+ 或 22.12+
  • [ ] 重命名 build.rollupOptions → build.rolldownOptions
  • [ ] 更新 SSR 代码（Environment API）
  • [ ] 重新生成 lockfile
  • [ ] 检查插件兼容性
  • [ ] 修复 hot.accept 中的 URL 用法
  • [ ] 部署到预发环境观察 24 小时

Vite+ Alpha（2026） ​

Vite+ 是 VoidZero 推出的统一工具链，将 Vite、Vitest、Oxlint、Oxfmt、Rolldown、tsdown 整合为单一 CLI 命令 vp。

bash
vp dev      # 启动开发服务器
vp build    # 构建
vp test     # 运行测试（Vitest）
vp lint     # 代码检查（Oxlint）
vp format   # 格式化（Oxfmt）
vp dev      # 启动开发服务器
vp build    # 构建
vp test     # 运行测试（Vitest）
vp lint     # 代码检查（Oxlint）
vp format   # 格式化（Oxfmt）

类似 Rust 的 cargo 或 Go 的 go tool，提供一站式的开发体验。

生态工具 ​

Vitest ​

基于 Vite 的测试框架，与 Vite 共享配置和插件：

ts
// vitest.config.ts
import { defineConfig } from 'vitest/config'

export default defineConfig({
  test: {
    globals: true,
    environment: 'jsdom',
  },
})
// vitest.config.ts
import { defineConfig } from 'vitest/config'

export default defineConfig({
  test: {
    globals: true,
    environment: 'jsdom',
  },
})

构建工具对比 ​

工具ViteWebpackTurbopack
语言JS+Go(Rust)JSRust
冷启动~1s~10s~2s
HMR<100ms~1s~100ms
生产构建Rolldown(Rust)Terser(JS)待完善
配置简洁繁重极简
生态好（兼容 Rollup）最好初期

常见问题 ​

1. 静态资源处理 ​

ts
// 显式导入
import imgUrl from './image.png'  // 返回 URL
import imgUrl from './image.png?url'
import raw from './file.txt?raw'  // 返回字符串
import worker from './worker?worker'  // Web Worker
// 显式导入
import imgUrl from './image.png'  // 返回 URL
import imgUrl from './image.png?url'
import raw from './file.txt?raw'  // 返回字符串
import worker from './worker?worker'  // Web Worker

2. TypeScript 路径别名 ​

json
// tsconfig.json
{
  "compilerOptions": {
    "paths": {
      "@/*": ["./src/*"]
    }
  }
}
// tsconfig.json
{
  "compilerOptions": {
    "paths": {
      "@/*": ["./src/*"]
    }
  }
}
ts
// vite.config.ts — Vite 7 需要额外插件
// vite-tsconfig-paths

// Vite 8 原生支持
resolve: {
  tsconfigPaths: true,
}
// vite.config.ts — Vite 7 需要额外插件
// vite-tsconfig-paths

// Vite 8 原生支持
resolve: {
  tsconfigPaths: true,
}

3. 全局变量 ​

ts
// 不使用 define
define: {
  __APP_VERSION__: JSON.stringify('1.0.0'),
}
// 不使用 define
define: {
  __APP_VERSION__: JSON.stringify('1.0.0'),
}

4. 环境变量类型提示 ​

ts
// src/env.d.ts
/// <reference types="vite/client" />

interface ImportMetaEnv {
  readonly VITE_API_URL: string
  readonly VITE_PUBLIC_PATH: string
}

interface ImportMeta {
  readonly env: ImportMetaEnv
}
// src/env.d.ts
/// <reference types="vite/client" />

interface ImportMetaEnv {
  readonly VITE_API_URL: string
  readonly VITE_PUBLIC_PATH: string
}

interface ImportMeta {
  readonly env: ImportMetaEnv
}

Copyright © 2024-present xiaocao