Vite

这是我参与「第五届青训营」伴学笔记创作活动的第 13 天

前端构建工具的意义

定位:新一代前端构建工具

两大组成部分:

1.No-bundle开发服务，源文件无需打包
2.生产环境基于Rollup 的 Bundler

核心特征

1.高性能,dev启动速度和热更新速度非常快!
2.简单易用，开发者体验好

相比Webpack需要对entry、loader、plugin等进行诸多配置，Vite的使用可谓是相当简单了。只需执行初始化命令，就可以得到一个预设好的开发环境，开箱即获得一堆功能，包括：CSS预处理、html预处理、异步加载、分包、压缩、HMR等。他使用复杂度介于Parcel和Webpack的中间，只是暴露了极少数的配置项和plugin接口，既不会像Parcel一样配置不灵活，又不会像Webpack一样需要了解庞大的loader、plugin生态，灵活适中、复杂度适中。适合前端新手。

Vite的劣势：

生态不及webpack，加载器、插件不够丰富
打包到生产环境时，vite使用传统的 rollup（也可以自己手动安装webpack来）进行打包
项目的开发浏览器要支持 ES Module，而且不能识别 CommonJS 语法

如何使用

提前安装pnpm npm i -g pnpm
pnpm create vite #初始化命令
pnpm install #安装依赖
npm run dev #启动项目

除了常见的图片格式, Vite也内置了对于JSON、Worker、WASM 资源的加载支持

vite整体架构

依赖预打包——避免node_modules过多的文件请求、将CommonJs格式转换为ESM格式
单文件编译——用Esbuild编译TS/JSX（不支持类型检查、不支持语法降级到ES5）
代码压缩
插件机制——开发阶段（模拟Pollup插件机制）、生产环境（直接使用Poullup）