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

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

import Button from 'react-bootstrap/Button'

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

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

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


Есть идеи?

10000