Какой из вариантов более оптимизирован при деструктуризации?

Question

[Николай Демидовец]

Для реакта есть модуль React-Icons.
Чтобы достать определенную иконку нужно сделать так:
import { MdMailOutline } from "react-icons/md";

Но иногда иконку нужно вызвать динамически, есть такой вариант:

import * as MdIcon from "react-icons/md";

const Icon = MdIcon["MdLocalPhone"];

<Icon />

Но при таком импорте импортируются все иконки, влияет ли это на производительность?

Answer 1

[Demian Smith]

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

Webpack делает tree shaking: подключает только то что было импортировано. В первом случае будет подключена только одна иконка. Во втором все, даже если вы пользуетесь только одной. Поэтому первый вариант всегда предпочтительнее.

Comments

[Николай Демидовец]

спасибо