进口ES6的性能

Question

在响应引导文档中，建议模块单独从单个分发文件中导入，而不是从较大的分发文件中导入。

import Button from 'react-bootstrap/Button';

// or less ideally
import { Button } from 'react-bootstrap';

为什么第二种方法不太理想？

Answer 1

正如该链接所述：

您应该导入单个组件，比如：react-bootstrap/Button，而不是整个库。这样做只会引入您使用的特定组件，这将显著减少最终发送到客户端的代码数量。

如果您从react-bootstrap导入，客户端将不得不下载react-bootstrap中的所有内容。这可能会成为相当大的代码块。相反，如果您从react-bootstrap/Button导入，则需要下载的只是按钮--不包含任何无关的内容。

比较文件：

https://github.com/react-bootstrap/react-bootstrap/blob/master/src/Button.js

至

https://github.com/react-bootstrap/react-bootstrap/blob/master/src/index.js

如您所见，从Button导入需要几个导入：

import classNames from 'classnames';
import React from 'react';
import PropTypes from 'prop-types';

import { useBootstrapPrefix } from './ThemeProvider';
import SafeAnchor from './SafeAnchor';

但是从index.js导入需要大量的导入，准确地说，是77。

export Accordion from './Accordion';
export AccordionToggle, { useAccordionToggle } from './AccordionToggle';
export AccordionCollapse from './AccordionCollapse';
export Alert from './Alert';
export Badge from './Badge';
// and 72 more

如果您从index而不是从Button导入，那么您正在下载许多您不需要的代码，没有什么好的理由。