Vite 知识体系|青训营笔记

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

课堂重点知识

1. Vite 概览介绍
2. Vite 上手实战
3. Vite 整体架构
4. Vite 进阶路线

知识总结及实例

Vite 概览介绍

• 引言

前端工程痛点

前端构建工具的意义

• what

• why

当下问题

浏览器原生ESM支持

基于原生ESM的开发服务优势

基于Esbuild的编译性能优化

内置的web构建能力

Vite 上手实战

Vite 整体架构

• 优化原理

• vite 整体架构

1. 单文件编译

2. 代码压缩

3.插件机制

Vite 进阶路线

• 双引擎

• 插件开发
  • why

1. 抽离核心逻辑
2. 易于扩展

• 代码分割（拆包）
• 语法安全降级

• 服务端渲染（SSR）

相关扩展

1. 插件兼容性具体可查阅
2. Rollup 官方文档
3. Esbuild 官方文档
4. Vite 插件开发文档
5. json 加载插件
6. Esbuild 接入插件
7. 官方 React 插件
8. babel 官方站点
9. babel 插件手册
10. 海量社区插件

个人总结

明白Vite是怎样构建及其优势，可以在实战中应用，提高对vite的认知。