一、Vite的优势

在使用Webpack管理前端项目时，当我们使用了很多模块和插件时，就会产生启动速度变慢，项目编译时间变长等问题。由于现代浏览器基本上都具有了原生ESM支持，所以在开发时使用Vite时，就可以无需打包代码文件，按需加载需要的文件，以及能够利用浏览器自带的缓存，来减伤调试代码时的等待时间。在生产环境使用Vite打包代码时，Vite使用了Golang开发的Esbuild，在编译打包前端项目时，速度提升明显。

二、使用Vite

安装Webpack

Vite使用pnpm安装，如果没有安装pnpm，可以使用npm i -g pnpm来安装pnpm。使用pnpm安装并启动Vite：

pnpm create vite
pnpm install
npm run dev

启动完成后，即可在浏览器中访问对应地址来使用vite。

使用外部资源

在需要引入外部资源时，Vite避免了直接使用外部路径，而是通过使用 import语句来实现资源的导入和管理。例如：

import example from './example.jpg';
function App() {
    return {
        <img src={example}>
    };
}

HMR

在Vite中，HMR默认是自动开启的，无需手动配置。HMR可以在让你修改代码时，在浏览器中实时刷新修改结果，而且不会丢失当前浏览器页面的状态。

Tree Shaking

在Vite中，TreeShaking也是默认自动开启的。Tree Shaking会在项目打包时，自动去除没有使用过的代码、模块以及外部资源。

三、Vite整体架构

Vite整体架构由Development、Production以及一些通用的Plugin Pipeline组成。下面我们就分别介绍一下各部分的关键技术。

Development

预打包

在开发环境中，Vite会对前端项目进行预打包。预打包可以避免node_modules过多的文件请求，以及将CommonJS格式转换为ESM格式。

Production

代码压缩

EsBuild作为Vite默认的压缩工具，来替代Terser，Uglify.js等传统代码压缩工具，并且拥有更好的新能。

Plugin Pipeline

单文件编译

使用EsBuild来编译单个TS/JSX文件。使用EsBuild可以将编译速度提升10-100x，但是EsBuild也有局限性。EsBuild不支持类型检查以及语法降级功能。所以我们在生产环境时一般会额外调用一次TSC。

插件机制

在开发环境时，Vite使用了一个Plugin Comtainer来模拟Rollup的插件机制，而在生产环境时，Vite会直接使用Rollup。

Vite｜ 青训营笔记