Vite与Webpack : 一场前端构建工具的革命

---

前言

提示：既webpack出现后 , vite也在此领域中渐露头角 。随着时代发展 , 前端开发者在构建大型的应用时，通常需要很长时间才能启动开发服务器，文件修改后的效果也需要几秒钟才能在浏览器中反映出来。如此循环往复，迟钝的反馈会极大地影响开发者的开发效率, 这时候vite 它出现啦 !

---

一、vite是什么？

Vite（法语意思是 “快”）是一种全新的前端构建工具。可以把它理解为一个开箱即用的开发服务器 + 打包工具的组合，类似webpack + webpack-dev-server，但是更轻更快。
Vite 利用浏览器原生的 ES 模块支持和用编译到原生的语言开发的工具（如 esbuild）来提供一个快速且现代的开发体验。

二、vite与webpack相比优势在哪 ?

• 构建速度 : 基于go 语言开发的esbuild 快速 JavaScript 模块构建工具(毫秒级执行速度) 它能够快速地将原生 ES 模块代码转换为浏览器可执行的格式。这种原生 ES 模块的开发模式不仅提高了开发体验，还可以减少构建的时间和打包体积。
• 开发环境 : 原生 ES 模块支持，快速冷启动 ,而 webpack依赖 Webpack Dev Server，较慢的冷启动 。
• 热重载 : 在开发过程中，当文件发生变化时，Vite 只需重新编译修改的模块，然后将更新的模块发送给浏览器进行热重载，不需要整体打包和刷新页面，所以热重载速度很快 。

webpack 无法避免的问题

• 本地开发环境webpack也是需要先打包，然后服务器运行的是打包后的文件，所以代码量很大的项目就会有启服务很慢的现象。
• 热更新：Webpack 的热更新会以当前修改的文件为入口重新 build 打包，所有涉及到的依赖也都会被重新加载一次。虽然webpack 也采用的是局部热更新并且是有缓存机制的，但是还是需要重新打包所以很大的代码项目是真的有卡顿的现象

总结

vite的快速冷启动、按需编译、模块热更新 将会为开发者提供较好的体验感, 将是未来最受欢迎的打包工具之一 。