目前主流的JS开发构建工具有两个——webpack用于前端项目的打包，rollup用于库的打包。

但是，随着ESM规范被各大主流浏览器支持，JS模块化已经成为了浏览器的内置功能，因此JS代码实际上已经不需要打包了。这使得市面上出现了snowpack,vite等主打budless（不打包）概念的开发构建工具。

什么是Vite?

Vite是EVAN YOU开发的下一代前端开发与构建工具：

  • 在开发模式下

首先，vite启动开发模式时会根据项目中的依赖项使用esbuild进行预构建，这主要是为了：

  1. 将commonjs模块转换为ESM模块；
  2. 将每个依赖项打包构建为一个文件，防止lodash-es这种库在ESM引入时产生瀑布请求（大量瞬时并发的文件get请求）；

因为这些依赖项变动较少，这些依赖项在预构建后会被缓存至.vite目录中。

之后，vite对项目代码并不做处理就直接启动开发服务器，利用浏览器对ESM的支持就可以打开项目。

在开发模式下，vite能够做到如此快速主要得益于以下方面：

  1. 对于需要打包构建或编译转换的文件使用了esbuild，esbuild基于go语言编写，其性能是传统JS打包工具的百倍。
  2. 依赖预构建使得占据代码大小的大部分依赖项能够缓存下来，仅在初次启动和依赖变化时重构建。
  3. 直接输出ESM至浏览器，省去了传统开发构建工具在DEV Server启动前的打包时间。

imgimg

  • 在生产模式下
  1. 考虑到浏览器兼容性以及实际网络中使用ESM可能会造成RTT时间过长，所以仍然需要打包构建。
  2. 又因为esbuild虽然快速，但其一方面还未到1.0的稳定版本，另一方面对代码分割和css处理等支持较弱，所以目前仍然使用rollup打包构建，不过未来很有可能改为esbuild。

可以看出，虽然Vite具备了下一代开发构建工具的潜力，但是目前其开发与生产环境打包过程的不同可能会带来项目表现不一致的问题。

什么是SnowPack?

SnowPack是Pika团队开发的轻量且快速的前端构建工具。该团队旨在‘让Web应用提速90%’。

SnowPack与Vite大部分功能和思想都非常相似（两者互相学习，如vite依赖预构建学习了snowpack，snowpack的HMR学习了vite）。不过，相比vite的实用主义，snowpack更理想化，技术至上一些。（我自己觉得）

两者的不同主要有以下两点：

1、SnowPack支持Streaming Imports。

Streaming Imports原理非常简单，就是将本地npm包依赖转换为远程npm包依赖，这样做的好处有以下几点：

  1. 由于远程的npm包已经经过了打包编译，开发构建工具无需对依赖进行处理，节约了构建时间；
  2. 开发者无需在本地下载安装依赖项项目就可以运行；
  3. 远程npm包分布在CDN边缘节点中，用户页面在打开时会就近下载依赖，节约项目加载时间；

Streaming Imports

之所以SnowPack能够想到并使用这种模式是因为pika团队之前开发了一个叫做SkyPack的项目，该项目就是将npm包打包编译压缩后传至CDN中供开发者使用。

2、SnowPack在生产模式中默认使用了esbuild,不打包直接输出ESM，与开发模式行为保持一致。不过它支持用户选择其它打包构建工具如rollup和webpack。（注意：多选择不意味着就是好的，snowpack选择多但每个模式都存在一些问题，而Vite与rollup深入结合带来的问题会少一些）

结论

目前看来要在实际的生产过程中放弃打包使用ESM Bundless还需要等待一些时日。

Vite的生产打包bundle，开发直出ESM的模式还有待成熟（主要要等esbuild稳定，使得开发和生产行为能够保持一致）。

SnowPack的模式相比Vite更为理想化，也需要进一步的观察。

相比之下，webpack虽然慢，但是其稳定性和生态的成熟度使得它还是目前大型项目开发构建的不二选择。（更何况webpack也在改进之中，比如webpack5性能有了很大提升, esbuild-loder等插件也可以进一步提升其打包速度）