Vite 核心原理：ESM 带来的开发时“瞬移”体验

wuhen_n
26 阅读6分钟

前言

还记得用Webpack开发时的日常吗？ 控制台输入 npm run dev ，等待 30 秒后项目终于启动了 ；过了一会儿，修改了一个文件，保存，等待 10 秒之后热更新完成；后来项目变大了，每次保存要等 20 秒以上...

这是 Webpack 时代的真实写照，而 Vite 的出现，彻底改变了这一切： 控制台输入 npm run dev ，1 秒后项目就启动了；修改了一个文件，保存，50ms 页面就更新了。

Vite是怎么做到的？ 它不是魔法，而是巧妙地利用了现代浏览器的原生能力。本文将从最基础的概念讲起，带领我们一步步理解 Vite 的核心原理。

为什么传统构建工具这么慢？

Webpack的工作方式

Webpack 就像我们去参加宴席，必须要等酒店把所有的菜品都准备好，再一次性全部端上来；如果有一道菜没做好，我们就全部得等着：

Webpack的打包过程：
1. 找到入口文件 (main.js)
2. 解析import语句，找出所有依赖
3. 递归解析所有依赖的依赖
4. 把所有文件打包成一个bundle.js
5. 启动开发服务器
6. 浏览器加载bundle.js

随着项目越大，依赖越多，打包就会越慢。

为什么Webpack会越来越慢？

假如我们有这样一个项目结构：

project
├── vue (100个文件)
├── vue-router (50个文件)
├── pinia (30个文件)
├── element-plus (500个文件)
├── 你自己的组件 (200个文件)
└── 各种第三方库 (300个文件)

Webpack 启动时要处理 1180 个文件，并全部打包成一个文件，才能启动开发服务器。

ESM 基础：现代浏览器的模块系统

什么是ES Module？

在 ES Module 出现之前，我们是这样引入 JavaScript 的：

<!-- 老方式：必须按顺序，否则报错 -->
<script src="jquery.js"></script>
<script src="lodash.js"></script>
<script src="app.js"></script>

有了 ES Module 之后，我们可以这样写：

<script type="module">
  // 浏览器会自动加载这些依赖
  import $ from 'https://unpkg.com/jquery'
  import _ from 'https://unpkg.com/lodash'
  import app from './app.js'
</script>

浏览器如何加载ES Module？

// main.js
import { createApp } from 'vue'
import App from './App.vue'
import router from './router'

createApp(App).use(router).mount('#app')

当浏览器遇到这个脚本时，会进行以下操作：

第1步：下载 main.js
     ↓
第2步：解析 main.js，发现需要 vue、App.vue、router
     ↓
第3步：同时下载 vue、App.vue、router (并行下载)
     ↓
第4步：解析 router.js，发现新的依赖
     ↓
第5步：继续下载新的依赖
     ↓
直到所有依赖都加载完成

而且，浏览器可以并行下载多个文件，互不影响。

ESM的核心特性

特性1：静态导入（编译时确定依赖）

import { ref } from 'vue'  // 打包工具可以静态分析

特性2：动态导入（运行时加载）

if (user.isAdmin) {
  const adminPanel = await import('./AdminPanel.vue')
  // 只有在需要时才加载
}

特性3：模块作用域

// a.js
const name = 'module-a'
export { name }

// b.js
const name = 'module-b'  // 同名变量，互不干扰
export { name }

Vite 的核心思想 - 让浏览器做它擅长的事

Vite 的开发服务器

Vite 的开发服务器做了什么？

// 简化的Vite服务器
class ViteDevServer {
  constructor() {
    this.app = require('koa')()  // HTTP服务器
    this.watcher = require('chokidar').watch('src')  // 文件监听
  }
  
  async start() {
    // 1. 启动HTTP服务器
    this.app.listen(3000)
    
    // 2. 注册中间件
    this.app.use(this.transformMiddleware())
    
    // 3. 开始监听文件变化
    this.watcher.on('change', this.handleFileChange.bind(this))
  }
  
  // 处理文件请求
  async transformMiddleware(ctx, next) {
    if (ctx.path.endsWith('.vue')) {
      // 当浏览器请求 .vue 文件时，才进行编译
      const code = await compileVueFile(ctx.path)
      ctx.body = code
    }
  }
}

Vite的启动流程

传统方式（Webpack）：
启动 → 打包所有文件 → 启动服务器 → 浏览器请求 → 返回打包后的文件

Vite方式：
启动 → 启动服务器 → 浏览器请求 → 按需编译 → 返回单个文件

还是用餐厅来比喻：

  • Webpack：客人来之前做好所有菜；如果菜没做好，所有客人都得等着
  • Vite：客人点一道，做一道；做好一道，上一道

一个完整的请求流程

假设我们的项目结构是这样的：

src/
├── main.js
├── App.vue
└── components/
    └── HelloWorld.vue

浏览器访问页面的过程如下：

// 第1步：浏览器请求 index.html
GET /index.html

// index.html 内容
<!DOCTYPE html>
<html>
  <head>
    <script type="module" src="/src/main.js"></script>
  </head>
</html>

// 第2步：浏览器发现需要 main.js
GET /src/main.js

// main.js 内容
import { createApp } from 'vue'
import App from './App.vue'
createApp(App).mount('#app')

// 第3步：浏览器发现需要 vue 和 App.vue
GET /@modules/vue  // Vite 特殊处理
GET /src/App.vue

// 第4步：App.vue 中又引用了 HelloWorld.vue
GET /src/components/HelloWorld.vue

// 第5步：全部加载完成，页面显示

依赖预构建 - 解决性能瓶颈

如果没有预构建，会有什么问题？

问题1：CommonJS 模块无法在浏览器直接运行

import _ from 'lodash'  // lodash 是 CommonJS 格式，浏览器不认识

问题2：大量小文件请求

import { debounce } from 'lodash-es'
// lodash-es 有 600 多个文件！
// 浏览器要发 600 多个请求！

问题3：深度嵌套的依赖

import A from 'package-a'
// package-a 依赖 package-b
// package-b 依赖 package-c
// 每个包都要单独请求

预构建做了什么？

  1. 扫描项目中的所有 import
  2. 找出第三方依赖（不是相对路径的）
  3. 用 esbuild 打包成单个文件
  4. 存到 node_modules/.vite/
  5. 下次直接使用打包后的文件

esbuild 为什么这么快？

  1. 用 Go 语言写的（直接编译成机器码）
  2. 充分利用 CPU 多核
  3. 一切从零设计，没有历史包袱
  4. 高度并行化

热更新 - 瞬间响应的秘密

热更新模式

修改代码 → 页面自动更新 → 状态保持不变 → 继续工作

热更新的工作原理

我们修改了一个文件
    ↓
Vite 监听到文件变化
    ↓
重新编译这个文件
    ↓
通过 WebSocket 通知浏览器
    ↓
浏览器请求更新的文件
    ↓
执行热更新回调
    ↓
页面局部更新，状态保留

WebSocket 通信

// 服务器端
class HMRServer {
  constructor(server) {
    // 创建 WebSocket 服务
    this.ws = new WebSocket.Server({ server })
    
    // 所有连接的客户端
    this.clients = new Set()
    
    this.ws.on('connection', (socket) => {
      this.clients.add(socket)
      
      socket.on('close', () => {
        this.clients.delete(socket)
      })
    })
  }
  
  // 文件变化时通知所有客户端
  sendUpdate(file) {
    const message = JSON.stringify({
      type: 'update',
      file: file,
      timestamp: Date.now()
    })
    
    this.clients.forEach(client => {
      client.send(message)
    })
  }
}

// 浏览器端
const socket = new WebSocket(`ws://${location.host}`)

socket.onmessage = async ({ data }) => {
  const { type, file, timestamp } = JSON.parse(data)
  
  if (type === 'update') {
    // 重新加载修改的文件
    const module = await import(`${file}?t=${timestamp}`)
    
    // 执行热更新
    if (import.meta.hot) {
      import.meta.hot.accept(file, module)
    }
  }
}

Vue 组件的热更新

// Vue 组件的热更新实现
if (import.meta.hot) {
  import.meta.hot.accept((newModule) => {
    // 更新组件
    const { render, data } = newModule
    
    // 保留当前组件的状态
    const oldData = instance.data
    
    // 应用新的渲染函数
    instance.render = render
    
    // 重新渲染
    instance.update()
  })
}

插件系统：Vite 的扩展能力

插件的工作流程

请求进入
    ↓
resolveId(解析模块 ID)
    ↓
load(加载模块内容)
    ↓
transform(转换代码)
    ↓
返回给浏览器

插件的钩子函数

// 一个完整的 Vite 插件
const myPlugin = {
  name: 'vite:my-plugin',
  
  // 构建阶段钩子
  options(options) {
    // 修改或扩展配置
    return options
  },
  
  buildStart() {
    // 构建开始时调用
    console.log('构建开始')
  },
  
  // 解析模块 ID
  resolveId(source, importer) {
    if (source === 'virtual-module') {
      return '\0virtual-module' // \0 标记为虚拟模块
    }
  },
  
  // 加载模块
  load(id) {
    if (id === '\0virtual-module') {
      return 'export default "virtual module content"'
    }
  },
  
  // 转换代码
  async transform(code, id) {
    if (id.endsWith('.special')) {
      // 转换特殊文件格式
      const result = await compileSpecial(code)
      return {
        code: result.js,
        map: result.sourcemap
      }
    }
  },
  
  // 配置解析完成后
  configResolved(config) {
    console.log('配置已解析', config)
  },
  
  // 热更新处理
  handleHotUpdate(ctx) {
    // 自定义热更新逻辑
  },
  
  // 构建结束
  buildEnd() {
    console.log('构建结束')
  },
  
  // 关闭服务
  closeBundle() {
    console.log('服务关闭')
  }
}

常用插件示例

// 环境变量注入插件
function injectEnvPlugin(env: Record<string, string>) {
  return {
    name: 'vite:inject-env',
    
    transform(code, id) {
      if (id.includes('node_modules')) return
      
      // 替换环境变量
      return code.replace(
        /import\.meta\.env\.(\w+)/g,
        (_, key) => JSON.stringify(env[key])
      )
    }
  }
}

// 文件大小监控插件
function sizeMonitorPlugin() {
  return {
    name: 'vite:size-monitor',
    
    generateBundle(_, bundle) {
      Object.entries(bundle).forEach(([name, asset]) => {
        if (asset.type === 'chunk') {
          const size = asset.code.length
          const kb = (size / 1024).toFixed(2)
          
          if (size > 100 * 1024) {
            console.warn(`⚠️ 大文件警告: ${name} (${kb}KB)`)
          } else {
            console.log(`✅ ${name}: ${kb}KB`)
          }
        }
      })
    }
  }
}

Vite vs Webpack

启动时间对比

项目规模WebpackVite差距
小项目（50组件）8.5秒1.2秒Vite快7倍
中项目（200组件）22秒2.1秒Vite快10倍
大项目（1000组件）58秒3.8秒Vite快15倍

热更新时间对比

操作WebpackVite差距
修改一个组件2.8秒45msVite快62倍
修改CSS1.5秒8msVite快187倍
保存后恢复3.1秒60msVite快52倍

资源消耗对比

指标WebpackVite差距
CPU占用45%18%降低60%
内存占用1.8GB420MB降低77%
电池消耗快慢延长2-3倍

常见问题与优化技巧

问题一：依赖预构建失效

修改了 node_modules 里的代码，但是不生效：

解决方案1：强制重新预构建

// vite.config.ts
export default {
  optimizeDeps: {
    // 强制重新预构建
    force: true
  }
}

解决方案2：删除缓存目录

$ rm -rf node_modules/.vite

解决方案3：重启开发服务器

npm run dev

问题二：热更新不生效

修改了文件，但页面不更新，可以按以下步骤排查：

步骤1：检查 WebSocket 连接

打开浏览器控制台，看是否有 WebSocket 连接。

步骤2：检查文件监听配置

export default {
  server: {
    watch: {
      // 确保没有忽略我们的文件
      ignored: ['!**/node_modules/**']
    }
  }
}

步骤3：手动触发更新

if (import.meta.hot) {
  import.meta.hot.accept()
}

问题三：首次加载慢

第一次打开页面要等很久。

解决方案：预加载关键路由

export default {
  optimizeDeps: {
    include: [
      // 预构建这些依赖
      'vue',
      'vue-router',
      'pinia',
      // 你的常用组件
      'src/components/Button.vue',
      'src/components/Modal.vue'
    ]
  }
}

问题四：内存占用过高

// vite.config.ts
export default {
  server: {
    // 限制缓存大小
    moduleCache: {
      maxSize: 100 * 1024 * 1024 // 100MB
    },
    
    // 清理未使用的模块
    moduleGraph: {
      pruneInterval: 60000 // 每 60 秒清理一次
    }
  }
}

Vite 的最佳实践

Vite 配置文件模板

// vite.config.js
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import path from 'path'

export default defineConfig({
  // 插件
  plugins: [vue()],
  
  // 开发服务器配置
  server: {
    port: 3000,
    open: true,  // 自动打开浏览器
    proxy: {
      '/api': 'http://localhost:8080'  // 代理
    }
  },
  
  // 构建配置
  build: {
    target: 'es2020',
    outDir: 'dist',
    assetsDir: 'assets',
    sourcemap: true
  },
  
  // 依赖优化
  optimizeDeps: {
    include: ['vue', 'vue-router', 'pinia']
  },
  
  // 别名
  resolve: {
    alias: {
      '@': path.resolve(__dirname, 'src')
    }
  }
})

性能优化清单

  • 依赖预构建：配置 optimizeDeps.include 预构建常用依赖
  • 路由懒加载：使用动态 import() 分割代码
  • 图片优化：使用 vite-plugin-image-optimizer
  • CSS 提取：生产环境提取独立 CSS 文件
  • Gzip 压缩：使用 vite-plugin-compression

学习要点

  1. 理解 ESM 的核心特性：静态导入、模块作用域、浏览器加载机制
  2. 掌握依赖预构建的作用：解决 CommonJS 兼容性、减少请求数
  3. 熟悉热更新的工作流程：WebSocket 通信、模块边界、HMR API
  4. 学会编写 Vite 插件：钩子函数、虚拟模块、代码转换
  5. 能够诊断和优化性能问题：预构建失效、热更新慢、内存占用高

结语

Vite 的出现，标志着前端构建工具从打包时代进入了原生 ESM 时代。理解它的核心原理，不仅能让我们更高效地使用它，更能让我们对现代前端开发有更深的理解。

对于文章中错误的地方或有任何疑问，欢迎在评论区留言讨论！

avatar
文章
阅读
粉丝