如何为优化构建执行 ES6 导入？

Question

我应该使用以下哪个：

import { Button } from 'react-bootstrap';

或

import Button from 'react-bootstrap/Button';

前者的优点是可以为组件使用正确的名称，所以我不明白为什么我应该使用后一种方法来导入 ES6。

Answer 1

不是ES6的问题。这两个语句做了两件不同的事情。

import Button from 'react-bootstrap/Button';

这将加载文件 react-bootstrap/Button.js 并 returns 其默认导出。

import { Button } from 'react-bootstrap';

这将加载文件 react-bootstrap/index.js，并 returns Button 导出。 index.js 从 Button.js 导入默认导出，并在这一行将其导出为 Button：

export { default as Button } from './Button';

如果没有这一行，您将无法使用第二种形式。

Answer 2

这种情况下的区别在于包的排列方式。

import { Button } from 'react-bootstrap';

这个实际上加载了整个 bootstrap 包 - 但它只将 Button 部分导入到您的模块中。 {Button} 部分可以被认为只解构大对象的一个属性。

import Button from 'react-bootstrap/Button';

这个只加载 Button 部分，它不需要做任何解构 - 因为，加载的只是 Button 部分。

第二种方法更好 - 因为，它只需要加载您明确指定的代码。

How to do ES6 imports for optimized builds?