Glittering's blog
mamingjuan
2024-07-13
目录

vite从入门到精通

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

  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 作者）开发。

核心特性：

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

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

# 🚀 2. 快速上手

# ✔ 创建项目

npm create vite@latest
1

选择框架，例如 Vue / React。

# ✔ 安装依赖

npm install
1

# ✔ 启动开发服务器

npm run dev
1

会看到：

Local: http://localhost:5173/
1

# ✔ 生产构建

npm run build
1

# 📁 3. 项目结构说明

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

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

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

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

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

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

Webpack：

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

Vite：

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

利用浏览器原生 ESM：

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

浏览器自动请求环境：

/src/main.js
1

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

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

# ⭐ 原因二：超快 HMR

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

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

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

生产构建时：

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

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

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

最基本：

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

export default defineConfig({
  plugins: [vue()],
})
1
2
3
4
5
6

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

# ✅ 常用配置点

# 1. 别名 alias

resolve: {
  alias: {
    '@': '/src'
  }
}
1
2
3
4
5

# 2. 环境变量

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

VITE_API_URL=https://xxx.com
1

使用：

import.meta.env.VITE_API_URL
1

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

server: {
  proxy: {
    '/api': {
      target: 'https://backend.com',
      changeOrigin: true,
      rewrite: p => p.replace(/^\/api/, '')
    }
  }
}
1
2
3
4
5
6
7
8
9

# 4. 静态资源

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

# 5. CSS 与预处理器

支持：

css: {
  preprocessorOptions: {
    scss: {
      additionalData: `@import "@/styles/global.scss";`
    }
  }
}
1
2
3
4
5
6
7

# 6. 构建优化

build: {
  sourcemap: false,
  minify: 'esbuild',
  rollupOptions: {
    output: {
      manualChunks: {
        vendor: ['vue']
      }
    }
  }
}
1
2
3
4
5
6
7
8
9
10
11

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

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

# 最简单插件

export default function MyPlugin() {
  return {
    name: "my-plugin",
    transform(code, id) {
      if (id.endsWith('.js')) {
        return code.replace('hello', 'hi')
      }
    }
  }
}
1
2
3
4
5
6
7
8
9
10

# 插件能力包括：

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

Vite 可以写出：

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

# 🧩 8. Vite + 各框架

# Vue

plugins: [vue()]
1

# React（SWC 支持）

plugins: [react()]
1

# TypeScript

零配置支持 TS。

# JSX

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

# 🧪 9. 常见实战场景

# ① 多页面应用

build: {
  rollupOptions: {
    input: {
      main: 'index.html',
      admin: 'admin.html'
    }
  }
}
1
2
3
4
5
6
7
8

# ② Mock 数据

插件 + middleware 实现。

# ③ 大型项目拆包优化

使用 manualChunks 或 dynamic import()。

# 🚀 10. 性能优化

# 开发环境

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

# 生产环境

  • 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 “精通”。

上次更新: 2025/12/09, 03:15:37
vite插件

vite插件→

Copyright © 2015-2025 Glitz Ma