如何定义 Vite

• Vite 新型前端构建工具

一、Vite 组成部分

• 一个开发服务，服务开发环境，ESM + HMR
• 一条构建，服务生产环境，使用 Rollup 打包

二、什么是打包

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

常用的打包工具

• Webpack （开发时接口代理，mock数据的构建，打包生成umd）
• rollup （打包类库）
• parcel （新起的打包工具）
• gulp

常用的打包工具突出的问题

缓慢的服务启动

当冷启动开发服务器时，基于打包器的启动方式必须优先抓取并构建你的整个应用，然后才能提供服务

缓慢的更新

基于打包器启动时，重建整个包的效率低。更新速度随着应用体积直线下降

三、为什么使用 Vite

Vite 将模块区分为依赖和源码两类，提示开发服务启动时间

• 依赖：在开发时不会变动纯的Javascript，Vite会使用ESbuild构建依赖
• 源码：通常JSX、CSS或者 Vue SFC等，时常挥别编辑的，需要转换的，基于路由拆分

Vite 已原生ESM 方式提供源码，让浏览器接管打包工作