Vite 与 Umi 相比

[MengXiBiTAN]

看到知乎上一句话 [如果说 vue 出现是新中国成立，那么 vite 的出现相当于提出改革开放] ,如何看待 Web 开发构建工具 Vite ？

[MengXiBiTAN]

如何看待 Web 开发构建工具 Vite ？

[Jirajine]

我就有个疑问，为啥要单独造个轮子，维护好 @snowpack/plugin-vue 不好吗？这样所有主流框架 React/Vue/Svelte 就可以一个工具完全搞定了。

[MengXiBiTAN]

@Jirajine 打造自己的工具链 生态链

[Biwood]

webpack, snowpack, rollup, vite 打包工具可真多，umi 又是个什么玩意儿，第一次听说

[AngryPanda]

前端圈造轮子的速度。。。太快了

[okampfer]

其实我觉得与 Vite 对位的是 Snowpack 。要说到 Vite vs Umi，从我目前了解的来总结：

1 、Umi 只支持 React，Vite 从 2.0 开始不仅支持 Vue 也支持 React 了。
2 、Vite 的转码、打包速度明显快于 Umi，应该是几十倍的提升。esbuid 比 babel 快得多的多，rollup 虽然不一定比 webpack 快很多，但至少输出的代码体积更小（因为默认格式是 native ESM ）。
3 、接上一点，Vite 只支持（至少现在是） rollup，Umi 只支持 webpack 。
4 、对于目标是现代浏览器的前端项目来说，Vite 配置复杂度比 Umi 低。因为你写的代码和输出的代码都是遵循 ESM 标准的。

总的来说，Vite 比 Umi 要更加现代化，浏览器兼容性要求不包含 legacy 浏览器的新项目值得尝试。2.0 出了之后我觉得对比 snowpack 的优势更明显了，尤其是针对 vue 项目。

对于老项目或者要求兼容 legacy 浏览器的项目，Umi 可配置性优于 Create React App，但我总感觉阿里对待它并没有 antd 那么认真。之前尝试 Umi 的时候遇到了一个 bundle splitting 的配置问题，按照官方文档做结果打包出错最后是在 issue 里翻出了一小段说明。之前用 dva 也是的，文档太乱，而且写得也不清楚，有很多问题还要靠自己推敲、查 issue 。感觉就是写文档很赶、维护 issue 的人很忙没时间。

要我选 React scaffold 的话我不会选 Umi，而是选 craco 。Vite 我非常看好，未来简化前端工程化肯定功不可没的。

[okampfer]

@Jirajine 光有 plugin-vue 还不够，还需要用到 plugin-webpack 或者 plugin-rollup 。从文档上看 snowpack 官方明显更推荐 plugin-webpack 。snowpack 给了用户选择，Vite 绑定了 rollup 。但 snowpack 用了 plugin-webpack 之后 webpack 具体怎么配置得自己写，这个比较麻烦。

[okampfer]

@Biwood https://github.com/umijs/umi
阿里出的 React scaffold 。师承自 dva 。对位 CRA，主打可配置性。

[Jirajine]

@okampfer 不是啊，snowpack 也绑定了 rollup 。
它用 rollup 把你引用的所有模块都编译成一个个 ESM，开发部署就可以直接饮用了。
然后提供 bundle 作为一种优化选项，以前是推荐 plugin-webpack，现在已经是内置 esbuild 了。并且无论用什么 bundler 配置都很简单，因为打包步骤分离，代码的转译预处理之类的都由 snowpack 做完了，bundler 只需要把编译好的一个个 ESM 打包到一起。

[yaphets666]

vite 不是轮子 而是另一种思路
webpack 显然太过于繁琐
vite 的出现有望解决这一问题
在速度方面那就不用说了 vite 也是比较优秀的

[redbuck]

好事.

vite 算是面向未来的,新标准得有人去用去推才行.
你看这几年兼容 IE 几乎没人提了.

[okampfer]

@Jirajine #9
snowpack 没有绑定 rollup 。一直以来 dev 模式、production 模式都是用 esbuild 转码所有代码成 ESM 。dev 模式没有 bundle 这一步，甚至转码都是按需的，所以 dev server 启动才能那么快。production 模式其实也可以不用 bundler 插件，按 dev 模式那样输出，只是 plugin-webpack 、plugin-rollup 带来的一些优化也就没有了。

3.0 以前 esbuild 只是 transpiler 的角色，3.0 发布了之后 esbuild 同时也被用作 bundler 了，但依然提供了选项可以选择 webpack/rollup 作为 bundler 。

参考官方博客上 3.0 发布博文的一段：

In the meantime, we will also continue to invest in the existing bundler plugins for a long time to come, so that more mature projects can continue to use mature bundlers like Webpack & Rollup.

译文：同时，在很长一段时间内我们会继续在现有的 bundler 插件上投入精力，使得更成熟的项目可以继续选择使用成熟的 bundler，比如 webpack 和 rollup 。

[luoway]

esbuild 之前说自己是搞个 demo 看看用其他语言构建 javascript 能有多快的，半年不到就开始大搞特搞了，真棒

[Jirajine]

@okampfer #12 snowpack 是基于 rollup 实现的，不启用优化的情况下使用 rollup 把依赖的包编译成一个个的 ESM 。
启用优化后则在这个基础上再使用 bundler 把这些 ESM 打包到一起。

https://github.com/snowpackjs/snowpack/blob/main/snowpack/package.json#L51

[dickeylth]

@okampfer umi 也已经有了 esbuild 的 plugin 了： https://umijs.org/plugins/plugin-esbuild