Vite概要介绍 | 青训营

vite概要介绍

• 模块化，把项目拆分为不同的模块，分别进行开发和维护-把项目分为不同的部分，分而治之，python和go都有语言标准的模块化规范，而js没有统一的规范，目前诞生了非常多业界规范，但是规范化仍是问题
• 资源编译，问题，语法赶不上工程师的脑洞
• 产物质量 ，线上的代码需要压缩，对于未使用的产物要先去除，兼容性问题，
• 开发效率，通过构建工具实现

前端构建工具的意义-如何解决上述问题

• 模块化方案，提供模块加载方案，兼容不同模块规范
• 语法转译，高级语法转译，如Sass、TypeScript；资源加载，如图片、字体、woker
• 产物质量，产物压缩、无用代码删除、语法降级
• 开发效率，热更新

vite是什么？为什么要选择vite作为前端项目的构建工具？

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

两大组成部分

1. No-bundle开发服务，源文件无需打包
2. 生产环境基于Rollup的Bundler

核心特征

1. 高性能，dev启动速度和热更新速度非常快
2. 简单易用，开发者体验好

传统构建工具的问题

1. 缓慢的启动，项目编译等待成本高
2. 缓慢的热更新，修改代码后不能实时更新

瓶颈

• bundle带来的性能开销
• JavaScript语言的性能瓶颈

在如上的问题的背景下的两大行业趋势

• 全球浏览器对原生ESM的普遍支持
• 基于原生语言（Go、Rust）编写前端编译工具链
  • 如Go语言编写的E是build、Rust编写的SWC

基于原生ESM的开发服务优势

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

vite本质上是一个dev开发时的server把浏览器的请求进行承接然后进行编译，然后将浏览器能够识别的语法响应给浏览器

基于Esbuild的编译性能优化

Esbuild——基于Golang开发的前端工具，具备如下能力：

1. 打包器Bundler
2. 编译器Transformer
3. 压缩器Minifier

💥性能极高，在vite中被深度使用

一些别的： Vite是一个相对新的前端构建工具，它受到了广泛的关注和采用，因为它在某些方面提供了与传统构建工具（如Webpack）不同的优势。

1. 快速的开发体验：Vite以其快速的开发体验而闻名。它利用ES模块的特性，可以快速地构建和热更新你的项目。这意味着在开发过程中，你可以更快地看到修改的结果，无需等待长时间的构建过程。这对于提高开发效率非常有帮助。

2. 按需加载：Vite支持按需加载，这意味着它只会在需要的时候加载模块，而不是将整个应用程序打包成一个巨大的文件。这有助于减小应用程序的初始加载时间，提高性能。

3. 插件生态系统：虽然Vite相对较新，但已经有了一个不错的插件生态系统，可以帮助你轻松地集成各种工具和框架，从而满足不同项目的需求。

4. 支持多种框架：Vite不仅限于特定的框架，它可以与Vue.js、React、Angular等多种框架一起使用，使其成为跨项目通用的工具。

5. 易于配置：与一些其他构建工具相比，Vite的配置通常更简单明了。这降低了学习和配置的难度，特别是对于新手来说。

6. 社区活跃：Vite有一个活跃的社区，开发者们不断为其贡献新功能和修复bug，这使它保持了更新和改进的动力。

然而，值得注意的是，对于一些复杂的项目，特别是需要更多自定义配置的项目，Vite可能不是最佳选择。一些大型项目可能仍然更适合使用传统的构建工具，如Webpack。另外，Vite的生态系统可能在某些方面相对较小，因此你可能需要自己动手解决一些问题，或者等待社区填补这些空白。

总的来说，Vite是一个有潜力的前端构建工具，特别适合小型到中型的项目，以及那些希望提高开发效率的开发者。然而，在选择前端构建工具时，你应该根据项目的具体需求和复杂性来决定是否使用Vite或其他工具。