这是我参与「第五届青训营」笔记创作活动的第二十六天
Vite 基本概要
Vite是什么？Why Vite?
概览
- 开发阶段的No-bundle服务，简单来说NodeJS的Dev Server，在这个Server当中，项目的源文件是不需要打包的，这是和传统构建工具最大的不同
业界案例
当下构建工具的问题
- 打包带来的性能开销，也就是在开发阶段，都会对代码进行一个打包
- JS是一个解释性的语言是一个单线程的语言，没有办法像Go, Rust那样，利用多线程的优势，来进行性能优化，也就没有那么多的性能优化手段了
两大行业趋势
浏览器对ESM的原生支持
-
基于浏览器的这个功能，浏览器开发了一套Dev Server，这个Dev Server的底层原理就是
<script type='module'></script>, 如下图，浏览器发起一个ts的文件请求，然后Vite Dev Server就会接受这个请求，接受这个请求之后就可以自定义地进行一些文件的编译，内容的响应，浏览器最后拿到的是能够识别的一些JS的内容 (Vite本质上来讲就是个Dev Server, 对浏览器的请求进行承接，进行编译，然后将浏览器能够识别的语法响应给浏览器) -
可以利用文件级的浏览器缓存 => 当我一个文件发生变更时，就不会导致整个bundle失效了，只会导致当前请求的这个缓存失效，就可以达到更细腻的浏览器湖南村
基于Esbuild的编译性能优化
Bundler方面对标的是WebpackTransformer方面对标的是BabelMinifier方面对标的是Uglify.js- 在这三个方面
Esbuild都达到了一个较好的水准，编译器方面性能极其出色，被Vite深度使用
Vite内置的Web构建能力
-
在不做任何配置的情况下，拥有的功能是等价于图中的Webpack基础设施的
-
Vite对常见Web开发需求进行了一个封装，并且内置了一些默认的最佳实践
