-
dev server冷启动
-
vite 数秒之内即可完成启动
-
Webpack 动辄十几秒甚至几十秒
-
热更新
- Vite 在热更新方面也是碾压 Webpack
-
由于 Vite 采用 unbundle 机制，所以 dev server 在监听到文件发生变化以后，只需要通过 ws 连接通知浏览器去重新加载变化的文件，剩下的工作就交给浏览器去做了
-
Webpack 发生耗时大概 5 s 的重新编译打包过程
-
dev server 启动以后，会 watch 源文件的变化。当源文件发生变化后，Webpack 会重新编译打包。这个时候，由于我们只修改了一个文件，因此只需要对这个源文件做 resolve、 load、 transfrom、parse 操作，依赖的文件直接使用缓存，因此 dev server 的响应速度比冷启动要好很多
-
dev server 重新编译打包以后，会通过 ws 连接通知浏览器去获取新的打包文件，然后对页面做局部更新。
-
首屏性能
-
webpack 浏览器向 dev server 发起请求， dev server 接受到请求，然后将已经打包构建好的首屏内容发送给浏览器。整个过程非常普遍，没有什么可说的，不存在什么性能问题。
-
vite 相比 Webpack， Vite 在首屏方面的表现就有些差了。
-
由于 unbundle 机制，首屏期间需要额外做以下工作
-
不对源文件做合并捆绑操作，导致大量的 http 请求；
-
dev server 运行期间对源文件做 resolve、load、transform、parse 操作；
-
预构建、二次预构建操作也会阻塞首屏请求，直到预构建完成为止；
- 懒加载性能
-
Webpack 的表现也正常，没什么好说的
-
Vite 在懒加载方面的性能也比 Webpack 差。
-
和首屏一样，由于 unbundle 机制，动态加载的文件，需要做 resolve、load、transform、parse 操作，并且还有大量的 http 请求，导致懒加载性能也受到影响。
-
如果懒加载过程中，发生了二次预构建，页面会 reload，对开发体验也有一定程度的影响。