Должны ли мы импортировать целую библиотеку или отдельный отдельный компонент при использовании вместе с Create-React-App?

Question

Я спрашиваю об этой проблеме производительности / оптимизации. Я понимаю, что все библиотеки (и их метод экспорта по умолчанию) разные, но, например, в doc intro response-bootstrap говорится, что

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

Поскольку мы находимся в 2019 году, сборка Create-React-App (CRA) автоматически оптимизируется для нас и импортирует только те компоненты, которые использовались хотя бы один раз?

Если это так, значит ли это, что мы можем игнорировать рекомендации и импортировать всю библиотеку вместо конкретных компонентов?

Answer 1

Вот два примера, приведенных в документах:

import Button from 'react-bootstrap/Button';

Это рекомендуемый способ импорта. В этом случае вы явно импортируете компонент из библиотеки.

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

Этот метод импортирует всю библиотеку и добавляет компонент Button в область действия этого файла. В этом случае используется функция встряхивания дерева Webpack, чтобы уменьшить размер пакета, что не совсем надежно. Эта статья дает представление о том, почему это так: https://advancedweb.hu/2017/02/07/treeshaking/