使用 Vite 常碰到疑问

155 阅读3分钟

携手创作,共同成长!这是我参与「掘金日新计划 · 8 月更文挑战」的第27天,点击查看活动详情

回答实际生产中疑惑?

以上我们介绍了在开发环境中,我们懂得了为啥要选择使用 Vite,那在生产环境下,我们还得回答两个问题。

问题一,为什么生产环境仍需要打包呢?也就是说,生产环境能不能直接使用开发环境的玩法呢?答案是不能。尽管原生的 ESM 现在得到了广泛的支持,但由于嵌套导入会导致额外的网络往返,在生产环境中发布未打包的 ESM 仍然效率低下。即使使用的 HTTP2 也是如此。

为了在生产环境中获得最佳的加载性能,最好还是将代码进行 tree-shaking、懒加载、chunk 分割等操作。其中 chunk 分割的目的是获得更好的缓存,要确保开发服务器和生产环境构建之间的最优输出和行为一致并不容易。所以 Vite 附带了一套构建优化的构建命令,开箱即用。

那接着你可能会问第二个问题,为何不使用 ESBuild 的打包呢?它的速度不是飞快吗?

虽然 ESBuild 的快得惊人,并且已经是在一个构建库方面做得比较出色的工具。但一些针对构建应用的重要功能仍然还在持续开发中,特别是代码分割和 CSS 处理方面。

就目前来说,Rollup 在应用打包方面更加成熟和灵活。尽管如此,官方也表示,当未来这些功能稳定以后,也不排除使用 ESBuild 作为生产构建器的可能。

Vite 竞争对手

官网上也给了 Vite 的竞品,其实与其说竞品,倒不如说站在巨人的肩膀上,它们为 Vite 的发展提供了大量的灵感。

Snowpack:它是一个与 Vite 十分类似的非构建式原生的 ESM 开发服务器,除了不同的实现细节外,这两个项目在技术上比传统的工具有很多共同优势。Vite 的依赖构建也是受到了Snowpack V1,现在是 esinstall 的启发。这两个项目之间的一些主要区别有生产构建、依赖预构建、monoreport 的支持、CSS 预处理支持、Vue 优先级支持方面详细的信息,大家可以参阅官方文档。

WMR:Preact 团队的 WMR 提供了类似的特征集,而 Vite2.0 对 Rollup 插件接口的支持正是受到了它的启发。WMR 主要是为 Preact 项目而设计,并为其提供了集成度更高的功能,比如预渲染的。就使用范围而言,它更加贴合于 Preact 框架与 Preact 本身一样的强调紧凑的大小。如果你正在使用 Preact,那么 WMR 可能会提供更好的体验。

@web/dev-server:@web/dev-server 以前叫 es-dev-server,它是一个伟大的项目。基于 Koa 的 Vite1.0 的开发服务器就是受到了它的启发。@web/dev-server 适用范围不是很广,它并未提供官方的框架集成,并且需要为生产构建手动的设置 Rollup 配置。