@fluentui/ react-icons-font-subsetting-webpack-plugin (英语)

此软件包包括一个插件 webpack@>=5.0.0 财务报告和审定财务报表 @rspack/core@>=2.0.0 以子集图标字体文件 @fluentui/react-icons 当使用基于字体的图标执行时.

若为 optimization.usedExports 启用(默认情况下为 production 模式),此插件将子集字体文件,只包含您构建时实际使用的格言.

支持的导入模式

该插件支持以下导入模式: @fluentui/react-icons数字 :

1. 使用 fluentIconFont 条件

// Uses font implementation via resolve.conditionNames
import { AddRegular, DeleteFilled } from '@fluentui/react-icons';

2. 使用原子弹从 @fluentui/react-icons/fonts/*

// Direct atomic imports - no conditionNames required
import { AddRegular, AddFilled } from '@fluentui/react-icons/fonts/add';
import { DeleteRegular } from '@fluentui/react-icons/fonts/delete';

原子进口为使用少量图标的应用提供了更好的摇树和更快的建设时间.

3. 使用无头原子从 @fluentui/react-icons/headless/fonts/*

// Headless font atoms — no Griffel runtime.
// You MUST also import the headless font CSS so the @font-face declarations and
// font files enter the module graph (the headless atoms don't import them):
import '@fluentui/react-icons/headless/fonts/styles.css';
import { AddRegular, AddFilled } from '@fluentui/react-icons/headless/fonts/add';

该插件根据您实际使用的无头图标,子集了标准API所使用的相同的共享字体文件. 因为字体文件通过 styles.css,您的配置需要CSS加载器(例如. css-loader)所以说 url(...) 将引用解入网络包资产.

提示 : 你不必用手书写无原子头进口品. 此插件的对齐 @fluentui/react-icons-atomic-webpack-loader 使用 { headless: true, iconVariant: 'fonts' } ——它改写了平板桶进口(import { AddFilled } from '@fluentui/react-icons')变为无头字体原子,然后由此插件分集。 您仍然导入 @fluentui/react-icons/headless/fonts/styles.css 你自己来.

该插件为原子加载器的查询- 意识 moduleGranularity: 'icon' 模式。 排队模块通过它们 在精确选定导出时, 无查询物理路径. 使用协调加载器/插件释放:两个包执行a 汇编一级 v1 选择者能力握手并失败构建 当支持缺失或不兼容时生成不正确的子集.

使用量

与 fluentIconFont 条件

// webpack.config.js
const {
  default: FluentUIReactIconsFontSubsettingPlugin,
} = require('@fluentui/react-icons-font-subsetting-webpack-plugin');

module.exports = {
  module: {
    rules: [
      // Treat the font files as webpack assets
      {
        test: /\.(ttf|woff2?)$/,
        type: 'asset',
      },
    ],
  },
  resolve: {
    // Include 'fluentIconFont' to use the font implementation of the Fluent icons
    conditionNames: ['fluentIconFont', 'import'],
  },
  plugins: [
    // Include this plugin
    new FluentUIReactIconsFontSubsettingPlugin(),
  ],
};

原子导入( 不需要条件名称)

// webpack.config.js
const {
  default: FluentUIReactIconsFontSubsettingPlugin,
} = require('@fluentui/react-icons-font-subsetting-webpack-plugin');

module.exports = {
  module: {
    rules: [
      // Treat the font files as webpack assets
      {
        test: /\.(ttf|woff2?)$/,
        type: 'asset',
      },
    ],
  },
  plugins: [
    // Include this plugin
    new FluentUIReactIconsFontSubsettingPlugin(),
  ],
};

用红包

插件是捆绑-不可知的,在rspack中工作不变——相同的配置适用:

// rspack.config.js
const {
  default: FluentUIReactIconsFontSubsettingPlugin,
} = require('@fluentui/react-icons-font-subsetting-webpack-plugin');

module.exports = {
  module: {
    rules: [
      {
        test: /\.(ttf|woff2?)$/,
        type: 'asset',
      },
    ],
  },
  plugins: [new FluentUIReactIconsFontSubsettingPlugin()],
};

两只棕榈花特有说明:

• 对于无头导入模式,使用 rspack.CssExtractRspackPlugin 改为 mini-css-extract-plugin,与rspack不相容.
• webpack 财务报告和审定财务报表 @rspack/core 被宣布为 选项 端点依赖性,所以只需要安装实际使用的捆绑器.

橡胶包 >=2.0.0 是因为子设定读取模块图,并且 moduleGraph.getUsedExports() 暴露在JS API的urspack 2.0.

在红外线上 2.0.x 有一个限制: moduleGraph.getProvidedExports() 仅仅降落在2.1.0, 它让插件子集图标通过一个 名称空间导入 (单位:千美元)import * as Icons from '@fluentui/react-icons/fonts/…') (中文(简体) ). 因为这些图标不可能是 确定, 每个 受影响的软件包中的字体是未设置的子集——而不仅仅是命名空间导入的 自己的模块——因为从软件包所剩入的入件中进行子设定会降低格来法的命名空间 导入实际使用。 发生这种情况时, 自动提醒软件包名称 。 命名进口—— 普通案件——不受影响,完全归集。 升级到 rspack >=2.1.0 完全覆盖.

选项

onDuplicateInstances

'warn' | 'error'默认值 'warn'。 。 。 .

插件子集对一个已解决 @fluentui/react-icons 软件包实例。 当字体模块 从多个已安装副本解析 —— 虚拟存储中的对等依赖性变体将做到这一点 不存在任何版本冲突——释放出字体资产不能安全归属于一个连贯的来源.

插件在检查字体资产所有权之前检测多个参与副本, 全部离开 字体非子集, 使每个格莱弗仍然生成, 并用其中的路径警告 。 设定 'error' 失败 改为:

new FluentUIReactIconsFontSubsettingPlugin({ onDuplicateInstances: 'error' });

要重新进行子调试, 复制件会与捆绑器一起折叠到一个实例中 resolve.alias 条目. 请注意,这也会将每份拷贝都绑在单一的React和Griffel实例上.

使用无害环境管理 import 和通用JS系统 require() 从同一安装中不计为两份. 它们的用过的导出是合并的,每个被排放的字体资产都是子集一次.

开发检查

运行 yarn nx run react-icons-font-subsetting-webpack-plugin:test 单位,类型, 和网络包装/软件包集成覆盖.

运行 yarn nx run react-icons-font-subsetting-webpack-plugin:test:render 联 合 国 本地化全/子集字体浏览器检查 。 它需要剧作家铬 (单位:千美元)yarn playwright install chromium并检查标准/无头渲染, LTR/RTL 上下文,以及桌面/移动取景口. 屏幕截图被写入到 tmp/localized-font-render 在寄存器根处.