vite了解 | 青训营笔记

69 阅读2分钟

这是我参与「第五届青训营 」伴学笔记创作活动的第 8 天

Webpack 的第一次发布是在 2013 年发布,长久以来是主流的前端打包工具。Vite 的第一次发布是在 2021 年,是近两年来前端打包工具中的后起之秀,重点解决 Webpack 在开发阶段的开发痛点。

vite的优点

  • 极速的服务启动 使用原生 ESM 文件,无需打包!

  • 轻量快速的热重载 无论应用程序大小如何,都始终极快的模块热替换(HMR)

  • 丰富的功能 对 TypeScript、JSX、CSS 等支持开箱即用。

  • 优化的构建 可选 “多页应用” 或 “库” 模式的预配置 Rollup 构建

  • 通用的插件 在开发和构建之间共享 Rollup-superset 插件接口。

  • 完全类型化的API 灵活的 API 和完整的 TypeScript 类型。

image.png

与之前的打包工具相比vite有什么不同

在浏览器支持 ES 模块之前,JavaScript 并没有提供原生机制让开发者以模块化的方式进行开发。这也正是我们对 “打包” 这个概念熟悉的原因:使用工具抓取、处理并将我们的源码模块串联成可以在浏览器中运行的文件。

时过境迁,我们见证了诸如 webpack、Rollup 和 Parcel 等工具的变迁,它们极大地改善了前端开发者的开发体验。

然而,当我们开始构建越来越大型的应用时,需要处理的 JavaScript 代码量也呈指数级增长。包含数千个模块的大型项目相当普遍。基于 JavaScript 开发的工具就会开始遇到性能瓶颈:通常需要很长时间(甚至是几分钟!)才能启动开发服务器,即使使用模块热替换(HMR),文件修改后的效果也需要几秒钟才能在浏览器中反映出来。如此循环往复,迟钝的反馈会极大地影响开发者的开发效率和幸福感。

Vite 旨在利用生态系统中的新进展解决上述问题:浏览器开始原生支持 ES 模块,且越来越多 JavaScript 工具使用编译型语言编写。