Bundling (swcpack)
This feature is still under construction. Also, the main author of SWC works for Turbopack (opens in a new tab) by Vercel, so this feature is not something that will be actively developed.
SWC is able to bundle multiple JavaScript or TypeScript files into one.
This feature is currently named spack
, but will be renamed to swcpack
in v2
. spack.config.js
will be deprecated for swcpack.config.js
.
View a basic example of bundling (opens in a new tab).
Usage
pnpm i -D @swc/cli @swc/core
Create a spack.config.js
file and run:
npx spack
Configuration
To see all options, view the configuration.
Features
Compact Output
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 was designed with merging in mind, so naming collisions between multiple files are automatically handled.
Tree Shaking
Just like other modern bundlers, SWC can remove unused exports.
Import Deglobbing
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 Support
SWC supports importing CommonJS modules and emits more compact output than webpack.
import * as lib from "lib";
console.log(lib); // Prevent dce
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
- Global Inlining (e.g.
process.env.NODE_ENV
) - Inlining
- Constant propagation
- Dead code elimination
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
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
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.