这是我参与「第四届青训营 」笔记创作活动的第五天
为什么 Vite 是当前最高效的构建工具？
一般的项目使用 Webpack 之后，启动花个几分钟都是很常见的事情，热更新也经常需要等待十秒以上。这主要是因为：
- 项目冷启动时必须递归打包整个项目的依赖树
- JavaScript 语言本身的性能限制，导致构建性能遇到瓶颈，直接影响开发效率
这样一来，代码改动后不能立马看到效果，自然开发体验也越来越差。而其中，最占用时间的就是代码打包和文件编译。
而 Vite 很好地解决了这些问题。一方面，Vite 在开发阶段基于浏览器原生 ESM 的支持实现了no-bundle服务，另一方面借助 Esbuild 超快的编译速度来做第三方库构建和 TS/JSX 语法编译，从而能够有效提高开发效率。
除了开发效率，在其他三个维度上， Vite 也表现不俗。
- 模块化方面，Vite 基于浏览器原生 ESM 的支持实现模块加载，并且无论是开发环境还是生产环境，都可以将其他格式的产物(如 CommonJS)转换为 ESM。
- 语法转译方面，Vite 内置了对 TypeScript、JSX、Sass 等高级语法的支持，也能够加载各种各样的静态资源，如图片、Worker 等等。
- 产物质量方面，Vite 基于成熟的打包工具 Rollup 实现生产环境打包，同时可以配合
Terser、Babel等工具链，可以极大程度保证构建产物的质量。
因此，如果你想要学习一个前端构建工具，Vite 将会是你当下一个最好的选择。它不仅解决了传统构建工具的开发效率问题，而且具备一个优秀构建工具的各项要素，还经历了社区大规模的验证与落地。
为什么都选 Vite ？
Webpack和Vite都用过，但论开发体验，无疑后者领先。原因在于Vite npm run dev后进行类似懒加载的处理模式，只有访问到时才去编译，不像Webpack已保存全都给你编译了。还有就是对各种文件的支持，Vite里各种配置也很全，从Webpack过渡到Vite几乎没有啥障碍。
还有就算是编译，依旧比Webpack快，见下图
Vite采用的是Esbuild编译，源文件不打包，生产环境基于Rollup的Bundler。
