Comments 5
Хорошая статья для понимания того как работает процесс бандлинга. Однако, оверхед в 1,5мб довольно высок, и многие фреймворки имеют автоматическое создание чанков по страницам, компонентам, где оверхед чанка уже незаметен.
В статье я небольшой пример рассматриваю, а в рабочем проекте мы используем платные иконки, а их очень много. Только на скачивание иконок уходило 1.5 mb. Так что это был единственный выход. Или нужно было рефакторить все иконки на проекте
Возражу, в таком смысле можно было бы сконфигурировать webpack на генерацию статических svg, со свойствами fill="currentColor" и т.д., и не иметь оверхеда.
Автоматический бандлинг имеет смысл, так как на среднем проекте очень часто используется максимум 5-10-20 общих иконок (стрелочки, человечки, т.д.), если у вас на проекте сотни разных иконок, то скорее всего, довольно весомая часть из них встречается в одном React-компоненте, который и стоит отправлять в отдельный чанк, возможно, с целом куском UI-я, который окружает эту иконку.
Конечно, при бесконечном большом проекте, конечно, бесконечное число иконок будет иметь смысл превратить в бесконечное число мини-чанков, однако в таком крайнем случае просто svg-иконки как svg-файлы будут самым верным решением.
В таком случае нужно будет:
переделать получение иконок через прямые импорты (пока обратная совместимость);
выделять время на разбиение частей проекта на чанки;
описать состояния для этапов их загрузки.
Тоже вариант, но труднозатратнее.
Думаю, при грамотном подходе получится один раз пройтись глобальным поиском и заменой с регэкспом по всему проекту и всё. Трудозатраты примерно в пределах часа. А выхлоп прям большой. Лично я перешел на прямой импорт svg и https://www.npmjs.com/package/svg-sprite-loader - и очень доволен. При этом можно загружать иконки из разных библиотек и из своих ассетов вперемешку - что прям полезно бывает.
Оптимизация загрузки js бандла использующего icon pack’и