写在前面

很多伙伴应该看到了vue发布的一条消息：vue2将在23年底不再进行维护，所以大家以后的开发也都是向着3来走了，历史的走向就是这样，就是优胜略汰。今天呢也算是复习下vite

vue的新一代vite

官网的宣传语：下一代前端开发与构建工具

既然是这样，那么他就是比着v2有着很大的改进，事实上也的确是如此，但是不是那么完善，很多插件都需要大家进行踊跃贡献。

v2的项目在你使用npm run xxx 运行时一般会到60%的卡着不动了，所以当运行完后时间也都过去大概一分钟了。vite就不一样了，当你运行的时候一般三秒足以解决所有的编译。这些主要是编译工具和执行的策略的不同造成的。

一般打包工具

Grunt：

算是始祖了，一切皆配置，所以会出现比较多的配置项，诸如option,src,dest等等。而且不同的插件可能会有自己扩展字段，学习难度大，运用的时候需要明白各种插件的配置规则，大部分都是放弃了。

Gulp：

易于学习和使用，提供少量的api就可以按照规则进行代式的进行打包，非常的容易上手，而且打包后的体积比grunt小很多。

webpack: 

经久不衰吧算是，是模块化管理工具和打包工具。通过 loader 的转换，任何形式的资源都可以视作模块，它可以将许多松散的模块按照依赖和规则打包成符合生产环境部署的前端资源。还可以将按需加载的模块进行代码分隔，等到实际需要的时候再异步加载。它定位是模块打包器，而 Gulp/Grunt 属于构建工具。Webpack 可以代替 Gulp/Grunt 的一些功能，但不是一个职能的工具，可以配合使用。

Rollup：

下一代 ES6 模块化工具，特点是利用 ES6 模块设计，利用 tree-shaking生成更简洁的代码。一般而言，对于应用使用 Webpack，对于类库使用 Rollup；需要代码拆分(Code Splitting)，或者很多静态资源需要处理，再或者构建的项目需要引入很多 Commonjs 模块的依赖时，使用 webpack。代码库是基于 ES6 模块，而且希望代码能够被其他人直接使用，使用 Rollup。

通过上述的比较可以看出无论是vue还是react选择rollup来进行类库的打包都是独一无二的选择。

图表对比

一般打包形式：先把所有的资源都给打包编译然后再做对应的输出

vite的打包形式：

webpack:

因为其本身的机制慢：

Webpack启动慢，是因为本身的bundle机制产生的。 Webpack通过这种 bundle机制，将项目中各种类型的源文件转化供浏览器识别的js、css、img等文件，建立源文件之间的依赖关系，并将数量庞大的源文件合并为少量的几个输出文件。 所以这个过程是非常耗时的。当你的文件越大时耗费的时间越长。

开发环境：

开发模式下，npm run xxx 需要 Webpack 完成整个项目的编译才可以启动成功，这就导致构建过程耗时越久，项目启动越慢。

优化：

为了加快构建速度，Webpack 也做了大量的优化，如 loader 的缓存功能、webpack5 的持久化缓存等，但是这些不是针对于首次启动的来讲的，只是在你运行完首次之后才会进行的优化，只要 Webpack 的bundle机制不变，基那就别想超过vite的启动速度。

vite

首先就是他的unbundle机制，与webpack截然相反

unbundle 即为不需要构建、分解 module graph，源文件之间的依赖关系完全通过浏览器对 ESM 规范的支持来解析。在启动过程中只需做一些初始化的工作，剩下的全交给浏览器来处理。

当浏览器发起请求以后，终端会通过 middlewares 对请求做拦截，然后对源文件做 resolve、load、transform、parse 操作，然后再将转换以后的内容发送给浏览器。

unbundle优势：

模块之间的依赖关系的解析由浏览器实现

文件的转换由 dev server 的 middlewares 实现并做缓存

不对源文件做合并捆绑操作

热更新与缓存

Vite 在热更新方面完虐webpack。 修改原文件后，Webpack耗时大概 3 s 的重新编译打包过程, 而vite在一秒以完成了更新。

webpack其实也是在做了缓存优化后才出现的这么快热更新，不然会更新的更慢。当源文件发生变化后，Webpack 会重新编译打包。因为只修改了一个文件，所以只需要对这个源文件做 resolve、 load、 transfrom、parse 操作，依赖的文件直接使用缓存，因此响应速度比第一次的启动快很多。

vite的缺点：

由于vite的unbundle机制，这就导致项目的解析大部分都交给了浏览器来进行处理，由于不对文件做捆绑操作，第一次在加载的时候首屏期间会产生大量的请求，预构建、二次预构建操作也会阻塞首屏请求，直到预构建完成为止。导致的结果就是白屏

不过首屏性能差只发生在第一次加载页面时发生。之后再reload页面时，首屏性能会好很多。因为 dev server 会将之前已经完成转换的内容缓存起来。

面试官：请你解释下，为什么vite会比较快。 我：看这个地址知道juejin.cn/editor/draf…