你晓得 Vite 和 Webpack 吗？兴许有不少 ” 程序猿 ” 对它们非常相熟。

Webpack

Webpack 是一个 JavaScript 应用程序的动态模块打包工具，它会对整个应用程序进行依赖关系图构建。而这也会导致一个不可避免的状况，应用 Webpack 启动应用程序的服务器，会破费比拟长的工夫——一些大型应用程序可能须要 10 分钟以上。

此时你心里可能曾经在抓狂了，为什么会这么费时间？那就让咱们一起看看基于 Webpack 包的整个工作流。

基于 Webpack 包的工作流

当咱们保留文件时，整个 JavaScript 包将由 Webpack 重建，即便启用了 HMR，咱们进行批改可能也须要 10 秒钟能力在浏览器出现。在比较复杂的环境下，Webpack 的反馈却如此之慢，会为开发人员带来极大不便。

说完了 Webpack 咱们再为大家介绍一下 Vite。

Vite

Vite 是新一代 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 内置了一个 build 的配置的命令，该命令应用 Rollup 捆绑应用程序；咱们能够依据本人的具体需要对 Rollup 进行自在配置。

Vite 入门根底

应用 Vite 构建一个利用很简略，vite build 创立一个预配置的应用程序，支流前端框架 React、Vue 和 Svelte 等都能够反对。

创立应用程序所需的命令：

$ npm init @vitejs/app

或者

$ yarn create @vitejs/app

终端中的提醒将领导您创立正确的应用程序，而后运行 npm install

启动开发服务器

npm run dev

除此之外，还能够创立 Vite+React 的应用程序。React 的起始页与 Create React App 的默认模板十分类似，只是稍作批改：

此外 Vite preview 用于在本地对利用进行预览，还反对许多官网模板，包含 vanilla JavaScript 和 TypeScript。

论断

从目前的的应用情况来看，Vite 毫无疑问是新一代 JavaScript 构建工具中最快捷的，然而面对竞争，Webpack 也对一些内容进行优化，作为经典老牌工具 Webpack 用户基数自身就很大，实力仍旧不容小觑，当初仍旧是许多风行应用程序（如 Next）的默认 JavaScript 构建工具。

但随着工夫一直推移，Vite 周边的生态力量逐步跟上，联合它自身有的疾速的劣势，青出于蓝，也是不言而喻的事件。

作为开发者，当然也不会专断专言必须应用哪一个，依据不同得场景选不同的工具，期待在将来这些工具能够进一步为开发助力，让开发变得更加不便。

拓展浏览

大家如果对 Vue 感兴趣，无妨跟着实战教程，亲自搭建一个基于 Vue3 的表格编辑零碎。

原文链接：https://blog.bitsrc.io/vite-i…