バンドリング (swcpack)

SWCは、複数のJavaScriptまたはTypeScriptファイルを1つにバンドルできます。

この機能は現在spackという名前ですが、v2でswcpackに名前が変更されます。spack.config.jsはswcpack.config.jsに非推奨となります。

バンドリングの基本例 (新しいタブで開きます)をご覧ください。

使用方法

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

spack.config.jsファイルを作成し、実行します。

npx spack

設定

すべてのオプションを確認するには、設定を参照してください。

機能

コンパクト出力

rollupと同様に、SWCはコンパクトな出力を生成します。

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

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

は

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よりもコンパクトな出力を生成します。

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

上記のlibがCommonJSモジュールの場合、以下のようにトランスパイルされます。

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は以下を推論できます。

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

以下に

console.log(3);

高パフォーマンス

パフォーマンスはSWCの優先事項です。llvmによって最適化され、すべてのCPUコアを使用するため、非常に高速です。

複数エントリサポート

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はそれをインポートします。