这是我参与「第五届青训营」伴学笔记创作活动的第 14 天
一、本堂课重点内容：
- Vite简介
- Vite实战讲解
- Vite进阶思路
二、详细知识点介绍：
引入
为什么需要构建工具？
前端项目由一系列资源文件构成，工程化工具可以让项目开发管理更高效。
工程化：
-
模块化：ESM、UMD等，提供模块加载、兼容不同模块规范
-
资源编译：高级语法的编译、资源加载
-
产物质量：代码压缩、删除无用代码
-
开发效率：热更新
传统构建工具问题
当项目工程逐渐庞大后出现
-
启动缓慢，等待成本高
-
热更新慢，修改代码不能及时反馈
关键在于
-
打包带来的性能开销
-
JS语言本身的性能瓶颈
Vite
新一代前端构建工具
-
No-bundle开发服务，源文件无需打包
-
生产环境基于Rollup的Bundle
特点：
-
高性能，dev阶段启动速度快、热更新速度快
-
简单易用，开发体验好
行业趋势
浏览器对原生EMS的普遍支持
基于原生语言编写前端编译工具链：esBuild、SWC
基于原生EMS的开发服务
-
无需打包项目源代码
-
天然的按需加载
-
可以利用文件级的浏览器缓存
EsBuild
基于Golang开发的前端打包工具, 是Vite性能提升的重要一环
包括打包器、编译器、压缩器，性能极高
内置Web构建功能
Vite实战
Vite项目初始化
npm i -g pnpm
pnpm create vite
pnpm install
npm run dev
组件使用
-
利用import语句实现简单组件化
-
使用Sass/Scss/CSS Moudules：
使用import语句结合inddex.module.scss文件
Tree Shaking
在Vite中默认开启
优化原理
-
基于ESM的import、export语句依赖关系，与运行状态无关
-
在构建阶段末删除未使用代码
Vite架构
关键技术
单文件编译：用Esbuild编译TS/JSX，巨幅提升速度，但不支持类型检查及语法降级到ES5
插件机制：开发阶段模拟Rollup插件，生产环境直接使用Rollup
Vite进阶思路
深入学习双引擎
-
esbuild
-
rollup.js
Vite插件开发
-
插件可以抽离核心，实现解耦，逻辑分离，更容易维护
-
插件化易于拓展
-
插件开发离不开钩子的使用
步骤：
-
开发插件
-
配置文件引入插件
学习插件开发需要看文档+实战开发
代码分割（拆包）
拆包前，无法进行并发请求，缓存复用低
拆包后可以方便进行更新开发
JS编译工具Babe
语法安全降级
- 不同浏览器不同的兼容性
- 需要利用Babel进行语法自动降级
服务端渲染SSR
之前课程中就提过，在此不再赘述。
深入理解底层标准
重点特性
-
CJS规范
-
ESM规范
-
HTTP 2.0特性
Vite社区生态
善于利用社区生态可以更好的学习
三、课后个人总结：
今天的课程主要介绍了Vite这个工具。Vite是新一代的前端工程化工具，性能比webpack要好很多（不知是否也有对应的劣势呢？）Vite优越的性能及其也支持插件的特点，让其表现很亮眼。但就和所有工具一样，我们只有深入学习其逻辑，去理解，才能真正的掌握它，才能真正让它为自己所用。
最近有点忙，写的较为简略，如有错漏欢迎指出，谢谢。
