资源介绍：

随着前端技术的发展，构建工具所做的事情早已不仅仅是打包代码 那么简单，如今它已经贯穿了前端项目的整个生命周期，在前端工程化中占据了越来越核心的位置。而由于前端项目规模的日益庞大，传统的构建工具已经无法满足开发者们对 DX(Developer Experience，即开发者体验) 的要求。在使用传统工具的过程中，我们经常会遇到这样的问题:

漫长的项目启动时间。作为开发者，经常要等待几分钟的时间才能看到项目启动完成

漫长的热更新时间。热更新要花费数秒的时间，代码改动后反馈非常迟钝，而且随着项目规模越来越大，热更新也越来越慢

为了解决上述的问题，Vite 在一系列方案中脱颖而出。相比于传统的构建工具，Vite 项目启动时间能缩短 90% 以上，热更新能得到毫秒级的响应，给构建性能带来了一个量级的提升，极大地解决了大家的开发体验痛点。而回看社区，最近的 JavaScript 生态的年度调查结果也显示，Vite 的开发满意度超过 98%，成为整个前端社区中最受瞩目的技术

因此，如果你现在要学习构建工具，Vite 将会是一个更好的选择。但很多人在学习和应用 Vite 的过程中总会遇到下面的问题:

缺少系统化的学习资料，社区中绝大多数的文章仅仅只是教会你如何搭建一个简单的脚手架项目，不够系统和深入

不了解 Vite 相关的生态，遇到问题的时候不知道使用哪些插件或者解决方案

不熟悉 Esbuild、Rollup 这些底层构建引擎，遇到一些稍微需要定制的场景就感到捉襟见肘

不知道如何将 Vite 和其它前端工具结合，如 Babel、core-js

构建工具源码晦涩难懂，对更深一步的原理学习望而却步

…

在本课程中，我会给大家系统梳理 Vite 知识，并解决如上种种问题，带大家了解到前端工程的构建中究竟具备哪些知识和技能，不光是 Vite 本身的知识，也包括 Vite 底层所使用的 Esbuild、Rollup 双引擎、Babel 编译工具链、模块规范标准等一系列构建生态，从此掌握前端构建领域的第一性原理，完成从构建小白到高手的蜕变

课程目录

• 0 课程介绍
• 1 开篇 ：让 Vite 助力你的前端工程化之路
• 10 Vite 构建基石(上)——Rollup 打包基本概念及使用
• 11 Vite 构建基石(下)——深入理解 Rollup 的插件机制
• 12 插件开发与实战：如何开发一个完整的 Vite 插件？
• 13 HMR API 及原理：代码改动后，如何进行毫秒级别的局部更新？
• 14 代码分割：打包完产物体积太大，怎么拆包？
• 15 语法降级与Polyfill：联合前端编译工具链，消灭低版本浏览器兼容问题
• 16 预渲染：如何借助 Vite 搭建高可用的服务端渲染(SSR)工程？
• 17 模块联邦：如何实现优雅的跨应用代码共享？
• 18 再谈ESM：高阶特性 & Pure ESM 时代
• 19 性能优化：如何体系化地对 Vite 项目进行性能优化？
• 2 模块标准：为什么 ESM 是前端模块化的未来？
• 20 配置解析服务：配置文件在 Vite 内部被转换成什么样子了？
• 21 依赖预构建：Esbuild 打包功能如何被 Vite 玩出花来？
• 22 插件流水线：从整体到局部，理解 Vite 的核心编译能力
• 23 热更新：基于 ESM 的毫秒级 HMR 的实现揭秘
• 24 手写Vite：实现 no-bundle 开发服务(上)
• 25 手写 Vite：实现 no-bundle 开发服务(下)
• 26 手写 Bundler：实现 JavaScript AST 解析器——词法分析、语义分析
• 27 手写 Bundler：实现代码打包、Tree Shaking
• 28 结束语：课程回顾和未来展望
• 3 快速上手： 如何用 Vite 从零搭建前端项目？
• 4 样式方案：在 Vite 中接入现代化的 CSS 工程化方案
• 5 代码规范：如何利用 Lint 工具链来保证代码风格和质量？
• 6 静态资源：如何在 Vite 中处理各种静态资源？
• 7 预构建：如何玩转秒级依赖预构建的能力？
• 8 双引擎架构：Vite 是如何站在巨人的肩膀上实现的？
• 9 得力的性能推手：Esbuild 功能使用与插件开发实战