Есть ли разница между этими двумя методами импорта Material-UI? - PullRequest
Новая
       10

Есть ли разница между этими двумя методами импорта Material-UI?

0 голосов
/ 04 июня 2019

При использовании material-ui я следовал документам и импортировал, используя метод ниже 

import Dialog from '@material-ui/core/Dialog';
import DialogTitle from '@material-ui/core/DialogTitle';
import DialogContent from '@material-ui/core/DialogContent';

однако недавно я наткнулся на некоторый код, в котором вместо этого можно было бы импортировать как 

import { Dialog, DialogTitle, DialogContent } from '@material-ui/core';

Второй способ импорта, очевидно, выглядит намного чище, поэтому есть ли какая-то причина, по которой документы и большая часть кода, который вы найдете в Интернете, импортируют его первым способом?

Ответы [ 3 ]

2 голосов
/ 04 июня 2019

material-ui - библиотека с большим количеством компонентов.В первом случае вы импортировали только те компоненты, которые вам нужны в вашем проекте: 

import Dialog from '@material-ui/core/Dialog';
import DialogTitle from '@material-ui/core/DialogTitle';
import DialogContent from '@material-ui/core/DialogContent';

Во втором случае

import { Dialog, DialogTitle, DialogContent } from '@material-ui/core';

у вас естьимпортированы все компоненты, даже те, которые вам не нужны.Это может значительно увеличить размер пакета с неиспользуемым мертвым кодом в случае, если у вашего модуля нет функции встряхивания дерева.

Я рекомендую использовать import {...} from '@material-ui/core' только в том случае, если вы знаете, что в вашем модуле-модуле дрожит дерево, и вы включили эту функцию.Или вы можете использовать этот случай, если вы используете почти все компоненты из @material-ui/core.

Вы можете отреагировать на дрожание дерева в веб-пакете здесь

2 голосов
/ 04 июня 2019

Таким образом, вы импортируете весь пакет: 

import { Dialog, DialogTitle, DialogContent } from '@material-ui/core';

Однако вы можете импортировать отдельные компоненты по запросу: 

import Dialog from '@material-ui/core/Dialog';
import DialogTitle from '@material-ui/core/DialogTitle';
import DialogContent from '@material-ui/core/DialogContent';

Если вы используете VSCode, вы можете проверить размер импорта, используя Стоимость импорта расширение.

Важно отметить, что существуют плагины для импорта компонентов по требованию, такие как babel-plugin-import, таким образом, вы импортируете отдельные компоненты под сценой.

1 голос
/ 04 июня 2019

В первом случае только 3 компонента будут включены в комплект, поскольку вы импортируете 3 файла.Во втором случае - вы импортируете основную библиотеку в комплекте и используете из нее только 3 компонента.Но компоновщик пакетов должен удалять неиспользуемые компоненты, поэтому вам следует проверить пакет с помощью таких инструментов, как https://www.npmjs.com/package/webpack-bundle-analyzer, чтобы узнать, импортируете ли вы неиспользуемый код или нет.

...