精读《新一代前端构建工具对比》

本周精读的文章是 Comparing the New Generation of Build Tools。

前端工程领域近期出了很多新工具，这些新工具都运用了一些新技术或者跨领域技术，实现了一些突破，所以有必要了解一下这些工具都有什么特性，以及是否能够投入生产环境。

因为原文比较啰嗦，因此具体用法和支持细节不在这里展开，若是想进一步了解细节，能够直接阅读 原文)。

精读

按照从底层到上层的封装粒度，以 esbuild、snowpack、vite、wmr 的顺序介绍。

esbuild

esbuild 使用 go 语言编写，因为相对 node 更为底层，且不提供 AST 操做能力，因此代码执行效率更高，根据其官方 benchmark 介绍提速有 10～100 倍：

<img width=400 src="https://img.alicdn.com/imgextra/i1/O1CN01hzHuDP1JXuBvRgX7x_!!6000000001039-2-tps-800-170.png">

esbuild 有两大功能，分别是 bundler 与 minifier，其中 bundler 用于代码编译，相似 babel-loader、ts-loader；minifier 用于代码压缩，相似 terser。

使用 esbuild 编译代码方法以下：

esbuild.build({
  entryPoints: ["src/app.jsx"],
  outdir: "dist",
  define: { "process.env.NODE_ENV": '"production"' },
  watch: true,
});

但因为 esbuild 没法操做 AST，因此一些须要操做 AST 的 babel 插件没法与之兼容，致使生产环境不多直接使用 esbuild 的 bundler 模块。

幸运的是 minifier 模块能够直接替换 terser 使用，能够用于生产环境：

esbuild.transform(code, {
  minify: true,
});

因为 esbuild 牺牲了一些包大小换取了更高的执行效率，所以压缩后包体积会稍微大一些，不过也就是 177KB 与 165KB 的区别，几乎能够忽略。

esbuild 比较底层，因此能够与后续介绍的上层构建工具结合使用，固然根据工具设计理念，是否内置，内置到什么程度，以及是否容许经过插件替换就是另外一回事了。

snowpack

snowpack 是一个相对轻量的 bundless 方案，以前也写过一篇 精读 snowpack，其实 bundless 就是利用浏览器支持的 ESM import 特性，利用浏览器进行模块间依赖加载，而不须要在编译时进行。

跳过编译时依赖加载能够省不少事，好比不用考虑 tree shaking 问题，也不用为了最终产物加速而使用缓存，至关于这些工做交给最终执行的浏览器了，而浏览器做为最终运行时容器，比编译时工具更了解应该如何按需加载。

仅从编译时来看，修改单个文件的编译速度与项目总体大小有关，而若不考虑总体项目，仅编译单个文件（最多递归一下有限的依赖模块，解决好比 TS 类型变量判断问题）时间复杂度必定是 O(1) 的。

实际上咱们不多单独使用 snowpack，由于其编译使用的 esbuild 还未达到 1.0 稳定版本，在生态兼容与产物稳定性上存在风险，因此编译打包时每每采用 rollup 或 webpack，但这种割裂也致使了开发与生产环境不一致，这每每表明着更大的风险，所以在 vite 框架能够看到这块的取舍。

snowpack 是开箱即用的：

// package.json
"scripts": {
  "start": "snowpack dev",
  "build": "snowpack build"
},

咱们还能够增长 snowpack.config.js 配置文件开启 remote 模式：

// snowpack.config.js
module.exports = {
  packageOptions: {
    "source": "remote",
  }
};

remote 模式是 Streaming Imports，即不用安装对应的 npm 包到本地，snowpack 自动从 skypack 读取文件并缓存起来。

snowpack 看起来更可能是对 bundless 纯粹的尝试，而不是一个适合知足平常开发的工具，由于平常开发须要一个一站式工具，这就是后面说的 vite 与 wmr。

vite

能够理解为结合了 snowpack 特点的一站式构建工具，从开发到发布全套流程都帮你搞定。

涉及的用法很是多，具体内容能够看 官方文档。

与 snowpack 不一样的是，snowpack 生产打包的产物是独立的文件，而 vite 没有采用 esbuild 而是 rollup 打包，目的是为了打包为一个总体，并规避 esbuild 不稳定的风险。

另外因为 vite 集成化更高，比 snowpack 多了许多功能，好比 css 拆分、多页、使用 esbuild 进行依赖预构建、monorepo 支持、对多框架支持、SSR 等等。具体能够看 文档介绍。然而原文说这有利有弊，好处是开箱即用，弊端是缺少定制的灵活性。

其实革命性突破主要是 bundless，在这基础上发展出一系列便捷的功能，这值得每个工程化团队学习。其实就算决定再造一个轮子，也是维持 90% 功能不变的基础上，在默认的偏好设置作一些微调，而这些大多能够用 插件 解决。

总结下来，Vite 是一个既积极拥抱新特性，又为生产环境考虑的工程化全家桶，相比之下，技术栈过于前沿的工具只能称为玩具，而 Vite 是真的能够用一用的。

wmr

由 preact 做者开发，能够理解为 preact 版的 vite。因此对于 preact 技术栈的开发者更加友好，集成度更高。

原文提到的另外一个特点是，wmr 使用了 htm 转换 JSX，使其得到了更加精确的报错体验，便可以精确到源码行的同时指定到具体列。

综合功能和 vite 差很少，单页 + ssr 都支持，若是你平时使用 preact，或者想开发一个体积极小的项目，能够考虑用 wmr 全家桶。

总结

新一代前端构建工具最大特点有两个：更底层的语言编写、bundless，若是用一个词描述就是高性能。积极拥抱浏览器新特性或者知识跨界均可以帮助前端领域取得新的突破。

另外构建工具已经变得愈来愈集成化，从仅用于编译的 esbuild，到支持开发的 snowpack，再到内置了最佳实践、甚至支持好比 ssr 等后端能力、最后到垂直场景的 vitePress，每抽象一次，都更开箱即用，但带来的灵活性下降也成为各团队本身造轮子的理由，越上层越是有本身造轮子的冲动。

这和可视化领域很像，可视化从最底层的 svg、canvas、webgl 到基于其封装的命令式框架，再到数据驱动开发框架、彻底 JSON 配置化的图表库、甚至到零配置，根据数据猜配置的智能化项目，也是配置愈来愈少，但灵活度愈来愈低，使用什么层次的彻底看项目对细节的要求。

不过工程化相对仍是标准化的，由于可视化面向的是用户，而工程化面向的是程序员，咱们不能控制用户需求，但能够控制程序员的开发习惯 :P。

最后，除了升级你的共建工具外，换一台 M1 芯片电脑也能够极大提高开发效率，笔者亲测 webpack 构建速度提高 3 倍！

讨论地址是： 精读《新一代前端构建工具对比》· Issue #316 · dt-fe/weekly

若是你想参与讨论，请 点击这里，每周都有新的主题，周末或周一发布。前端精读 - 帮你筛选靠谱的内容。

关注 前端精读微信公众号

<img width=200 src="https://img.alicdn.com/tfs/TB165W0MCzqK1RjSZFLXXcn2XXa-258-258.jpg">

版权声明：自由转载-非商用-非衍生-保持署名（ 创意共享 3.0 许可证）