这是我参与【第四届青训营】笔记创作活动的第14天。

Vite是什么

• vite的定位是：新一代前端开发与构建工具。
• 由两大组成部分：

1.No-bundle开发服务，源文件无需打包

2.生产环境基于Rollup的Bundler

• 核心特征

1.高性能，dev启动速度和热更新速度非常快

2.简单易用，开发者体验好

为什么要用Vite构建工具

• 当下问题

1.缓慢的启动 -> 项目编译等待成本太高。

2.缓慢的热更新 -> 修改代码后不能实时更新，十分影响开发者体验。

3.bundle带来的性能开销。

4.JavaScript语言的性能瓶颈

而Vite可以很好的解决这些问题。

从案例可以看出启动时间和热更新时间都大大缩减了。

• vite的功能也是十分强大的

• vite在代码体积和性能上的表现也很出色

vite的上手使用

• 生产环境Tree Shaking

优化原理：

1.基于ESM的import/export语句依赖关系，与运行状态五个。

2.在构建阶段将未使用到的代码进行删除

vite整体架构

• 关键技术：依赖预打包

• 单文件编译

• 关键技术：代码压缩

• 关键技术：插件机制

vite社区生态

总结：

通过这节课学习我对vite有了比较全面的了解，认识了新一代前端开发与构建工具，它的功能之强大，操作之便利，确实可以称的上是划时代的。相信以后前端的开发会越来越便捷。