Vite 是什么

在开发环境（Development） 下基于浏览器原生 ES Module 开发，完全跳过了打包这个概念；
在生产环境（Production） 下基于 Rollup 打包来构建代码。

主要特性

  • 💡 极速的服务启动： 使用原生 ESM 文件，无需打包！
  • ⚡️ 轻量快速的热重载： 无论应用程序大小如何，都始终极快的模块热重载（HMR）
  • 🛠️ 丰富的功能： 对 TypeScript、JSX、CSS 等支持开箱即用。
  • 📦 优化的构建：可选 “多页应用” 或 “库” 模式的预配置 Rollup 构建
  • 🔩 通用的插件： 在开发和构建之间共享 Rollup-superset 插件接口。
  • 🔑 完全类型化的API：灵活的 API 和完整 TypeScript 类型

Vite 的优势

  • 上手非常简单
  • 开发效率极高
  • 社区成本低（兼容绝大部分 rollup 插件）

Vite 在开发环境冷启动无需打包，无需分析模块之间的依赖，同时也无需在启动开发服务器前进行编译，启动时还会使用 esbuild 来进行预构建；（如下图基于原生 ESM 的开发服务流程图）

Vite 的构建速度为何比 Webpack 快？ - 图1

Webpack 在启动后会做一堆事情，经历一条很长的编译打包链条，从入口开始需要逐步经历语法解析、依赖收集、代码转译、打包合并、代码优化，最终将高版本的、离散的源码编译打包成低版本、高兼容性的产物代码，这可满满都是 CPU、IO 操作啊，在 Node 运行时下性能必然是有问题。（如下图基于 bundle 的开发服务流程图）
Vite 的构建速度为何比 Webpack 快？ - 图2