vite on 编程那些事儿

第1章认识 Vite

Fri, 27 Mar 2026 17:13:00 +0800

Chapter-01-Knowing-Vite

第1章：认识 Vite

在正式开始之前，让我们先来一场时光旅行。回到2018年，彼时的前端江湖还是 Webpack 的天下。那一年，你打开一个中大型项目，喝了杯咖啡，回来发现——浏览器还在转圈圈。🥲

第2章环境准备与安装

Fri, 27 Mar 2026 17:13:00 +0800

Chapter-02-Environment-Setup

第2章：环境准备与安装

古人云：“工欲善其事，必先利其器。” 在正式开始写代码之前，我们得先把开发环境整利索了。

这一章，我们会解决几个灵魂拷问：

第3章 Vite 基础使用

Fri, 27 Mar 2026 17:13:00 +0800

Chapter-03-Vite-Basics

第3章：Vite 基础使用

恭喜你成功安装了 Vite，并运行了第一个项目！现在，我们要把这个"会用"变成"用得溜"。

这一章，我们来细细拆解 Vite 项目的每一个组成部分：入口 HTML 里藏着什么秘密？命令行的各种参数都是干嘛的？ES Modules 怎么玩？CSS、图片、JSON 这些资源怎么导入？路径别名怎么配？

第4章 vite.config.js/ts 详解

Fri, 27 Mar 2026 17:13:00 +0800

Chapter-04-Vite-Config

第4章：vite.config.js/ts 详解

如果说 Vite 是一个王国，那 vite.config.js 就是这个王国的宪法——它定义了 Vite 的一切行为。

前面我们只是蜻蜓点水地看了看配置文件的皮毛，这一章我们要把它彻底讲透：root、base、publicDir、cacheDir 等基础配置；server 里的端口、代理、HMR；build 里的输出、优化、分包；resolve 里的别名、扩展名；optimizeDeps 里的预构建；CSS、PostCSS、LogLevel… 每一个配置项，我们都要讲清楚它是什么、怎么用、什么时候用。

第5章插件系统

Fri, 27 Mar 2026 17:13:00 +0800

Chapter-05-Plugin-System

第5章：插件系统

如果把 Vite 比作一辆汽车，那插件就是它的"外挂装备"——可以让汽车上天入地、潜水遁地。

Vite 的插件系统借鉴了 Rollup 的插件设计，但又增加了一些 Vite 独有的钩子（Hooks）。有了插件，Vite 可以支持 Vue JSX、React、SSR、PWA、CSS Modules、CSS-in-JS、Mock 数据、图片压缩… 几乎你能想到的一切功能。

第6章 CSS 处理

Fri, 27 Mar 2026 17:13:00 +0800

Chapter-06-CSS-Processing

第6章：CSS 处理

CSS 是前端开发中最"朴素"又最"复杂"的存在。说它朴素，是因为它语法简单到小学生都能写；说它复杂，是因为当你项目变大、团队协作、浏览器兼容、性能优化这些因素叠加进来时，CSS 就变成了一个深不见底的技术黑洞。

第7章静态资源与构建优化

Fri, 27 Mar 2026 17:13:00 +0800

Chapter-07-Assets-And-Optimization

第7章：静态资源与构建优化

“为什么我的网站加载那么慢？“这是前端性能优化的灵魂拷问。

造成网页加载慢的原因有很多：图片太大、JavaScript 打包太臃肿、HTTP 请求太多、没有缓存策略、没有压缩… 这一章，我们就把这些问题一一击破。

第8章 Vite + Vue 实战

Fri, 27 Mar 2026 17:13:00 +0800

Chapter-08-Vite-Vue

第8章：Vite + Vue 实战

如果说 Vue 3 是尤雨溪的得意之作，那 Vite 就是让 Vue 开发者"爽到飞起"的利器。两者的结合，堪称"天作之合"。

第9章 Vite + React 实战

Fri, 27 Mar 2026 17:13:00 +0800

Chapter-09-Vite-React

第9章：Vite + React 实战

React 和 Vue 是前端框架界的"两大巨头"。如果说 Vue 3 是尤雨溪的精心之作，那 React 就是 Facebook（Meta）出品的"老牌劲旅"。

第10章 Vite + TypeScript

Fri, 27 Mar 2026 17:13:00 +0800

Chapter-10-Vite-TypeScript

第10章：Vite + TypeScript

TypeScript——JavaScript 的超集，为 JavaScript 添加了静态类型系统。

很多人一开始觉得 TypeScript 麻烦，每次写代码都要定义类型。但当你写过几个大型项目后，就会发现：TypeScript 的"前期麻烦"能换来"后期的省心"——类型错误在编译时就发现了，而不是等到线上出 BUG。

第11章开发服务器进阶

Fri, 27 Mar 2026 17:13:00 +0800

Chapter-11-Development-Server-Advanced

第11章：开发服务器进阶

恭喜你已经掌握了 Vite 的基础用法，能跑起来、能热更新、能把项目跑起来不报错——这已经很棒了！但如果你的目标是"专业级"前端开发者，那这一章就是你的必经之路。

第12章生产构建优化

Fri, 27 Mar 2026 17:13:00 +0800

Chapter-12-Production-Build-Optimization

第12章：生产构建优化

开发时飞快，那叫一个爽。但代码最终是要部署上线的，上线之后能不能"飞起来"，就全靠生产构建优化了。

这一章我们要聊的话题直接决定了你的网站"快不快"：Rollup 怎么配置？代码怎么压缩？Tree Shaking 怎么做？产物怎么分析？兼容怎么处理？CDN 怎么接？

第13章测试与调试

Fri, 27 Mar 2026 17:13:00 +0800

Chapter-13-Testing-And-Debugging

第13章：测试与调试

“测试？那是什么？能吃吗？”

如果你也是这么想的，那这章就是你的"觉醒时刻"。没有测试的代码就像没有安全带的赛车——可能跑得很快，但一出事就是大事。

第14章完整项目实战

Fri, 27 Mar 2026 17:13:00 +0800

Chapter-14-Project-Practice

第14章：完整项目实战

纸上得来终觉浅，绝知此事要躬行。

前面 13 章我们学了 Vite 的各种知识点，但"知道"和"会用"之间还隔着一道鸿沟——实战。这一章，我们要跨过这道鸿沟。

第15章 Vite 核心原理

Fri, 27 Mar 2026 17:13:00 +0800

Chapter-15-Vite-Core-Principles

第15章：Vite 核心原理

你已经会用 Vite 了——创建项目、配置插件、写代码、构建部署，一条龙服务。但你有没有想过：Vite 背后到底是怎么工作的？

为什么开发时启动这么快？为什么 HMR 能做到毫秒级更新？为什么生产构建用的是 Rollup 而不是 Vite 自己？

第16章 esbuild 与 Rollup

Fri, 27 Mar 2026 17:13:00 +0800

Chapter-16-esbuild-And-Rollup

第16章：esbuild 与 Rollup

Vite 的极速体验，背后有两个功臣：esbuild 和 Rollup。

esbuild 负责"快"——开发时的依赖预构建、TypeScript 转译、JSX 转译，它都能在毫秒级完成。

第17章编写自定义插件

Fri, 27 Mar 2026 17:13:00 +0800

Chapter-17-Custom-Plugins

第17章：编写自定义插件

你已经用过很多插件了——Vue 插件、React 插件、PWA 插件、自动导入插件…

但你有没有想过：自己写一个 Vite 插件？

其实 Vite 插件并不神秘，它就是一段遵循特定规范的代码。这一章，我们就从零开始，手把手教你写一个自己的 Vite 插件。

第18章 Monorepo 与大型项目

Fri, 27 Mar 2026 17:13:00 +0800

Chapter-18-Monorepo-And-Large-Projects

第18章：Monorepo 与大型项目

想象一下这个场景：你在维护 5 个前端项目，每个项目都有相似的配置、相似的工具函数、相似的组件。然后某天，你发现一个工具函数有 bug，需要在 5 个项目中都改一遍…

第19章 SSR 与 SSG

Fri, 27 Mar 2026 17:13:00 +0800

Chapter-19-SSR-And-SSG

第19章：SSR 与 SSG

传统的 Vue/React 应用都是"客户端渲染"（CSR）——浏览器下载一个空的 HTML，然后 JavaScript 去请求数据、渲染页面。

这带来了两个问题：SEO 不友好（搜索引擎看到的是空页面）和首屏加载慢（需要等 JS 下载完才能看到内容）。

第20章前沿探索与展望

Fri, 27 Mar 2026 17:13:00 +0800

Chapter-20-Frontier-Exploration

第20章：前沿探索与展望

恭喜你！能走到这里的同学，已经是 Vite 的深度玩家了。

这一章，我们来放眼未来，看看前端构建工具领域的最新动态：Rspack 这个"性能怪兽"、边缘计算的崛起、AI 辅助开发的革命、以及 Vite 生态的未来趋势。

vite on 编程那些事儿

第1章 认识 Vite

Chapter-01-Knowing-Vite

第1章：认识 Vite

第2章 环境准备与安装

Chapter-02-Environment-Setup

第2章：环境准备与安装

第3章 Vite 基础使用

Chapter-03-Vite-Basics

第3章：Vite 基础使用

第4章 vite.config.js/ts 详解

Chapter-04-Vite-Config

第4章：vite.config.js/ts 详解

第5章 插件系统

Chapter-05-Plugin-System

第5章：插件系统

第6章 CSS 处理

Chapter-06-CSS-Processing

第6章：CSS 处理

第7章 静态资源与构建优化

Chapter-07-Assets-And-Optimization

第7章：静态资源与构建优化

第8章 Vite + Vue 实战

Chapter-08-Vite-Vue

第8章：Vite + Vue 实战

第9章 Vite + React 实战

Chapter-09-Vite-React

第9章：Vite + React 实战

第10章 Vite + TypeScript

Chapter-10-Vite-TypeScript

第10章：Vite + TypeScript

第11章 开发服务器进阶

Chapter-11-Development-Server-Advanced

第11章：开发服务器进阶

第12章 生产构建优化

Chapter-12-Production-Build-Optimization

第12章：生产构建优化

第13章 测试与调试

Chapter-13-Testing-And-Debugging

第13章：测试与调试

第14章 完整项目实战

Chapter-14-Project-Practice

第14章：完整项目实战

第15章 Vite 核心原理

Chapter-15-Vite-Core-Principles

第15章：Vite 核心原理

第16章 esbuild 与 Rollup

Chapter-16-esbuild-And-Rollup

第16章：esbuild 与 Rollup

第17章 编写自定义插件

Chapter-17-Custom-Plugins

第17章：编写自定义插件

第18章 Monorepo 与大型项目

Chapter-18-Monorepo-And-Large-Projects

第18章：Monorepo 与大型项目

第19章 SSR 与 SSG

Chapter-19-SSR-And-SSG

第19章：SSR 与 SSG

第20章 前沿探索与展望

Chapter-20-Frontier-Exploration

第20章：前沿探索与展望

第1章认识 Vite

第2章环境准备与安装

第5章插件系统

第7章静态资源与构建优化

第11章开发服务器进阶

第12章生产构建优化

第13章测试与调试

第14章完整项目实战

第17章编写自定义插件

第20章前沿探索与展望