JavaScript中explicit import与*号导入的差异及对性能、包体积的影响

核心语法区别 #

两种写法对应ES模块规范下不同的导入模式：

• 第一种import * as copy from 'copy-to-clipboard';是命名空间导入：会将目标模块的所有导出内容（包括所有命名导出、默认导出）全部挂载到copy这个对象上，你可以通过copy.xxx的形式调用模块下的任意导出成员。
• 第二种import { someMethod } from 'copy-to-clipboard';是具名导入：只会从目标模块中导入你显式指定的someMethod命名导出成员，只有该方法可以直接在当前作用域下调用。

注意：第二种写法生效的前提是copy-to-clipboard模块确实对外导出了名为someMethod的命名导出成员，如果模块仅支持的是默认导出，使用第二种写法会报错，需要改用默认导入语法import copy from 'copy-to-clipboard'。

对运行性能与打包体积的影响 #

两者的实际影响和项目的打包配置强相关：

• 若项目使用webpack、Rollup、Vite等现代打包工具，且开启了生产环境Tree Shaking能力，同时copy-to-clipboard符合ES模块规范、无额外副作用声明：两种写法最终打包后的bundle体积完全一致，打包工具会自动剔除你没有实际用到的导出内容，哪怕你用命名空间全量导入但没调用的方法都会被摇掉。运行性能上两者几乎没有差异，命名空间导入仅多了一次对象初始化的微末开销，对运行体验没有感知级别的影响。
• 若未开启Tree Shaking，或copy-to-clipboard是CommonJS规范的模块：命名空间导入会把整个模块的所有代码全部打包进bundle，体积会比仅导入单个方法的具名导入更大。

写法选择建议 #

你偏好的第二种具名导入写法是更推荐的开发习惯：

• 代码可读性更强，其他维护者一眼就能明确你依赖了模块的哪些能力
• 不需要额外通过命名空间对象调用，写法更简洁
• 即使在不支持Tree Shaking的老旧项目场景下，也能尽可能减少冗余代码的引入

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