Bundling (swcpack)

🚧

该功能将在v2版本中移除，推荐使用基于SWC的打包工具，例如Parcel 2 (opens in a new tab)、Turbopack (opens in a new tab)、rspack (opens in a new tab)或fe-farm (opens in a new tab)。

请改用上述任一打包工具。

SWC 能够将多个 JavaScript 或 TypeScript 文件捆绑到一个文件中。

这个功能目前名为 spack，但将在 v2 中更改为 swcpack。spack.config.js 将被弃用，改为 swcpack.config.js。

查看一个基本的捆绑示例 (opens in a new tab)。

用法

pnpm i -D @swc/cli @swc/core

创建一个 spack.config.js 文件并运行：

npx spack

配置

要查看所有选项，请查看配置。

功能

紧凑输出

就像 rollup，SWC 会发出紧凑的输出。

a.js

console.log("loading A");
export function a() {
  console.log("use!");
}

lib.js

import { a } from "./a";
a();

becomes:

output.js

console.log("loading A");
function a() {
  console.log("use!");
}
a();

SWC 的设计目的是合并，因此多个文件之间的命名冲突会自动处理。

树摇

就像其他现代捆绑器一样，SWC 可以删除未使用的导出。

导入去抖

为了帮助树摇，SWC 会去抖导入。

import * as lib from "lib";
lib.foo();

行为与以下代码完全相同：

import { foo } from "lib";
foo();

这保留了所有副作用。

CommonJS 支持

SWC 支持导入 CommonJS 模块，并发出比 webpack 更紧凑的输出。

source.js

import * as lib from "lib";
console.log(lib); // Prevent dce

如果上面的 lib 是 CommonJS 模块，则会被转译为：

output.js

const load = __spack_require.bind(void 0, function (module, exports) {
  // Code from lib goes here
});
const lib = load();
console.log(lib); // Prevent dce

优化

全局内联（例如 process.env.NODE_ENV）
内联
常量传播
死代码消除

上面描述的树摇是使用死代码消除 pass 实现的。目前，SWC 可以推断：

source.js

let b = 2;
let a = 1;
if (b) {
  a = 2;
}
let c;
if (a) {
  c = 3;
}
console.log(c);

into:

output.js

console.log(3);

高性能

性能是 SWC 的首要任务。它非常快，因为它使用所有 CPU 核心并由 llvm 优化。

多入口支持

spack.config.js

const { config } = require("@swc/core/spack");
 
module.exports = config({
  entry: {
    web: __dirname + "/src/web.ts",
    android: __dirname + "/src/android.ts",
  },
  output: {
    path: __dirname + "/lib",
  },
  module: {},
});

内置分块

使用与上面相同的配置，如果 android.ts 和 web.ts 都引用了同一个文件，它将被提取为单独的块，并且 web.ts 和 android.ts 将导入它。

@swc/html .swcrc