Vite为何比Webpack更好？

banq

Vite 是新一代的 JavaScript 构建工具，它利用浏览器中 ES 模块的可用性和编译为本机捆绑器，为您带来最新的 JavaScript 技术所能获得的最佳开发者体验。 通过使用基于 ESM 的工作流程进行本地开发，Vite 确保您的开发服务器即使在处理大型 JavaScript 应用程序时也能保持快速。 Vite 还提供了一个合理的生产构建配置，可以处理基于库的语法，如 JSX、Vue 和 TypeScript。 通过在底层使用 Rollup，Vite 确保为您的生产构建实现性能优化技术，如 tree-shaking、延迟加载和常见的块拆分。 最后，您还可以通过编写插件来扩展 Vite 功能。 虽然 Webpack 仍然是许多流行应用程序（如 Next.js 和 Create React App）的默认 JavaScript 构建工具，但鉴于开发者社区的积极反馈，Vite 很有可能成为未来最受欢迎的选择。   Webpack构建速度慢  Webpack是一个基于捆绑器的构建工具，这意味着要为您的应用程序提供服务，它需要抓取、处理和连接应用程序的整个 JavaScript 文件。这适用于您编写的依赖项和应用程序代码。 这就是为什么使用 Webpack 构建用于开发的应用程序和启动开发服务器可能需要非常长的时间的原因——一些大型应用程序可能需要 10 多分钟。 然后，当您保存文件时，整个 JavaScript 包将由 Webpack 重新构建，这就是为什么更改可能需要长达 10 秒才能反映在浏览器中，即使启用了 HMR。Webpack 导致的缓慢反馈循环给开发大型 JavaScript 应用程序的开发人员带来了糟糕的开发体验。   Vite的核心理念：非捆绑开发构建 当您开始开发构建时，Vite 将首先将您的 JavaScript 模块分为两类：依赖模块和应用程序模块。 浏览器中 ES 模块的可用性允许您在浏览器上运行 JavaScript 应用程序，而无需将它们捆绑在一起。Vite 的核心思想很简单：当浏览器请求它时，使用 ES 模块转换并提供一段应用程序代码。

  • 依赖项模块
是您从node_modules文件夹中导入的JavaScript 模块。这些模块将使用esbuild进行处理和捆绑，esbuild是一个用 Go 编写的 JavaScript 捆绑器，执行速度比 Webpack 快 10-100 倍。
  • 应用程序模块
是您为应用程序编写的模块，通常涉及特定于库的扩展，如、.jsx或.vue文件.scss。  虽然像 Webpack 这样的基于捆绑器的工作流必须在单个浏览器请求之前处理您的整个 JavaScript 模块，但 Vite 只在单个浏览器请求之前处理您的依赖模块。 当您的应用程序需要时，您的应用程序模块将由 Vite 转换和服务：   Vite 的捆绑生产版本 虽然现在所有主流浏览器都支持原生 ES 模块，但发布一个捆绑应用程序，它实现了诸如 tree-shaking、延迟加载和通用块拆分等性能优化技术，仍然比非捆绑应用程序带来更好的整体性能。 出于这个原因，Vite 附带了一个预先配置的build命令，该命令使用Rollup捆绑您的应用程序。Vite 还为您提供了合理的默认 Rollup 配置，您可以在需要时对其进行自定义。   Vite 入门 create-app要开始使用 Vite，您可以使用 Vite 的引导程序立即创建一个预配置的应用程序。该工具支持流行的前端库，包括 React、Vue 和 Svelte。 这是运行 Vite 引导的应用程序所需的命令： 
$ npm init @vitejs/app
# or
$ yarn create @vitejs/app

终端中的提示将指导您创建正确的应用程序。创建应用程序后，您需要运行npm install然后npm run dev启动开发服务器。 Vite 支持许多官方模板，包括原生 JavaScript 和 TypeScript。