Vite与前端 ｜ 青训营笔记

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

Vite是什么 & Why Vite？

定位:

新一代前端构建工具

两大组成部分:

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

核心特征

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

Vite使用

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

Vite架构

关键技术

1. 预打包

1.1 为什么要进行预打包

1. 避免node_modules过多的文件请求
2. 将CommonJS格式转换为 ESM格式

1.2 实现原理:

1. 服务启动前扫描代码中用到的依赖
2. 用Esbuild 对依赖代码进行预打包
3. 改写import语句,指定依赖为预构建产物路径

2. 单文件编译

用Esbuild 编译TS/JSX

2.1 优势

编译速度提升10-100 x

2.1 局限性

• 不支持类型检查
• 不支持语法降级到ES5

3. 代码压缩

Esbuild 作为默认压缩工具，替换传统的Terser、 Uglify.js等压缩工具

4. 插件机制

• 开发阶段->模拟Rollup 插件机制
• 生产环境->直接使用 Rollup

4.1 为什么需要插件机制?

• 抽离核心逻辑
• 易于拓展

Vite进阶

1. 引入双引擎

esbuild + rollup.js

2. Vite插件开发

1. 服务启动阶段: config -> configResolved -> options -> configureServer -> buildStart
2. 请求响应阶段:

• transformIndexHtml
• resolveId -> load -> transfrom

3. 热更新阶段: handleHotUpdate
4. 服务关闭阶段: buildEnd -> closeBundle

3. 语法安全降级

如何在构建产物中避免这类问题?

1. 上层解决方案: @vitejs/plugin-legacy
2. 底层原理

• 借助Babel进行语法自动降级
• 提前注入Polyfill 实现. 如core-js、regenerator-runtime

4. Vite社区生态

官方提供插件:

• @vitejs/plugin-vue,提供Vue 3支持
• @vitejs/plugin-vue-jsx,提供 Vue 3JSX支持@vitejs/plugin-react,提供React支持
• @vitejs/plugin-legacy,提供低版本浏览器降级支持
• 海量社区插件:github.com/vitejs/awes…

众多框架内置

• Nuxt
• SvelteKit
• Astro
• Vitepress

写在结尾

vite是新生代的前端工程构建工具，具有强大的生命力，值得我们去深入学习，加油！