你将获得

• 5 大模块，详细梳理构建工具实战要点
• 深入底层，彻底搞懂 Vite 原理与实现
• 真实场景，攻克工程实践中的核心问题
• 从 0 到 1，手把手教你实现构建引擎

作者介绍

目前深耕前端工程化构建领域，拥有大量的 Vite 工程化实战和性能优化经验，曾将 Vite 落地到抖音直播 PC 端等公司大型业务中，也是 Vite Contributor。

小册介绍

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

• 漫长的项目启动时间。作为开发者，经常要等待几分钟的时间才能看到项目启动完成。
• 漫长的热更新时间。热更新要花费数秒的时间，代码改动后反馈非常迟钝，而且随着项目规模越来越大，热更新也越来越慢。

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

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

• 缺少系统化的学习资料，社区中绝大多数的文章仅仅只是教会你如何搭建一个简单的脚手架项目，不够系统和深入
• 不了解 Vite 相关的生态，遇到问题的时候不知道使用哪些插件或者解决方案
• 不熟悉 Esbuild、Rollup 这些底层构建引擎，遇到一些稍微需要定制的场景就感到捉襟见肘
• 不知道如何将 Vite 和其它前端工具结合，如 Babel、core-js
• 构建工具源码晦涩难懂，对更深一步的原理学习望而却步
• ......

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

在本课程中，我分了五个部分来系统讲述:

1. 基础使用篇。 重新认识构建工具本身的价值，学会 Vite 基本的功能使用，让你能够独立搭建一个相对完整的脚手架项目。
2. 双引擎篇。 这个部分我会给你详细介绍 Vite 的双引擎架构，并带你系统学习 Esbuild 和 Rollup 相关的内容，掌握最小必要知识，为后续的高级应用作铺垫。
3. 高级应用篇。 你将学习到 Vite 的各种高级用法和构建性能优化手段，全程高能实战，每一节都有具体可运行的示例项目。
4. 源码精读篇。 在这个部分我们将剖析 Vite 的核心源码，理解诸如JIT、Proxy Module、Module Graph、HMR Boundary、Plugin Container 等源码中重要概念的作用及其底层实现。
5. 手写实战篇。 一方面我们会手写 Vite 的开发时 no-bundle 服务，另一方面也会带你一步步完成一个生产环境打包工具(Bundler)，从 AST 解析的功能开始，最终实现一个 Bundler。

小册最大的特点就是基于实战，理论固然重要，但更重要的是上手实操，几乎所有的知识点你都能找到对应的示例实现代码，在课程的最后一章甚至会手把手教你写一个构建引擎。正如这句话所说:

Talk is cheap， show me your code.

希望这本小册能够降低你学习构建工具的门槛，带你真正完成从入门到进阶的过程。虽然本小册并不能解决所有的问题，但我在小册中分享的个人学习经验，以及面对问题时的思维方式或许给你带来一些启发。

祝学习愉快，我们小册中见！

你会学到什么？

• 熟练掌握 Vite 的使用，独立搭建完整的前端工程环境以及工作流；
• 学会 Vite 插件开发及项目性能优化技巧，独立解决 Vite 使用过程中的核心难题；
• 深入掌握 Vite 底层用到的打包工具 Esbuild 和 Rollup，学会核心的打包配置和插件开发姿势；
• 彻底理解 Vite 实现原理，学会 Vite 背后的优秀架构思想和核心实现；
• 从 0 到 1 手写构建工具，掌握前端构建工具的原理。

适宜人群

• 想要系统学习 Vite，提升竞争力，但没有接触过，也缺少项目经历
• 想通过 Vite 作为团队或者个人项目的技术栈，但对 Vite 的核心概念和进阶用法一知半解
• 想系统化学习 Rollup 和 Esbuild，理解构建工具的底层原理及源码实现，苦于学习门槛高