不需要打包的构建工具比较snowpack和vite

关注 vue3 的人一定关注到尤雨溪的另一个开源项目 vitejs,
它是一个不需打包的构建工具,开发时使用 es module 导入代码,生产环境用 rollup 构建。
它 有一些显著的优势:

  • 使用es module导入代码, 极快的启动速度(ESM)
  • 即时的热模块替换(HMR)
  • 真正的按需编译

目前尤雨溪似乎花费了蛮多精力在这个项目的,目前 vitejs 600左右 commit,vue3 2000左右 commit, 粗略估算工作量前者约后者的 30%,我甚至忍不住想 vue3 的延期会不会跟这个项目有关呢?可见尤大对这个项目的重视。

vitejs 依赖现代浏览器的一个关键特性,即es module imports, 那么市面上有没有类似的工具呢? 答案是有的,vitejs 的 how and why 章节也列了出来,其中最接近的一个就是 snowpack,文档里说道:

  • 两个工具都原生支持基于 ESM 的 HMR。 Vite 先一步支持, snowpack 在 v2 时也支持了。双方在基于 ESM 的 HMR 上合作过,尝试建立统一的 api, 但因为底层不同还是会略微不同。
  • vite 更加专注,自带更多功能,如 typescript 编译,css 导入, css 模块和 post css 的默然支持。
  • 生产环境打包, vite 使用 rollup, snowpack 使用 parcel/webpack

今天恰巧也关注到 snowpack v2 的发布博客, 在 v1 的目标 在浏览器中直接使用 npm 包外,v2 又增加了对基于 ESM 的 HMR 的原生支持。它有如下特性:

  • 不需打包的 O(1) 复杂度的构建系统。只编译改变的文件,其它文件不需要重新编译。
  • 更快的开发环境。少于 50ms 的启动,typescript, jsx, hmr, css modules 等的原生支持
  • 自定义构建。使用构建脚本链接到你最喜欢的构建工具。
  • 生产环境打包。使用 webpack 或 parce 等工具打包,或者直接不打包直接使用。

从特性看, vitejs 和 snowpack 2.0 有几乎90%重合,它们的优缺点如下:

  • vitejs 优点是尤雨溪出品,可能和 vue3 生态更好的融合。 缺点是目前还未出正式版,文档也不完善。目前 5.4k star。
  • snowpack 优点是更加成熟,有成熟的 v1 和已经发布正式版的 v2, 支持 react, vue, preact, svelte 等各类应用,文档也更加完善。 目前 7.9k star

开发时不需要编译打包整个应用,而是单个文件直接供浏览器使用,且默然支持 jsx 和 typescript, 编译成 js 后发送给浏览器:

// 你的代码
import * as React from 'react'

// 编译输出
import * as React form 'web_modules/react.js'

这对于开发确实是一个杀手级特性,上面提到, snowpack 和 vitejs 作者有过合作, 尝试统一 ESM-HMR API 规范,预计不久的将来,越来越多的框架会迁移到 ESM-HMR,让我们持续关注。目前对于 snowpack 和 vitejs 而言,它们功能类似, snowpack 官网和文档齐全,我可能会更倾向于尝试 snowpack。

nodejs 
更新时间:2020-05-28 18:28:30

本文由 topcoder 创作,如果您觉得本文不错,请随意赞赏
采用 知识共享署名4.0 国际许可协议进行许可
本站文章除注明转载/出处外,均为本站原创或翻译,转载前请务必署名
原文链接:https://www.topcoder.club/2020/05/bundleless-build-tool-compare-snowpack-vs-vite
最后更新:2020-05-28 18:28:30

评论

Your browser is out of date!

Update your browser to view this website correctly. Update my browser now

×