Vite 到底在项目里干了什么？从 dev 到 build 全链路解析

// 你写的代码
import { ref } from 'vue'
import MyComponent from './MyComponent.vue'

// 浏览器实际请求的（Vite 转换后）
import { ref } from '/node_modules/.vite/deps/vue.js?v=abc123'
import MyComponent from '/src/MyComponent.vue?t=1710000000'

// 问题 1：CJS → ESM 转换
// lodash-es 是 ESM，没问题
// 但 lodash 是 CommonJS (module.exports)，浏览器不认识
// → esbuild 把 CJS 转成 ESM

// 问题 2：请求瀑布（request waterfall）
// lodash-es 包含 600+ 个小模块文件
// 如果浏览器逐个请求，光 HTTP 开销就受不了
// → esbuild 把 lodash-es 打包成一个文件

// HMR 更新流程
1. 你修改了 src/components/Button.vue
2. Vite 的文件监听器 (chokidar) 检测到变化
3. Vite 重新编译这 **一个** 文件（通常 < 10ms）
4. 通过 WebSocket 告诉浏览器：「Button.vue 变了」
5. 浏览器请求新版本的 Button.vue
6. Vue 的 HMR runtime 替换组件定义，保留组件状态

// 一个 .vue 文件会被拆分为：
/src/App.vue                   → script 部分
/src/App.vue?vue&type=template  → template 部分
/src/App.vue?vue&type=style     → style 部分

// 你只改了 CSS？只重新请求 style 虚拟模块
// 你只改了模板？只重新请求 template 虚拟模块
// 组件状态（ref 数据）保持不变

vite build 默认开启的优化：

1. Tree Shaking     → 删除没用到的代码（死代码消除）
2. Code Splitting   → 按路由自动拆分 chunk
3. CSS 提取         → 把 CSS 从 JS 中抽离成独立文件
4. 资源内联         → 小于 4KB 的图片自动转 base64
5. 预加载指令       → 自动注入 <link rel="modulepreload">
6. 压缩            → 默认用 esbuild 压缩 JS，速度极快
7. 哈希文件名       → assets/index-[hash].js 实现长期缓存

// Vite 插件的核心钩子

export default function myPlugin() {
  return {
    name: 'my-plugin',

    // Vite 特有：配置开发服务器
    configureServer(server) { ... },

    // Rollup 兼容：转换模块内容
    transform(code, id) {
      // 比如：自动把 .svg 转成 Vue 组件
      if (id.endsWith('.svg')) {
        return `export default \`${code}\``
      }
    },

    // Rollup 兼容：自定义模块解析
    resolveId(source) { ... },

    // Rollup 兼容：加载虚拟模块
    load(id) { ... },
  }
}