# Vite 概述
# 文档
# 什么是Vite
Vite 是一种新型前端构建工具，能够显著提升前端开发体验。Vite 旨在为现代 Web 开发提供极快的开发服务器启动速度和高效的构建性能。它主要由两部分组成：
一个开发服务器，它基于 原生 ES 模块 提供了 丰富的内建功能，如速度快到惊人的 模块热更新（HMR）。
一套构建指令，它使用
Rollup打包你的代码，并且它是预配置的，可输出用于生产环境的高度优化过的静态资源。
通过利用现代浏览器的特性和高效的构建策略，Vite 大大提升了前端开发和构建的效率，被广泛认为是下一代前端开发工具。
# Vite 有哪些特点
- 快速的开发服务器启动
利用浏览器的原生 ES 模块支持，实现即开即用的开发服务器，避免了传统打包工具的冷启动等待时间。
- 即时的模块热替换（HMR）
在开发过程中，当源代码发生变化时，Vite 能够迅速更新模块，提供流畅的开发体验。
- 优化的生产构建
使用 Rollup 进行生产环境的代码打包，支持代码拆分和树摇等优化技术。
- 丰富的插件生态
兼容 Rollup 的插件系统，方便扩展功能和集成各种工具。
- 框架无关性
除了对 Vue 的良好支持外，Vite 也支持 React、Preact、Svelte、Lit 等其他前端框架。
- 开箱即用
Vite 的默认配置已经涵盖了大多数现代开发项目的需求，开发者通常只需要少量或不需要配置即可开始开发。它与传统的打包工具（如 Webpack）相比，提供了更直观、更简洁的开发体验。
- 专为现代开发环境设计
Vite 的设计初衷就是为了支持现代 Web 开发工具链和项目结构，特别是前端单页面应用（SPA）和多页面应用（MPA）。因此，它的架构更加现代化，相比传统工具如 Webpack 更适合现代浏览器和 JavaScript 技术。
# Vite 有哪些缺点
- 开发环境下首屏加载变慢
由于 unbundle 机制， Vite 首屏期间需要额外做其它工作。不过首屏性能差只发生在dev server启动以后第一次加载页面时发生。之后再 reload 页面时，首屏性能会好很多。原因是dev server会将之前已经完成转换的内容缓存起来。
- 开发环境和生产环境构建方式不同
在开发模式下，Vite 通过 esbuild 转换代码和预构建。而在生产环境中，仍然使用 Rollup 进行打包构建。两种不同的方式可能会导致代码在开发环境中运行正常，但在生产环境中构建时出现问题。这增加了调试的复杂性。
- Rollup 限制
由于 Vite 在生产环境中使用 Rollup 打包，受限于 Rollup 的功能和插件生态，某些 Webpack 中常用的功能和插件可能不直接支持，或者需要特定的配置才能实现。
# 为什么要学习Vite
官方介绍-为什么选Vite (opens new window)
使用 Vite 可以显著提升开发体验，特别是对于现代前端开发项目，其快速的启动时间、强大的热更新功能和高度优化的生产构建流程都让它成为一种非常流行的工具。如果你的项目涉及大量的模块和依赖，Vite 的表现尤其出色。
最最重要的是，Vue.js 官方的脚手架 Vue Cli 以后使用 Vite 构建。
# nobundle 模式
nobundle 是 Vite 的一种工作模式，也被称为无打包模式，它主要应用于开发阶段。在这种模式下，Vite 不会像传统的打包工具（如 Webpack）那样对所有模块进行捆绑打包，而是直接使用浏览器原生的 ES 模块功能来加载和处理 JavaScript 文件。这与传统的“捆绑”方式形成鲜明对比。
nobundle 模式主要用于提升开发环境中的速度和灵活性，通过直接利用浏览器的 ES 模块支持，而不需要进行预先打包。这种模式使得 Vite 在开发阶段的启动速度极快，并能为现代前端开发提供极佳的开发体验。