为什么需要构建工具
意义
是什么
Vite作为一个新的开发与构建工具，有着比使用webpack，rollup等打包工具快得多的热更新(HMR)与服务器冷启动，得益于使用esbuild的方式预构建与直接在浏览器中使用ESModule的方式引入文件。
所以vite能帮助我们很大程度的提升开发效率与体验
依赖预构建
vite在启动服务的时候会先搜索项目中需要用到的原生模块，由于原生模块无法被浏览器的ESM所识别，所以vite利用esbuild将原生模块打包成ESM。
天然支持TypeScript
vite天然支持TypeScript，使得在配置构建文件的时候我们不需要对ts文件进行额外的支持。
插件
与其他构建工具一样，插件用于对构建工具的扩展，我们可以利用插件来对文件进行特定的处理。
上手使用
//安装pnpm
npm i -g pnpm
//初始化命令
pnpm create vite
//安装依赖
pnpm install
//启动项目
npm run dev
生产环境Tree Shaking
整体架构
为什么进行预打包
- 避免 node modules 过多的文件请求
- 将 CommonJS 格式转换为 ESM 格式
实现原理
- 服务启动前扫描代码中用到的依赖
- 用 Esbuild 对依赖代码进行预打包3.改写 import 语句，指定依赖为预构建产物路径
总结
学习了前端打包工具 Vite 的一段时间后，我深刻地体会到了它在现代前端开发中的重要性和优势。Vite 是近年来崭新的前端构建工具，以其出色的性能和独特的开发模式引起了开发者们的广泛关注。在我探索和使用 Vite 的过程中，我不仅更加熟悉了前端工程化的概念，还领悟到了一些关键的收获。
首先，Vite 引以为傲的开发服务器性能令人印象深刻。与传统的打包工具相比，Vite 在开发过程中无需预先构建整个项目，而是以“按需编译”的方式实时地提供模块。这大大缩短了开发者在修改代码后等待重新构建的时间，极大地提升了开发效率。通过借助 ES 模块的特性，Vite 可以将模块分解成更小的块，从而减少了不必要的网络请求，使得页面加载速度更快。这个特性不仅提高了开发体验，还有助于提升最终用户的使用体验。
其次，Vite 的插件体系为前端开发带来了更大的灵活性。Vite 基于 Rollup 构建，并通过其插件系统来支持各种各样的开发需求。开发者可以根据项目的实际情况选择性地引入各种插件，从而实现对 CSS 预处理器、状态管理、代码拆分等方面的自定义配置。这种模块化的插件机制不仅简化了项目的配置流程，还促使开发者更深入地理解和掌握项目中各种工具的运作原理。
此外，Vite 还支持热模块替换（HMR），这是一个在开发过程中极其有用的特性。通过 HMR，我们可以在不刷新整个页面的情况下，即时看到对代码的修改结果，从而快速迭代和调试。这对于复杂的前端应用程序尤其有益，因为它减少了开发和测试周期，提高了错误修复的效率。
然而，虽然 Vite 在很多方面都表现出色，但也需要考虑到一些潜在的限制。首先，由于 Vite 的相对新颖性，可能会面临一些生态系统不如成熟工具那样丰富的问题。在选择使用 Vite 时，需要仔细考虑项目的具体需求，确保有必要的插件和库支持。其次，由于 Vite 引入了新的开发模式，团队中的成员可能需要一些时间来适应其工作流程和特点。
总的来说，学习和使用 Vite 是一次富有成效的经验。它不仅教会了我如何更高效地进行前端开发，还让我意识到了工具的选择是如何影响开发流程和最终产品质量的。Vite 的出现推动了前端工程化的发展，为开发者们带来了更多选择和可能性。通过不断地探索和实践，我相信我将能够更好地运用 Vite，将其优势发挥到极致，为我的前端项目带来更卓越的体验。
