你知道Vite和Webpack吗？可能很多“程序员”都非常熟悉。WebpackWebpack是一个JavaScript应用的静态模块打包工具，它为整个应用构建了一个依赖图。而这也会导致一个无法避免的情况。使用Webpack启动应用的服务器会花费很长时间——一些大型应用可能需要10多分钟。这个时候你可能心里已经很抓狂了，为什么这么费时间呢？那么我们就来看看基于Webpack打包的整个工作流程吧。基于Webpack打包的工作流当我们保存一个文件时，整个JavaScript包将被Webpack重新构建，即使启用了HMR，我们的修改可能需要10秒才能在浏览器中呈现。在更复杂的环境下，Webpack的反馈如此之慢，会给开发者带来极大的不便。说完Webpack，再给大家介绍一下Vite。ViteVite是新一代JavaScript构建工具，旨在提升开发者在构建JavaScript应用程序时使用Webpack的体验。Vite基于JavaScript生态系统近期的两项改进——浏览器中ES模块的可用性，以及esbuild等原生打包工具的编译能力，为开发者提供了更强大的支持。Vite的核心理念是非捆绑式开发和构建。浏览器中ES模块的可用性允许您在浏览器上运行JavaScript应用程序，而无需将它们捆绑在一起。Vite的核心思想很简单：当浏览器请求时，使用ES模块将一段应用代码进行转换和服务。在开始开发之后，Vite首先会将JavaScript模块分为两类：依赖模块和应用模块。依赖模块是从node\_modules文件夹导入的JavaScript模块。这些模块将使用esbuild进行处理和捆绑，esbuild是一种用Go编写的JavaScript绑定器，执行速度比Webpack快10到100倍。应用模块是为应用程序编写的模块，通常涉及特定于库的扩展，例如：jsx/vue或scss文件。Webpack等基于捆绑器的工作流必须在单个浏览器请求之前处理整个JavaScript模块，而Vite仅在单个浏览器请求之前处理依赖的模块。必要时，Vite会转换我们整个应用程序模块。为了方便大家理解，下面是一个基于Vite的完整工作流程。这张基于Vite的工作流图可以很清楚的让大家理解为什么Vite可以比Webpack更快的处理我们的开发构建。如果用通俗的方式来比较两者，就好比我们去饭店吃饭，Webpack的厨房是一次性把所有的饭菜做好，然后一个一个的给你端上来；而Vite的厨师们做完一道菜又快又快，而菜只是一道菜。使用Vite，处理开发构建的时间会随着应用程序的增长而缓慢增加。Vite的捆绑构建虽然原生ES模块现在在所有主流浏览器中都得到支持，但发布一个包含性能优化技术（如tree-shaking、延迟加载和通用块拆分）的捆绑应用程序仍然比开发非捆绑应用程序更具成本效益.后者带来更好的用户体验和更高的整体性能。为此，Vite内置了构建配置命令，使用Rollup来打包应用；我们可以根据自己的具体需求自由配置Rollup。Vite入门基础使用Vite构建应用程序非常简单。vitebuild创建一个预配置的应用，React、Vue、Svelte等主流前端框架都可以支持。创建应用程序所需的命令：$npminit@vitejs/app或$yarncreate@vitejs/app终端中的提示将引导您创建正确的应用程序，然后运行??npminstall以启动开发服务器npmrundev等东西，你也可以创建Vite+React应用。React的起始页与CreateReactApp的默认模板非常相似，稍作修改：另外，使用Vite预览在本地预览应用，支持许多官方模板，包括vanillaJavaScript和TypeScript。结语从目前的使用状态来看，Vite无疑是新一代JavaScript构建工具中速度最快的。不过，面对竞争，Webpack也对一些内容进行了优化。Webpack作为一个经典的老工具，有着庞大的用户群。它仍然不容小觑，仍然是许多流行应用程序（例如Next）的默认JavaScript构建工具。但随着时间的推移，Vite周边的生态力量逐渐迎头赶上，结合自身速度优势，后来居上的势头也是显而易见的。作为开发者，当然不会武断的说一定要用哪一个，根据不同的场景选择不同的工具。希望这些工具在以后能进一步辅助开发，让开发更方便。延伸阅读如果你对Vue感兴趣，不妨跟着实战教程，自己搭建一个基于Vue3的表格编辑系统。
