在React中从node模块全量导入函数是否属于不良实践？

核心结论 #

两种写法的性能差异主要取决于项目构建工具的**Tree Shaking（摇树优化）**支持度，现代前端工程化场景下绝大多数时候不会有明显性能差距，可根据开发习惯选择写法。

具体差异说明 #

• 生产构建场景（使用webpack5+、Vite、Rollup等现代构建工具）
  现在主流构建工具默认在生产环境开启摇树优化，只要你导入的依赖是ESM规范（比如你用的react-icons本身就是ESM格式），哪怕你写的是全量导入：

  import * as FaIcons from "react-icons/fa";
  
  <FaIcons.FaEnvelopeOpen />
  

  构建时也会自动剔除所有未被调用的图标组件，最终打包体积和按需导入的写法完全一致，不会有性能损耗。
• 特殊场景存在性能差异
  只有当你的项目符合以下任意一种情况时，全量导入才会导致打包体积变大、加载变慢：
  • 使用webpack2及更早版本的老旧项目，未开启摇树优化
  • 导入的依赖是CommonJS规范，不支持摇树优化
  • 直接在浏览器原生ESM环境中运行代码，没有经过构建打包

两种写法的优劣对比 #

• 全量导入的优势
  1. 后续修改不需要频繁调整import语句，更换组件/图标更便捷
  2. 自带命名空间，不会和其他依赖的同名导出产生命名冲突，比如同时使用多个图标库时，不会出现两个同名组件撞名的问题
• 全量导入的劣势
  1. 部分ESLint规则会触发「存在未使用导入」的警告，需要额外配置规则忽略
  2. TypeScript项目中，全量导入大量导出项时，类型检查速度会有可感知的小幅变慢
  3. 开发环境下全量导入可能会导致热更新速度小幅变慢，不过对中小项目来说几乎感知不到

实践建议 #

全量导入不属于不良实践，只要你的项目构建配置正常，不会产生性能问题的前提下，选择你开发效率更高的写法即可。

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