本文编写于 596 天前,最后修改于 596 天前,其中某些信息可能已经过时。

如何定义 Vite

  • Vite 新型前端构建工具

一、Vite 组成部分

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

二、什么是打包

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

常用的打包工具

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

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

缓慢的服务启动

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

缓慢的更新

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

三、为什么使用 Vite

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

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

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