打包（swcpack）

🚧

此功能仍在開發中。此外，SWC 的主要作者為 Vercel 的 Turbopack（在新分頁中開啟）工作，因此此功能並非會積極開發的項目。

SWC 能夠將多個 JavaScript 或 TypeScript 檔案打包成一個檔案。

此功能目前的名稱為 spack，但會在 v2 中重新命名為 swcpack。 spack.config.js 將會被 swcpack.config.js 取代。

用法

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();

變成

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）
內嵌
常數傳遞
無效程式碼消除

上述說明的搖樹使用無效程式碼消除通道。目前，SWC 可以推論

source.js

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

為

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-loader .swcrc