ES6 导入的性能

Question

在React Bootstrap 文档中，建议从单个分发文件而不是从较大的分发文件中单独导入模块。import Button from 'react-bootstrap/Button';// or less ideallyimport { Button } from 'react-bootstrap';为什么第二种方法不太理想？

Answer 1

正如该链接所说：

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

如果您从 导入，客户react-bootstrap端将不得不下载. 这最终可能会成为相当大的代码块。相反，如果您从 中导入，则只需下载按钮即可 - 不包含任何无关内容。react-bootstrapreact-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

如果您 import fromindex而不是 from Button，那么您将下载大量不需要的代码，没有充分的理由。