Nik_o_lay
@Nik_o_lay
Изучаю фронтенд

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

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

Но иногда иконку нужно вызвать динамически, есть такой вариант:
import * as MdIcon from "react-icons/md";

const Icon = MdIcon["MdLocalPhone"];

<Icon />


Но при таком импорте импортируются все иконки, влияет ли это на производительность?
  • Вопрос задан
  • 45 просмотров
Решения вопроса 1
search
@search
мама говорит что я особенный
Это влияет на конечный размер бандла.

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

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы