Vite知识体系 | 青训营
前端工程的痛点
- 构建速度慢：传统的前端构建工具如Webpack在每次修改文件时都需要重新构建整个项目，导致开发过程中反复等待构建完成，浪费时间。
- 配置复杂：配置文件庞大且复杂，需要深入了解各种配置项和插件才能正确配置项目。
- 开发环境与生产环境差异大：在开发环境下使用不同的构建工具和配置，但在生产环境中可能会出现问题，导致运行时错误。
- 难以调试：传统构建工具打包后的代码难以调试，无法直接在浏览器中查看源代码，给排查问题带来困难。
前端构建工具的意义
前端构建工具的目的是将开发者编写的源代码转换为可在浏览器中运行的静态资源。它们可以处理各种任务，如文件压缩、代码转译、模块打包、静态资源优化等。构建工具提供了自动化的流程，简化了开发人员的工作，提高了项目的效率和质量。
Vite 概览
Vite是一个由Evan You（Vue.js的作者）开发的下一代前端构建工具。它专注于快速的开发环境，并且能够在生产环境中提供高性能的构建。Vite使用ES模块作为原生的开发模式，利用浏览器的原生模块系统进行按需编译，避免了传统构建工具的瓶颈。
Vite 业界案例
Vite已经在许多项目中得到了应用，包括Vue.js、React、Preact等框架的开发。许多开发者对Vite的开发体验和构建速度给予了高度评价。
Vite 优势
- 极快的冷启动：Vite通过利用浏览器的原生ES模块支持，实现了无需打包的开发模式，从而大幅减少了冷启动时间。
- 按需编译：Vite只会编译当前正在修改的文件，而不是整个项目，从而提高了开发时的构建速度。
- 开箱即用的构建工具：Vite内置了常用的构建功能，如CSS预处理器、模块化、代码压缩等，无需手动配置，开发者可以直接使用。
- 高质量的开发体验：Vite支持热更新，能够实时反映代码的变化，并且支持在浏览器中调试源代码。
项目初始化
使用Vite创建新项目非常简单，只需要运行一个命令即可。例如，使用Vite初始化一个Vue项目的命令是npm init vite@latest my-vue-app --template vue。
使用Sass/Scss & CSS Modules
Vite原生支持Sass和Scss预处理器，并且可以通过插件支持CSS Modules。在代码中使用Sass/Scss时，只需在文件中引入即可，无需其他配置。
使用静态资源
Vite支持导入各种静态资源，如图片、字体等。只需在代码中导入即可，Vite会自动处理并生成正确的路径。
生产环境Tree Shaking
Vite在生产环境下会自动进行Tree Shaking，即去除未使用的代码，从而减小打包后的文件大小，提高页面加载速度。
深入双引擎
Vite基于两个引擎：Dev Server和Build。Dev Server负责提供开发环境下的快速开发体验，Build负责构建生产环境下的优化代码。
Vite插件开发
Vite提供了丰富的插件系统，开发者可以根据需求编写自定义插件来扩展Vite的功能。
代码分割(拆包)
Vite支持代码分割，可以将应用代码和第三方依赖分开打包，从而提高页面加载速度。
JS编译工具(Babel)
Vite默认使用原生ES模块进行开发，但仍然支持使用Babel进行JS编译，以兼容旧版浏览器。
语法安全降级
Vite能够根据目标浏览器的兼容性自动将代码转换为适合的语法，从而实现语法安全降级。
服务端渲染(SSR)
Vite可以与服务器端框架集成，实现服务端渲染(SSR)，提供更好的SEO和首屏加载性能。
深入了解底层标准
Vite遵循了最新的Web标准，并且利用浏览器原生的ES模块系统进行构建，开发者可以深入了解底层标准。
Vite社区生态
Vite拥有一个活跃的社区，开发者可以在社区中分享经验、解决问题，并且获取第三方插件和工具的支持
