前端领域新一代构建工具的对比

最新推荐文章于 2024-06-03 15:53:49 发布

薛定谔的猫96

最新推荐文章于 2024-06-03 15:53:49 发布

阅读量1.3k

点赞数 1

分类专栏：前端文章标签：前端 esbuild vite wmr

本文链接：https://blog.csdn.net/qq_42415326/article/details/124554033

版权

123 篇文章 9 订阅

订阅专栏

近年涌现出大量改善开发人员体验的新的开发者工具，包括但不限于webpack、Babel、Rollup、Parcel、create-react-app。我们的目的是了解它们，必要时做出最佳选择。

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

每个工具的都在不同程度上支持以下功能：

esbuild

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

esbuild 目前处于 0.14.38 版本，还未完全准备好用于稳定生产的 1.0 版本。减少等待构建运行的时间，能改善开发体验，但是esbuid相对较为底层，因此在拉入依赖关系和配置环境上环节上会花费时间，使用Rollup 和 terser 的bundler包相较略小 6.8 % 左右。

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,
});

snowpack 采用的是 bundless 方案，是指利用浏览器支持的 ESM import 特性，利用浏览器进行模块间依赖加载，而不需要在编译时进行，相对轻量。如此也就不需要考虑 tree shaking 问题，也需要为了加速最终产物而使用缓存，而由执行的浏览器来完成。

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

单独使用 snowpack 是少的，其作为 esbuild的上层封装， esbuild 还未达到 1.0 稳定版本，在生态兼容与产物稳定性上存在风险，所以编译打包时往往采用 rollup 或 webpack。

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绕过npm安装，从Skypack中提取 npm 包，Skypack是一个托管npm注册表的CDN，它是预先优化的，可以在浏览器中工作。然后，Snowpack将它放在一个./snowpack/pkg URL中。

snowpack 看起来更多是对 bundless 纯粹的尝试，而不是适合日常开发的一站式工具，相反，vite 与 wmr 更适合。

esbuild专注于构建步骤，Snowpack专注于开发服务器，而Vite则同时提供了这两点：一个完整的开发服务器和一个使用Rollup的优化构建命令。

vite 集成化更高，除了bundless，同时比 snowpack 多了许多功能，比如 css 拆分、多页、使用 esbuild 进行依赖预构建、monorepo 支持、对多框架支持、SSR 实验性支持等等。

wmr，是为 preact 和 react 提供的，使用了 htm 转换 JSX，尽可能地接近浏览器中的原生JSX。使其获得了更加精确的报错体验，即可以精确到源码行的同时指定到具体列，而不必使用source map。

若使用的是Preact，除了快速安装npm之外，完全不需要任何设置。可如果使用 React with wmr，package.json中把 htm/preact 别名为 htm/react ，把 react 别名为 es-react：

/** package.json */
"alias" :{
  "htm/preact": "htm/react",  
  "react": "es-react"
},

/** 组件中使用: import { React, ReactDOM,} from 'es-react'; */

从 es-react 中引入React，这是因为wmr依赖于与本地JavaScript模块兼容的包。React默认不使用本地模块，而是使用一种称为 UMD较老的模块样式。

wmr默认支持流式导入，所以，另一种方案是选择使用 Skypack 流式导入：

import React from 'https://cdn.skypack.dev/react';
import ReactDOM from 'https://cdn.skypack.dev/react-dom';

关注