使用Next.js动态导入react-icons时引入整个库致包体积暴涨

问题出在你当前的动态导入写法上，import("react-icons/bs")会加载整个bootstrap图标库，而非单个图标文件。react-icons的每个图标都有独立的导出路径，你需要直接导入对应图标的具体文件。

正确的动态导入写法 #

把动态导入的路径改成单个图标的具体模块：

const BsFillPeopleFill = dynamic(() => 
  import("react-icons/bs/BsFillPeopleFill").then(module => module.default)
);

为什么这个写法有效？ #

react-icons的包结构中，每个图标都被打包成单独的文件，比如react-icons/bs/BsFillPeopleFill就是对应图标的独立模块。直接导入这个路径只会加载该图标的代码，不会把整个react-icons/bs库都拉进来，这样就能保持First Load JS的体积和常规导入一致。

额外优化建议 #

• 如果需要动态导入多个图标，可以为每个图标单独写动态导入语句，或者封装一个通用的动态导入函数：

const dynamicIcon = (iconName) => dynamic(() => 
  import(`react-icons/bs/${iconName}`).then(module => module.default)
);

// 使用时
const BsFillPeopleFill = dynamicIcon("BsFillPeopleFill");

这样能减少重复代码，同时保证每个图标只加载自身的模块。

内容的提问来源于stack exchange，提问作者Dev-Siri