谈谈对 Vite 的了解？

Question

谈谈对 Vite 的了解？

本文参与了SegmentFault 思否面试闯关挑战赛，欢迎正在阅读的你也加入。

Answer 1

为什么需要 Vite?

• 现有打包器存在【缓慢的服务器启动】

  • 大多数 JavaScript 应用程序的打包构建工具，在【冷启动】开发服务器时，要基于打包器的方式启动，必须优先抓取并【构建整个应用】，然后才能提供服务，如 webapck、rollup 等

• 现有打包器存在【缓慢的更新】

  • 基于打包器启动时，重建整个包的效率很低，原因显而易见：因为这样更新速度会随着【应用体积增长】而【直线下降】，所以打包器支持了【动态模块热重载（HMR】，不过即使采用了 HMR 模式，其热更新速度也会随着应用规模的增长而显著下降

Vite 特点/优势

• 使用简单

  • vite 把一些能封装的内容都封装了，使得我们可以不用去接触那么多复杂晦涩的配置项，同时 vite 是基于 rollup 的，由于 rollup 本身的配置项也没有 webapck 那么多，所以在配置上体现的是很简单的
  • vite 内部集成 dev server ，这就意味着我们不用像使用 webpack 时，要单独在引入一个 webapck-dev-server，然后还要先配置后使用，所以从使用上体现是非常简单的

• 开发时速度快

  • 基于 ESModule  实现在访问时按需编译文件内容
  • 对第三方库进行预打包，使得在正式进行访问时，可直接从【缓存】中读取
  • 基于 esbuild 进行打包，esbuild 本身的打包速度是很快的

• 很好的扩展性

  • vite 本身是基于 rollup 的，所以 vite 可以使用 rollup 的生态资源

vite 生产环境仍需打包

• 尽管原生 ESM 现在得到了广泛支持，但由于嵌套导入会导致额外的网络往返，在生产环境中发布未打包的 ESM 仍然效率低下（即使使用 HTTP/2）
• 为了在生产环境中获得最佳的加载性能，最好还是将代码进行 【tree-shaking】、【懒加载】 和 【chunk 分割（以获得更好的缓存）】

• 目前选择 Rollup 进行打包

  • 虽然 esbuild 快得惊人，并且已经是一个在构建库方面比较出色的工具，但一些针对【构建应用 】的重要功能仍然还在持续开发中 — 特别是【代码分割】和【 CSS 处理】方面
  • 目前来说，Rollup 在应用打包方面更加成熟和灵活，当未来 esbuild 中相应的功能稳定后，也不排除使用 esbuild 作为生产构建器的可能

本文参与了SegmentFault 思否面试闯关挑战赛，欢迎正在阅读的你也加入。