- 高效的开发启动速度:
- 利用浏览器原生 ES 模块:Vite 4.0 基于浏览器原生支持的 ES modules 系统,在开发过程中,浏览器可以直接请求和加载单个的 JavaScript、CSS 和其他资源模块,无需像传统构建工具(如 Webpack)那样进行全量的打包编译操作。这大大减少了开发环境的启动时间,尤其是在大型项目中,效果更为明显。开发者能够快速进入开发状态,几乎感受不到等待时间,极大地提高了开发效率。
- 按需加载和缓存机制:Vite 会根据代码的实际使用情况进行按需加载,只加载当前页面或功能模块所需要的代码,避免了不必要的资源加载。同时,Vite 利用浏览器的缓存机制,对已经加载过的模块进行缓存,当代码发生变化时,只重新加载发生变化的模块,使得页面的刷新速度极快,进一步提升了开发过程中的调试和修改效率。
- 卓越的热更新性能:
- 快速的模块热替换:在开发过程中,Vite 4.0 实现了高效的热模块替换(HMR)。当开发者对代码进行修改时,Vite 能够快速地检测到代码的变化,并将变化的模块实时替换到正在运行的应用中,无需刷新整个页面。这使得开发者可以即时看到代码修改后的效果,极大地缩短了开发周期,并且能够保持应用的状态不丢失,方便开发者进行快速迭代和调试。
- 精确的依赖追踪:Vite 对项目中的依赖关系进行精确追踪,能够准确地识别出哪些模块受到代码变化的影响,只对相关的模块进行热更新操作,避免了对整个项目的重新加载。这种精确的依赖追踪机制不仅提高了热更新的速度,还减少了不必要的资源消耗,使得热更新过程更加高效和稳定。
- 优化的构建性能:
- 升级到 Rollup 3:Vite 4.0 升级到了 Rollup 3,Rollup 是一个高效的 JavaScript 模块打包器,它能够对代码进行优化和精简,去除冗余代码,生成更紧凑的打包结果。通过与 Rollup 3 的结合,Vite 4.0 在构建过程中能够更好地处理模块的合并、拆分和优化,提高了构建的速度和质量。
- 代码分割和懒加载:Vite 4.0 支持代码分割和懒加载技术,能够将大型的应用程序分割成多个小的模块,根据用户的操作和页面的需求逐步加载相应的模块。这样可以减少初始加载时的资源请求数量,提高页面的加载速度,同时也能够更好地管理和优化应用的资源加载过程。
- 强大的兼容性:
- 默认支持更广泛的 ES2020 特性:现代浏览器构建现在默认以 Safari 14 为目标,这意味着 Vite 4.0 能够更好地支持 ES2020 中的新特性,如 BigInt 类型和空值合并运算符等。开发者可以放心地使用这些新特性来编写代码,而无需担心兼容性问题,同时也提高了代码的可读性和可维护性。
- 灵活的旧浏览器支持:对于需要支持旧版本浏览器的项目,Vite 4.0 提供了方便的解决方案。开发者可以通过添加
@vitejs/plugin-legacy
插件,将应用程序转换为旧浏览器能够识别的代码,确保应用在不同浏览器环境下都能够正常运行,扩大了应用的适用范围。
- 简单易用的配置和插件系统:
- 简洁的配置文件:Vite 4.0 的配置文件相对简单易懂,开发者可以通过一个 JavaScript 模块形式的配置文件
vite.config.js
来定制项目的构建和开发选项。配置文件中提供了丰富的默认配置选项,同时也允许开发者根据自己的需求进行灵活的自定义配置,大大降低了项目的配置成本和学习成本。 - 丰富的插件生态:Vite 拥有庞大且活跃的插件生态系统,开发者可以根据项目的需求选择合适的插件来扩展 Vite 的功能。例如,用于 CSS 预处理的插件、图片优化插件、代码压缩插件等,能够满足各种不同项目的特定需求。插件的引入和使用非常方便,只需在配置文件中进行简单的配置即可,进一步提高了开发的灵活性和效率。
- 简洁的配置文件:Vite 4.0 的配置文件相对简单易懂,开发者可以通过一个 JavaScript 模块形式的配置文件
- 出色的开发体验和错误处理:
- 清晰的构建日志输出:Vite 4.0 改进了构建日志的输出,使其更加清晰和易于理解。开发者可以在构建过程中方便地查看构建的进度、错误信息和警告信息,快速定位和解决问题。清晰的构建日志有助于提高开发过程中的调试效率,减少错误排查的时间。
- 完善的错误信息提示:在开发和构建过程中,当出现错误时,Vite 4.0 能够提供详细的错误信息提示,帮助开发者快速理解错误的原因和位置。这对于开发者来说非常重要,能够及时发现和解决问题,避免错误的积累和影响项目的开发进度。
- 对 React 项目的支持优化:
- 新的 React 插件:Vite 4.0 提供了两个用于 React 项目的插件,
@vitejs/plugin-react
和@vitejs/plugin-react-swc
。@vitejs/plugin-react
使用 esbuild 和 babel,以较小的包占用空间和灵活的 babel 转换管道实现快速的 HMR;@vitejs/plugin-react-swc
在构建过程中使用 esbuild,但在开发过程中用 swc 取代 babel,对于不需要非标准 React 扩展的大型项目,冷启动和 HMR 的速度会明显加快。这为 React 开发者提供了更多的选择和优化方案,能够更好地满足不同项目的需求。
- 新的 React 插件:Vite 4.0 提供了两个用于 React 项目的插件,
- 高效的资源管理:
- CSS 导入优化:在 Vite 3 中,导入默认导出的
.css
文件可能会带来 CSS 的重复加载问题。Vite 4.0 废弃了.css
文件的默认导出,引入了?inline
查询后缀修饰符,使用该修饰符可以确保不会发出导入的.css
样式,避免了 CSS 的重复加载,提高了资源的加载效率。 - 预打包依赖项支持:Vite 4.0 在预打包依赖项时支持
patch-package
,这使得开发者可以更方便地对第三方依赖进行修改和定制,并且能够确保这些修改在项目构建过程中得到正确的应用,提高了项目的可维护性和灵活性。
- CSS 导入优化:在 Vite 3 中,导入默认导出的