Модули импорта и деструктурирующие выступления

Question

Недавно я прочитал на документы Материально-UI в:

Обратите внимание, что в приведенном выше примере, мы использовали:

import RaisedButton from 'material-ui/RaisedButton'

вместо

import {RaisedButton} from 'material-ui'

Это сделает y наш процесс сборки быстрее, а объем сборки меньше.

Раньше я думал, что это был точно такой же, но на самом деле это означает, что второй линии является Жюст, как:

import materialUI from 'material-ui' 
const {RaisedButton} = materialUI 

И он будет производить точно такой же пучок, верно?

я некоторые тесты, сравнивающие связки использовать размер различных combinaisons импорта с 2 файлов:

index.js:

import RaisedButton from 'material-ui/RaisedButton' 
// or import {RaisedButton} from 'material-ui' 
import file from './otherFile.js' 

console.log(RaisedButton) 
console.log(file) 

otherFile.js

import RaisedButton from 'material-ui/RaisedButton' 
// or import {RaisedButton} from 'material-ui' 

export default RaisedButton 

Результаты довольно как и ожидалось, используя только import RaisedButton from 'material-ui/RaisedButton' пучок будет чем-то вроде 24k LoC (материал-ui нагрузки React dependenci эс). Используя import {RaisedButton} from 'material-ui', в одном или обоих файлах, комплект будет примерно 57k LoC.

Мой вопрос в основном касательно характеристик и лучших практик с небольшим использованием Material-UI. Я всегда должен импортировать from 'material-ui/ComponentName, но если я использую много компонентов Material-UI в более крупном проекте, это не повлияет на размер пакета, если я использую import {Comp1, Comp2, Comp3} from 'material-ui', поскольку весь пакет будет импортирован только один раз в комплекте?

Answer 1

Да, это правильно. При этом:

import {RaisedButton} from 'material-ui' 

Файл корневой библиотеки «material-ui» будет включен. Внутри этого файла, вероятно, будет много операторов import RaisedButton from './RaisedButton', чтобы включить сразу все компоненты библиотеки (см. https://github.com/callemall/material-ui/blob/master/src/index.js).

Выполнение:

import RaisedButton from 'material-ui/RaisedButton' 

всего время будет гарантирует лучшую производительность с точкой зрения размера пучка, как вы будете получать только лишь зависимости вам нужно. Если вы используете только несколько компонентов, это также улучшит скорость сборки, поскольку ему не нужно будет анализировать файлы для других компонентов в библиотеке.

Если вы используете все или почти все компоненты в библиотеке, производительность сборки должна быть примерно такой же, потому что, если в корневом скрипте «material-ui» и в вашем файле требуется один и тот же компонент дважды, ваш поставщик будет достаточно умным, чтобы кэшировать результат и не будет повторно разбирать файлы. В этом случае ваш поставщик будет чрезмерно импортировать то же самое, что и дешевая операция.

Я бы рекомендовал использовать синтаксис import RaisedButton from 'material-ui/RaisedButton', так как это более адаптировано к вашим потребностям с течением времени, поскольку вам не всегда могут понадобиться все компоненты, и маловероятно, что вы используете их все одновременно. Кроме того, некоторые связки, такие как расщепление пучков пакетов webpack, которые не будут легкими с помощью метода import {RaisedButton} from 'material-ui'.