尤雨溪是魔鬼，Vite 3天10更新

你老师真是我们这一代人的奋斗典范，感受你魔鬼更新的速度……

Vite（法语“快速”）是一种新型的前端施工工具。

最初是配合Vue3.0使用，后来适配到各种前端项目。 Vue、React 和 Preact 框架模板目前可用。

目前，Vue 使用 vue-cli 框架，而 React 通常使用 create-react-app 框架。虽然暂存工具不同，但所有内部打包工具都是Webpack。

为什么要开发全新的构建工具？ Webpack 不再好吗？

使用Vita构建的项目和使用Webpack构建的项目有什么区别？

新工具的出现必须解决现有工具的问题，否则新工具就没有价值和意义。

为了理解这个问题，我们首先要了解webpack是做什么的。

很多人的第一印象一定是“打包工具”，那么前端为什么需要打包工具呢？打包工具之前前端开发面临哪些挑战？我们真的需要打包工具吗？

随着互联网的发展，前端项目变得越来越复杂。同时，V8引擎也让JavaScript这门玩具语言插上了商业项目开发的翅膀，让JS不再束缚于浏览器环境，开始进入系统级开发领域。

随着项目复杂度的增加，代码规范和管理必须同步改进。因此，编程界提出了各种模块化规范。服务器端选择CommonJS规范，客户端选择AMD规范。然而，这两种模块化规范也都存在一定的问题。两者都是JS编程的。有两种不同的模块化规范在JS语言层面上是不够的。

最后，ECMA委员会在ES6中引入了语言级模块系统：ES模块规范。

在当前的编程实践中，前端编程受益于构造工具的发展。在编码过程中使用ES Modules规范进行编码是很常见的，但是后端更多的还是使用CommonJS规范。然而，NodeJS 已经发生了一些变化，正在逐渐转向 ES 模块规范。

我们看一些代码，简单回顾一下ES模块的语法功能。

模块化可以帮助我们更好的解决复杂应用开发过程中的代码组织问题，但是随着模块化的引入，我们的前端应用会出现一些新的问题，比如：

首先，我们使用的ES Modules系统存在环境兼容性问题。虽然主流浏览器的最新版本都支持该功能，但目前并不能保证用户一定会使用该浏览器。所以我们还是需要解决兼容性问题。

第二，模块化文件太多，按模块化划分，前端应用运行在浏览器中，每个文件都需要单独从服务器请求回来。分散的模块文件不可避免地会导致浏览器频繁发出网络请求，从而影响应用程序的性能。

最后说一下基于JS模块化的发散。随着应用变得越来越复杂，前端应用开发过程中不仅JavaScript代码需要模块化，HTML、CSS等资源文件也会面临模块化的问题。而且从宏的角度来看，这些文件在前端应用程序中也应该被视为一个模块，但这些模块的类型和用途与JavaScript不同。

对于开发过程来说，模块化肯定是必要的，所以我们需要在前面提到的模块化实现的基础上引入更好的解决方案或者工具来解决上面提到的三个问题，让我们的应用在开发过程中继续享受到模块化带来的好处开发阶段，不用担心模块化对生产环境的影响。

相信你已经想到了这一点，于是出现了webpack等一系列打包工具。上述问题是此类工具要解决的主要问题。

下一篇，我们就来看看恶魔尤雨溪维塔的高品质功能吧。