ES6 两种import导入语句的区别及使用偏好是什么？

导入范围判断 #

两种语句并非都仅导入A、B、C三个模块，具体逻辑区别如下：

• 写法1：import { A, B, C } from 'somecomponent/components'
  本质是从somecomponent/components统一入口模块中导入三个命名导出的成员，加载过程会完整执行该入口模块的所有顶层代码，同时加载该入口依赖的所有其他模块，哪怕你只用到A、B、C三个成员。
• 写法2：

  import { A } from "somecomponent/components/A";
  import { B } from "somecomponent/components/B";
  import { C } from "somecomponent/components/C";
  

  直接从三个独立的模块路径导入对应成员，仅会加载、执行A、B、C三个目标模块的代码，不会引入其他无关模块。

核心差异点 #

• 加载开销不同：写法1需要加载统一入口的全量依赖，执行额外的入口顶层代码；写法2仅加载目标模块，没有额外加载开销，大项目下编译速度更快。
• 打包体积不同：未开启tree-shaking的项目中，写法1会把统一入口内所有导出的模块全部打入最终产物，冗余代码多；写法2仅打包三个目标模块，体积更小。就算开启了tree-shaking，若统一入口存在不可消除的副作用代码，写法1依然会残留冗余代码。
• 导出结果不同：如果统一入口对A、B、C做了二次封装、属性修改等处理，写法1拿到的是处理后的成员，和写法2直接导入的原始模块成员可能存在差异。
• 编写便捷度不同：导入多个模块时，写法1只需要写一行导入语句，代码更简洁；写法2需要为每个模块单独编写导入语句，代码量更大。

实际开发推荐选型 #

没有绝对的最优写法，根据项目场景选择即可：

• 若使用的是支持完善tree-shaking的主流第三方组件库，且项目已开启生产环境tree-shaking、确认组件库统一入口无不可消除的副作用，优先选写法1，代码更简洁易维护。
• 若使用自研组件库、项目未开启tree-shaking、对打包体积要求极高，优先选写法2，可严格控制引入的模块，避免冗余代码。也可以通过babel-plugin-import这类按需导入插件，自动把写法1转换为写法2，同时兼顾写法简洁度和体积优化。

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