ES6 导入的性能

Question

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

import Button from 'react-bootstrap/Button';

// or less ideally

import { 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，那么您将下载大量不需要的代码，没有充分的理由。