vite使用初体验

根据业务需要，带着以下问题尝试切换打包工具从 webpack 到 vite

1, vite 集成 babel 了吗？能不能支持 old 浏览器？

2，是否支持 build 后的文件不带 hash？

3，开发环境 devserver 能不能支持请求代理转发？

4，HMR 是否比 webpack 好用？

5，适用广度？是否支持 ssr？

问题 1

Vite 对浏览器的默认支持基线是基于浏览器对 Native ESM 的支持。

ESM浏览器支持

默认对 IE11 和部分 android 浏览器不支持，但是 vite 可以利用 Rollup 插件的强大生态系统，想要支持上述浏览器只需要引入 Rollup 插件@vite/plugin-legacy

需要注意一下引入这个插件打包后的体积会增加80%左右。

综上，使用 @vite/plugin-legacy 插件可以支持不支持 ESM 的浏览器。

问题 2

根据业务需要，我们的静态资源在构建后会生成新的版本号，在 node 模板服务中会请求该版本号，达到实时更新资源的目的，所以我们打包的静态资源希望不带 hash。

使用vite rollupoptions可以自定义 rollup 打包规则，最终会和 vite 内置的打包规则 merge。通过配置rollup outputentryfilenames实现了打包资源不带 hash。

问题 3

vite 的 server options 完全支持配置 proxy，底层和 webpack 一样是使用 http-proxy.

问题 4

根据 vite 官网描述，服务启动基于原生的 ESM，不用打包，号称 instant server start. 在实际的使用中，server 启动在 600ms 左右。官网号称 Lightning Fast HMR，光速 HMR，实际使用中在修改代码之后没有感觉 HMR 有时间的消耗，但是有个小瑕疵，在 HMR 之后浏览器的 console 没有清空具体看这个issue

问题 5

根据官网的信息对 ssr 的支持还在试验阶段。

根据[Why we switched from Webpack to Vite](为什么切换webpack到vite)

vite 的作者描述，vite 不是完全用来替换 webpack 的，一小部分 webpack 的长尾特性 vite 没有包含，所以 vite 解决的是大多数前端开发遇到的开发和构建的问题。所以作者建议先用一下，能用就用，不能用你就接着用 webpack 完全是没有问题的。

代码实例：vite build react