Glittering's blog

Appearance

🎯 目录（从入门到精通你会学到什么） ​

  1. Vite 是什么 & 为什么这么快
  2. 快速上手（创建项目、目录结构、基本配置）
  3. index.html 作为入口的机制
  4. 开发模式原理：No-Bundle + ESM 实现
  5. 构建模式原理：Rollup 打包优化
  6. 常用配置详解（vite.config.ts 全讲透）
  7. Vite 插件体系（如何写插件）
  8. Vite + Vue / React / TS / JSX
  9. 静态资源、别名、环境变量、跨域等实战
  10. 性能优化（开发与生产）
  11. Vite 源码精读路径（真正精通）

🎉 1. Vite 是什么？ ​

Vite 是一个前端构建工具，由尤雨溪（Vue 作者）开发。

核心特性：

功能ViteWebpack
开发启动秒开（No-Bundle）慢
HMR 热更新极速（按模块更新）需要重新构建部分 bundle
构建RollupWebpack 自己打包
配置复杂度简单复杂

一句话：开发速度行业最快、构建质量也最高。

🚀 2. 快速上手 ​

✔ 创建项目 ​

bash
npm create vite@latest

选择框架，例如 Vue / React。

✔ 安装依赖 ​

bash
npm install

✔ 启动开发服务器 ​

bash
npm run dev

会看到：

Local: http://localhost:5173/

✔ 生产构建 ​

bash
npm run build

📁 3. 项目结构说明 ​

project/
 ├── index.html ← 最独特的地方，入口文件
 ├── src/
 │    ├── main.ts
 │    ├── App.vue
 └── vite.config.ts

index.html 直接控制入口脚本：

html
<script type="module" src="/src/main.ts"></script>

与 Webpack 不同： Vite 以 index.html 为中心，而不是打包入口文件。

⚙️ 4. Vite 开发模式原理（核心） ​

⭐ 原因一：不打包开发代码 ​

Webpack：

打包 → 输出 bundle → 浏览器加载

Vite：

浏览器遇到 import → Vite 返回对应文件

利用浏览器原生 ESM：

js
import { createApp } from './src/main.js'

浏览器自动请求环境：

/src/main.js

Vite 对文件做最基本的解析（Vue、TS、React、CSS 等），但 不打包。

结果：启动速度与项目大小无关 → 秒开 ​

⭐ 原因二：超快 HMR ​

更新一个文件 → 只重新加载该文件，而不是整个 bundle。

Vue 单文件组件更新基本在毫秒级。

🏗 5. Vite 构建模式原理（Rollup） ​

生产构建时：

  • Tree Shaking
  • 代码分割
  • CSS 提取
  • Chunk 拆分
  • 压缩 Minify
  • Assets 处理

全部委托给 Rollup 完成（行业最好的优化 bundler）。

🔧 6. Vite 配置文件详解（vite.config.ts） ​

最基本：

ts
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

export default defineConfig({
  plugins: [vue()],
})

下面是从初级到高级的配置点。

✅ 常用配置点 ​

1. 别名 alias ​

ts
resolve: {
  alias: {
    '@': '/src'
  }
}

2. 环境变量 ​

新增 .env.development / .env.production：

VITE_API_URL=https://xxx.com

使用：

js
import.meta.env.VITE_API_URL

3. 服务器代理（解决跨域） ​

ts
server: {
  proxy: {
    '/api': {
      target: 'https://backend.com',
      changeOrigin: true,
      rewrite: p => p.replace(/^\/api/, '')
    }
  }
}

4. 静态资源 ​

放在 public/ 根目录下，不会被打包、直接原样复制。

5. CSS 与预处理器 ​

支持：

ts
css: {
  preprocessorOptions: {
    scss: {
      additionalData: `@import "@/styles/global.scss";`
    }
  }
}

6. 构建优化 ​

ts
build: {
  sourcemap: false,
  minify: 'esbuild',
  rollupOptions: {
    output: {
      manualChunks: {
        vendor: ['vue']
      }
    }
  }
}

🔌 7. Vite 插件体系（从入门到会写） ​

插件遵循 Rollup 规范 + Vite 专属 Hook。

最简单插件 ​

ts
export default function MyPlugin() {
  return {
    name: "my-plugin",
    transform(code, id) {
      if (id.endsWith('.js')) {
        return code.replace('hello', 'hi')
      }
    }
  }
}

插件能力包括： ​

  • transform（编译代码）
  • load（加载文件）
  • resolveId（自定义路径）
  • handleHotUpdate（HMR）
  • configureServer（中间件）

Vite 可以写出：

  • 自动 import 插件
  • Mock 服务插件
  • 单文件组件 loader
  • 自定义后端代理

🧩 8. Vite + 各框架 ​

Vue ​

ts
plugins: [vue()]

React（SWC 支持） ​

ts
plugins: [react()]

TypeScript ​

零配置支持 TS。

JSX ​

自动转换，无需额外配置。

🧪 9. 常见实战场景 ​

① 多页面应用 ​

ts
build: {
  rollupOptions: {
    input: {
      main: 'index.html',
      admin: 'admin.html'
    }
  }
}

② Mock 数据 ​

插件 + middleware 实现。

③ 大型项目拆包优化 ​

使用 manualChunks 或 dynamic import()。

🚀 10. 性能优化 ​

开发环境 ​

  • 禁用多余插件
  • 将大型依赖预构建（optimizeDeps）
ts
optimizeDeps: {
  include: ['lodash-es']
}

生产环境 ​

  • gzip / brotli 压缩
  • 多核心打包（使用 esbuild）
  • 精准分包（manualChunks）
  • CDN 加速

🧠 11. 精通后：Vite 源码学习路线 ​

想真正“精通”，需要理解 Vite 的源码结构（非常干净易读）。

建议阅读顺序：

1. CLI 启动流程 ​

packages/vite/src/node/cli.ts

2. 开发服务器核心 ​

packages/vite/src/node/server/index.ts

3. 模块解析与依赖预构建 ​

optimizer/ 目录

4. HMR 实现 ​

server/hmr.ts

5. 插件机制 ​

plugins/ 目录 pluginContainer.ts

6. Rollup 构建整合 ​

build.ts

你理解这些之后，就真正达到了 Vite “精通”。

Copyright © 2026