Vite 构建流水线：原生 ESM、HMR、转换与打包

> 视频入口：B站合集《前端全链路：从浏览器基础到现代生态》上传并核验后回填正式链接。 > 本文是 EP20 的博客深讲版，包含视频主线，但比视频补充更多机制、流程图、边界判断和排查清单。

Vite 构建流水线：原生 ESM、HMR、转换与打包技术流程图

这篇文章解决什么问题

这期解释 Vite 开发时为什么快，以及生产构建怎样从模块图输出可部署资源。

这一篇的中心问题可以概括成：Vite 如何用模块图同时服务开发反馈和生产构建？

关键词：Vite、ESM、HMR、bundle、dev server、native ESM、import、pre-bundle、dependency、module

视频主线回顾

1. 开发服务器

Vite 开发期利用浏览器原生 ESM 按需处理模块。

2. 依赖预构建和 HMR

预构建减少第三方依赖压力，HMR 缩短反馈路径。

3. 转换管线

TypeScript、CSS 和静态资源都会经过转换。

4. 生产构建

上线产物需要打包、压缩、分包和 hash。

技术流程图

先用一张图把本期内容串起来。它不是背诵路线，而是排查问题时可以顺着走的证据路线。

mermaid

flowchart TD
    s1["本期内容：Vite 把开发请求和生产构建分成两条路径"]
    s2["开发服务器：开发服务器用原生 ESM 按需服务源码"]
    s3["依赖预构建：依赖预构建把第三方包整理成更适合开发的形态"]
    s4["HMR：HMR 让变化模块就地更新"]
    s5["转换管线：转换管线处理 TypeScript、CSS 和静态资源"]
    s6["生产构建：生产构建输出可缓存、可部署的资源"]
    s7["整体总结：Vite 的核心是围绕模块图组织反馈和产物"]
    s1 --> s2
    s2 --> s3
    s3 --> s4
    s4 --> s5
    s5 --> s6
    s6 --> s7
    s7 --> check{"能否解释当前页面现象？"}
    check -->|能| action["记录证据并进入下一步"]
    check -.->|不能| back["回到上一层重新定位"]
    back -.-> s1

Vite 开发与生产两条路径

这张图把本期最关键的结构单独拎出来，适合在复习或做笔记时当作索引。

mermaid

flowchart TD
    source["源码入口"] --> mode{"运行模式"}
    mode -->|开发| dev["Dev Server"]
    dev --> prebundle["依赖预构建"]
    dev --> esm["按需 ESM 请求"]
    esm --> hmr["HMR 局部更新"]
    mode -->|生产| build["生产构建"]
    build --> transform["转换与插件管线"]
    transform --> bundle["Rollup 打包"]
    bundle --> assets["带 hash 的静态资源"]
    hmr --> feedback["快速反馈"]
    assets --> deploy["部署到 CDN / 静态服务"]

深入展开

1. Vite 把开发请求和生产构建分成两条路径

这一期看 Vite 构建流水线。我们会讲原生 ESM 开发服务器怎样按需返回模块，依赖预构建为什么能加速启动，HMR 如何只更新变化模块，转换管线怎样处理 TypeScript、CSS 和资源，以及生产构建为什么还要打包、压缩和代码分割。

这里可以多看一层：先找输入，再看处理过程，最后确认输出。前端很多问题之所以绕，是因为现象出现在页面上，原因却可能藏在网络、样式计算、运行时或构建结果里。

mermaid

flowchart LR
    v1["dev server：按需模块请求"]
    v2["transform：转换源码"]
    v3["HMR：热更新变化"]
    v4["build：输出生产资源"]
    v1 --> v2
    v2 --> v3
    v3 --> v4