Производительность импорта ES6

Question

В React Bootstrap документах предлагается импортировать модули по отдельности из отдельных файлов распространения, а не из большого файла распространения.

import Button from 'react-bootstrap/Button';

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

Почему второй метод менее идеален?

Answer 1

Как сказано в этой ссылке:

Вы должны импортировать отдельные компоненты, такие как: react-bootstrap/Button, а не всю библиотеку. При этом задействуются только указанные вами c компоненты, которые могут значительно сократить объем кода, который вы в конечном итоге отправляете клиенту.

Если вы импортируете из 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, вы загружаете лот кода, который вам не нужен, без уважительной причины.