这是我参与「第四届青训营」笔记创作活动的第9天
一、什么是vite
官方给它的定义： 下一代前端开发与构建工具 vite由两大部分组成：
- No-build开发服务，即在开发阶段源文件无需进行打包，而是利用浏览器天然的支持 esmodule 来完成一个按需引入，只需要进行语法转换，由于无需打包，基本我们在代码中的改动，都能在短时间内在浏览器做出响应，也大大提高了我们的开发效率。
- 生成环境基于 Rollup 的 Bundler，因为Rollup的打包具有良好的treeshaking能够更好的帮助我们删除一些无用代码等，当然优势远不止这一点
核心特征
- 高性能, dev启动速度和热更新速度非常快!
- 简单易用,开发者体验好
vite与传统打包webpack比较
从中我们可以看到，项目启动时间跟热更新时间，相比于webpack提升了好几十倍
二、传统打包工具存在的问题
这些传统打包工具都会存在一个共同的通病
- 项目启动时间过长，在启动项目时会进行一个编译过程，如果项目过于庞大，此过程是相当耗时的
- 热更新时间长，我们在修改代码之后，需要等待几秒甚至几分钟才会更新
那么它们的瓶颈在哪里呢？
- bundle带来的性能开销，传统打包在项目启动阶段，会将项目先进行打包，然后再启动，这样的过程是非常耗时的，所以导致项目启动时间过长
- JavaScript语言的性能瓶颈
三、为什么vite会很快呢
原因在于vite是基于原生ESM的，它会有三个显著的特点
- 在运行时无需打包项目源代码
- 天然的按需加载
- 可以利用文件级的浏览器缓存
其中 vite 也是基于 Esbuild 进行编译的
Esbuild是基于原生语言(Go、Rust)编写前端编译工具链，如Go语言编写的Esbuild、Rust 编写的Swc
Esbuild 它具有如下功能，并且具备极高的性能，因此被vite深度使用
- 打包器 Bundler
- 编译器 Transformer
- 压缩器 Minifier
四、vite 内置web构建能力
五、快速上手 vite
执行如下命令即可快速搭建与启动一个vite程序
pnpm create vite
pnpm i
pnpm run dev
vite 当中也对一些静态资源做了处理，我们也无需进行任何配置，以 SVG 为例
生产环境下的 Tree Shaking
如下图所示，multi 函数并没有被使用，vite 在打包过程中就会对此进行删除
优化原理:
- 基于ESM的import/export语句依赖关系，与运行时状态无关
- 在构建阶段将未使用到的代码进行删除
总结
以上就是对 vite 的一个入门介绍，简单来说，vite 具备一个开箱即用的显著特点，并且它还具备极高的性能，能够大大提升我们的日常开发体验
