mika-swc-plugin

compile ts or jsx code on brower side

Get started

npm install mika-swc-plugin

1. 针对 ts 内容简易设置

//transform typescript code:
import { useEffect, useState } from "react";
import initSwc, { transformSync } from "@swc/wasm-web";

const tsCode = `
interface User {
  name: string;
  age: number;
}

const greet = (user: User): string => {
  return \`Hello, \${user.name}!\`;
};
`;
async function importAndRunSwcOnMount() {
  await initSwc();
  const result = await transformSync(tsCode, {
    jsc: {
      parser: {
        syntax: "typescript",
        tsx: false,
      },
      target: "es2020",
    },
  });
  return result;
}
importAndRunSwcOnMount().then((result) => {
  console.log(result.code);
});

2. transform jsx file

//transform jsx format file content:
const jsxCode = `

const Component = ({ title, count }) => {
  return <div><h1>{title}</h1><p>{count}</p></div>;
};
`;

const output = transformSync(jsxCode, {
  module: { type: "es6" },
  minify: false,
  sourceMaps: false,
  jsc: {
    parser: {
      syntax: "ecmascript",
      jsx: true,
      // tsx: true, // transform tsx
      minify: { compress: { unused: true } },
    },
    transform: {
      react: {
        runtime: "classic", //"automatic" | "classic" | "preserve"
        pragma: "React.createElement",
        pragmaFrag: "React.Fragment",
      },
    },
    target: "es2020",
  },
  module: {
    type: "commonjs",
  },
}).code;

3. 基础压缩

const result = await transform(code, {
  minify: true, // 简单启用压缩
  jsc: {
    parser: { syntax: "ecmascript", jsx: true },
    target: "es5",
  },
});

4. 详细压缩配置

const result = await transform(code, {
  jsc: {
    parser: { syntax: "ecmascript", jsx: true },
    minify: {
      compress: {
        unused: true, // 删除未使用的变量
        dead_code: true, // 删除死代码
        drop_console: true, // 删除 console.*
        drop_debugger: true, // 删除 debugger
        collapse_vars: true, // 内联变量
        evaluate: true, // 求值常量表达式
        if_return: true, // 优化 if/return
        join_vars: true, // 合并 var 声明
        loops: true, // 优化循环
        reduce_vars: true, // 优化重复变量
        side_effects: true, // 删除无副作用代码
        switches: true, // 优化 switch
        typeofs: true, // 优化 typeof
        booleans: true, // 优化布尔值
        conditionals: true, // 优化条件语句
        properties: true, // 优化属性访问
        keep_fargs: true, // 保持函数参数
        keep_fnames: false, // 不保持函数名
        keep_classnames: false, // 不保持类名
      },
      mangle: {
        toplevel: true, // 混淆顶层作用域
        keep_classnames: false, // 不保持类名
        keep_fnames: false, // 不保持函数名
        keep_private_props: false, // 不保持私有属性
        safari10: false, // Safari 10 兼容
      },
      format: {
        comments: false, // 删除注释
        beautify: false, // 不美化
        braces: false, // 不总是使用大括号
      },
    },
    target: "es5",
  },
  minify: true,
});

reference

• @swc/wasm-web - This modules allows you to synchronously transform code inside the browser using WebAssembly.
• SWC 官方文档
• SWC Playground
• GitHub 仓库
• @swc/wasm-web NPM