打包（swcpack）

¥Bundling (swcpack)

SWC 能够将多个 JavaScript 或 TypeScript 文件打包为一个。

¥SWC is able to bundle multiple JavaScript or TypeScript files into one.

该功能当前命名为 spack，但将在 v2 中重命名为 swcpack。spack.config.js 将在 swcpack.config.js 中被弃用。

¥This feature is currently named spack, but will be renamed to swcpack in v2. spack.config.js will be deprecated for swcpack.config.js.

查看 打包的基本示例 (opens in a new tab)。

¥View a basic example of bundling (opens in a new tab).

用法

¥Usage

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

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

¥Create a spack.config.js file and run:

npx spack

配置

¥Configuration

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

¥To see all options, view the configuration.

特性

¥Features

压缩输出

¥Compact Output

就像 rollup 一样，SWC 触发紧凑的输出。

¥Just like rollup, SWC emits compact output.

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

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

变成：

¥becomes:

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

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

¥SWC was designed with merging in mind, so naming collisions between multiple files are automatically handled.

摇树优化

¥Tree Shaking

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

¥Just like other modern bundlers, SWC can remove unused exports.

导入去通配

¥Import Deglobbing

为了帮助进行 tree-shaking，SWC 如果可能的话会取消导入。

¥To aid with tree-shaking, SWC deglobs imports if possible.

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

行为完全相同：

¥behaves exactly same as:

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

这保留了所有副作用。

¥This preserves all side effects.

CommonJS 支持

¥CommonJS Support

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

¥SWC supports importing CommonJS modules and emits more compact output than webpack.

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

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

¥If the lib above is a CommonJS module, it's transcompiled to:

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

优化

¥Optimizations

• 全局内联（例如 process.env.NODE_ENV）

  ¥Global Inlining (e.g. process.env.NODE_ENV)

• 内联

  ¥Inlining

• 不断传播

  ¥Constant propagation

• 消除死代码

  ¥Dead code elimination

上面描述的树摇动使用了死代码消除过程。目前，SWC 可以推断：

¥The tree shaking described above is using the dead code elimination pass. Currently, SWC can deduce:

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

进入：

¥into:

console.log(3);

高性能

¥High Performance

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

¥Performance is a priority for SWC. It's very fast because it uses all CPU cores and is optimized by llvm.

多入口支持

¥Multiple Entries Support

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

内置分块

¥Built-in Chunking

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

¥Using the same config as above, if android.ts and web.ts both references the same file, it will be extracted as a separate chunk and web.ts and android.ts will import it.