第二章 Vite概念和设计思想

什么是Vite？

Vite（法语意为 “快速的”，发音 /vit/，发音同 “veet”）是一种新型前端构建工具，能够显著提升前端开发体验。它主要由两部分组成：

• 一个开发服务，服务于开发环境，它基于 原生 ES 模块 提供了 丰富的内建功能，如速度快到惊人的 模块热更新（HMR）。
• 一套构建指令，服务于生产环境，它使用 Rollup 打包你的代码，并且它是预配置的，可输出用于生产环境的高度优化过的静态资源。

为什么用Vite？

什么是打包？
使用工具抓取、处理并将我们的源码模块串联成可以在浏览器中运行的文件。

常用的前端打包构建工具：

• webpack
• rollup（类库使用较多）
• parcel（新起）
• gulp（串联工具）

它们存在的问题：

• 缓慢的服务启动
  当冷启动开发服务器时，基于打包器的方式启动必须优先抓取并构建你的整个应用，然后才能提供服务。（影响开发体验）
• 缓慢的更新
  基于打包器启动是，重建整个包的效率很低。原因显而易见：因为这样更新速度会随着应用体积增长而直线下降。

Vite的设计思想

• Vite将模块区分为依赖和源码两类，提升开发服务启动时间
  依赖：在开发时不会变动的纯Javascript，Vite会使用esbuild预构建依赖
  （esbuild是使用go编写的，比JavaScript编写的打包器的预构建依赖速度快10-100倍）
  源码：通常为JSX、CSS、或者Vue SFC 等，时常会被编辑，需要转换，基于路由拆分
• Vite以原生ESM方式提供源码，让浏览器接管打包工作
  （源码模块的请求会根据304进行协商缓存，依赖模块配置cache-control进行强制缓存）

浏览器加载ESM 与 Vite加载ESM对比

浏览器加载ESM：会对所有引入的模块（未使用）发起http请求
Vite加载ESM：加载所需模块

Vite 和 create-react-app 对比

	Vite	CRA
初始化 & 启动时间	44s	3min20s
打包时间	2s	5s
打包产物大小	152kb	565kb