Skip to Content
SWC Plugin

SWC Plugin

功能介绍

@dune2/swc-plugin 是一个 SWC 插件，主要提供以下功能：

Semi UI CSS 优化

针对 Semi UI 组件库的 CSS 引入进行优化，通过移除 JavaScript 文件中的 CSS import/require 语句来提升性能。这个功能对齐了 SemiWebpackPlugin 的 omitCss 功能。

示例：

// 以下 CSS 引入语句会被移除
import "@douyinfe/semi-foundation/lib/es/button/button.css";
require("@douyinfe/semi-foundation/lib/cjs/badge/badge.css");

Semi UI 模块化导入优化

提供类似 babel-plugin-import 的能力，优化 Semi UI 的 barrel file 导出，通过精确导入文件来加快编译速度。

国际化函数处理

插件提供了强大的国际化函数处理能力，主要包括以下特性：

模板字符串转换

自动将标签模板字符串转换为标准的国际化函数调用格式：

// 输入
t`hello ${name}`;
 
// 输出
t("hello {name}", { name: name });

转换过程包括：

  • 解析模板字符串中的变量表达式
  • 生成标准化的参数对象
  • 保持原始代码位置信息（span）以便调试

Trans 组件访问器

插件内置了 Trans 组件的访问器（Visitor）实现，用于处理国际化相关的 JSX 转换。主要功能包括：

  • 识别和处理 Trans 组件的 JSX 元素
  • 规范化 Trans 组件的子元素
  • 自动处理 id 属性的生成和管理
  • 确保 Trans 组件至少包含一个子元素

实现原理：

// 通过 VisitMut trait 实现访问器
impl VisitMut for TransVisitor {
    // 处理 JSX 元素
    fn visit_mut_jsx_element(&mut self, element: &mut JSXElement) {
        // 1. 递归处理子元素
        // 2. 验证是否为 Trans 组件
        // 3. 规范化处理子元素
        // 4. 生成和管理属性
    }
}

配置选项

interface SwcPluginOptions {
  // 是否开启 semi-css-omit，即是否移除 js 中的 css import/require
  // 对齐 SemiWebpackPlugin 的 omitCss 功能
  enable_semi_css_omit?: boolean;
 
  // 优化 semi-ui 的 barrel file 导出
  // 类似 babel-plugin-import 能力
  // 精确导入文件，加快编译速度
  enable_semi_modularize_import?: boolean;
 
  // 外部额外配置的 semi-ui 的导入映射
  extra_semi_import_map?: Record<
    string,
    { path: string; is_named_import: boolean }
  >;
}

使用方式

该插件已集成在 @dune2/next-plugin 中，通常情况下你无需直接使用它。如果你需要在其他场景使用，可以参考以下配置：

// next.config.js
module.exports = {
  experimental: {
    swcPlugins: [
      [
        "@dune2/swc-plugin",
        {
          enable_semi_css_omit: true,
          enable_semi_modularize_import: true,
        },
      ],
    ],
  },
};

注意事项

  1. 插件的 CSS 优化功能仅对 Semi UI 相关的文件生效，不会影响其他文件的 CSS 引入。
  2. 模块化导入优化功能需要配合 enable_semi_modularize_import 选项使用。
  3. 如果你的项目中有自定义的 Semi UI 组件导入路径，可以通过 extra_semi_import_map 配置映射关系。
  4. Trans 组件必须包含至少一个子元素，否则插件会输出错误日志。
  5. 国际化函数的模板字符串转换会自动处理嵌套表达式，确保生成正确的参数对象。
Next PlugincreateStateContext