Vite学习笔记（上） ｜ 青训营

一、前端构建工具的意义

• 模块化方案：

  1. 提供模块加载方案
  2. 兼容不同模块规范

• 语法转译

  1. 高级语法转译，如Sass、TypeScript
  2. 资源加载，如图片、字体、worker

• 产物质量

  • 产物压缩、无用代码删除、语法降级

• 开发效率

  • 热更新

前端构建工具的意义在于提高前端开发效率和代码质量，以及优化网页性能和用户体验。它们可以自动化一些繁琐的任务，例如代码压缩、文件合并、静态资源优化等，减少开发人员的重复劳动。同时，构建工具还可以帮助开发人员管理模块依赖关系，实现模块化开发，提高代码的可维护性和可扩展性。另外，构建工具还可以进行代码检查、代码规范化等操作，帮助开发人员提高代码质量。最后，构建工具还可以优化网页性能，例如通过图片压缩、资源懒加载等方式减少网页的加载时间，提升用户体验。

二、Vite是什么？Why Vite？

一、是什么？

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

量大组成部分：

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

核心特征：

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

二、Why Vite？

1. 快速的冷启动：Vite 采用了基于 ES 模块的开发服务器，可以在浏览器请求时即时编译和返回模块，避免了传统打包工具需要预先构建整个应用的过程，大大加快了冷启动的速度。
2. 高效的热更新：Vite 支持模块级别的热更新，只重新编译修改的模块，而不需要刷新整个页面。这使得开发者在修改代码后能够立即看到结果，提高了开发效率。
3. 按需编译：Vite 会根据模块的引入情况进行按需编译，只编译当前正在使用的模块，而不是整个应用。这样可以减少不必要的编译时间，提升开发效率。
4. 支持现代化的前端技术：Vite 内置了对 Vue、React 和原生 JavaScript 的支持，并且对 TypeScript、CSS 预处理器等也有良好的集成。它能够帮助开发者更方便地使用最新的前端技术。