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

Vite知识体系-介绍Vite

为什么需要构建工具

前端项目由一些文件资源组成

• 模块化在前端工程方面是一个问题
• 资源编译：编译浏览器不认识的语言（TS、语法糖），即浏览器的标准赶不上前端开发者的脑洞
• 产物质量：代码压缩是否需要压缩，是否将没有用到的内容剔除
• 开发效率：需要热更新

前端构建工具来解决这些问题

• 模块化方案：1、提供模块加载方法，2、兼容不同模块规范
• 语法转义：1、高级语法转义，如Sass、TS，2、资源加载，如图片、字体、worker
• 产物质量：产物压缩、无用代码剔除（Tree shaking）、语法降级
• 开发效率：实现热更新

什么是Vite，为什么选择Vite

定位：新一代前端构建工具

两大组成部分：

1、No-boundle开发服务，源文件无需打包

2、生产环境基于Rollup（也是一个构建工具）的Bundler

核心特征：

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

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

传统构建工具的瓶颈：

1、传统构建工具需要有一个打包的过程，而bundle（打包）带来必要的性能消耗

2、JS语言的性能瓶颈

两大行业趋势： 1、全球浏览器对原生ESM的普遍支持

2、基于原生语言（Go、Rust）编写前端编译工具链；如Go编写的ESbuild、Rust编写的SWC（比bable快几十倍）

浏览器对原生ESM的支持

浏览器支持使用 <script type="moudle">从而使用ESM语法

<script type="moudle">
    import {foo} from './foo.js'
	console.log(foo)
</script>

即使用ESM模块导入导出语法

基于浏览器这个功能，Vite开发了一套Dev Server，其底层就是这种原理

浏览器最后拿到的是能够识别的JS内容

所以Vite本质就是Dev Server把浏览器的请求进行承接，进行编译，把浏览器能识别语言返回回去

优点

• 无需打包项目源代码
• 天然的按需加载
• 可以利用文件级的浏览器缓存

Vite又基于Esbuild的编译性能优化

其具备以下能力：

1、打包器Bundler——对标的是webpack的能力

2、编译器Transformer——对标Bable的能力

3、压缩器Minifier

内置的Web构建能力

总结：

• 相较于webpack，vite采用了不同的运行方式：
  • 开发时，并不对代码打包，而是直接采用ESM的方式来运行项目
  • 在项目部署时，再对项目进行打包