如何优化@fluentui/react-icons使用，实现按需引入减小打包体积？

问题描述 #

我当前采用import { Home20Regular } from '@fluentui/react-icons'的方式导入图标，期望通过tree shaking在构建时仅引入使用的单个图标，但实际似乎引入了整个包，导致打包体积增大。请问是否有更优的@fluentui/react-icons使用方式，能仅引入代码中用到的图标？

解决方案 #

1. 直接导入单个图标文件 #

放弃从包根目录批量导入，改为直接导入对应图标的单独文件，让构建工具精准识别仅使用的图标，避免引入整个包。示例代码：

// 替换原根目录导入写法
import Home20Regular from '@fluentui/react-icons/icons/home-20-regular';

不同图标对应的路径遵循@fluentui/react-icons/icons/[图标名称小写-尺寸-样式]的规则，比如Search20Filled对应的路径就是@fluentui/react-icons/icons/search-20-filled。

2. 确保构建工具的Tree Shaking配置生效 #

• Webpack：将mode设置为production（默认启用Tree Shaking），同时确保optimization.usedExports设为true。
• Vite：生产构建默认启用Tree Shaking，无需额外配置，但要避免使用import * as Icons from '@fluentui/react-icons'这类全量导入写法。

3. 可选：用babel-plugin-import简化导入（Webpack项目） #

如果想保留批量导入的语法同时实现Tree Shaking，可以配置babel-plugin-import插件，自动将批量导入转换为单个图标文件的导入：

1. 安装插件：

npm install babel-plugin-import --save-dev

2. 在Babel配置文件中添加规则：

{
  "plugins": [
    [
      "import",
      {
        "libraryName": "@fluentui/react-icons",
        "libraryDirectory": "icons",
        "camel2DashComponentName": true
      }
    ]
  ]
}

配置后，你依然可以用import { Home20Regular } from '@fluentui/react-icons'的写法，插件会自动转换为单个文件导入，同时实现Tree Shaking。

内容的提问来源于stack exchange，提问作者Ashis