这是我参与「第五届青训营 」伴学笔记创作活动的第 5 天
Vite 是一种现代化的前端构建工具，它的最大特点是快速，可以提供非常流畅的开发体验。下面是我对 Vite 的学习笔记。
一、安装和使用
安装 Vite 可以使用 npm 命令：npm install -g vite
创建项目：vite create
使用 Vite 生成的项目，可以通过 npm 命令运行项目：npm run dev
二、快速启动 Vite 提供了非常快速的启动体验。
在开发环境下，Vite 会把所有的代码分成不同的块，然后只有在需要时才会加载，这样可以显著减少开发环境下的加载时间。
在生产环境下，Vite 也可以生成高效的代码，使得应用程序的加载速度更快。
三、热重载 Vite 还可以提供热重载功能，当你修改了代码时，可以快速更新应用程序，使得开发工作更加高效。
四、插件系统 Vite 还提供了一个插件系统，可以轻松地扩展 Vite 的功能。例如，Vite 提供了一个 vue 插件，可以让你在使用 Vue.js 开发应用程序时，提供更快的构建速度和更好的开发体验。
五、支持多种语言和框架 Vite 可以支持多种语言和框架，包括 Vue.js、React、TypeScript 等。这使得你可以在使用不同的框架和语言时，都能够享受到 Vite 带来的高效构建和流畅开发的体验。
综上所述，Vite 是一个非常出色的前端构建工具，它能够提供高效的构建速度和流畅的开发体验。它可以轻松地集成到不同的语言和框架中，并提供了丰富的插件系统，可以轻松地扩展 Vite 的功能。如果你正在寻找一个快速、高效和现代化的前端构建工具，那么 Vite 绝对是值得一试的。
webpack和vite的比较
- webpack会先打包，然后启动开发服务器，请求服务器时直接给予打包结果。
而vite是直接启动开发服务器，请求哪个模块再对该模块进行实时编译。 - 由于现代浏览器本身就支持ES Module，会自动向依赖的Module发出请求。
vite充分利用这一点，将开发环境下的模块文件，就作为浏览器要执行的文件，而不是像webpack那样进行打包合并。 - 由于vite在启动的时候不需要打包，也就意味着不需要分析模块的依赖、不需要编译，因此启动速度非常快。
当浏览器请求某个模块时，再根据需要对模块内容进行编译。这种按需动态编译的方式，极大的缩减了编译时间，项目越复杂、模块越多，vite的优势越明显。 - 在HMR方面，当改动了一个模块后，仅需让浏览器重新请求该模块即可
不像webpack那样需要把该模块的相关依赖模块全部编译一次，效率更高。 - 当需要打包到生产环境时，vite使用传统的rollup进行打包，因此，vite的主要优势在开发阶段。
