Pull to refresh
6
Karma
0
Rating
Иван Копенков @kopivan

Front-End Developer

  • Followers
  • Following 3

Кастомизация компонентов Ant Design и оптимизация бандла

В том и суть, что это дизайн система, а не библиотека компонентов для React :)

Кастомизация компонентов Ant Design и оптимизация бандла

Конечно это легче, а еще легче договориться использовать только системные компоненты :)

Я думаю тут стоит исходить из удобства для пользователей. На мой взгляд не повод отказываться от кастомизации и выходить за рамки, если это полезно для достижения каких-то целей и затраченные усилия того стоят.
В нашем случае кастомизация компонентов боли ни у кого не вызывает (насколько я знаю). И это точно легче и дешевле чем писать свои компоненты с нуля и делать велосипеды для проблем и кейсов, которые уже тысячи раз были решены в других библиотеках.

Кастомизация компонентов Ant Design и оптимизация бандла

Несколько я понимаю в случае styled components никакого кэширования на уровне браузера нет, также вместо распараллеливания загрузки css — js все грузится в одном большом js файле.

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

Однако, если делать два файла, один со всеми стилями, а другой со всеми скриптами — то вряд ли будет заметный прирост в скорости загрузки и меньшая частота сброса кеша.

В нашем основном проекте раньше так и делалось, поскольку нет нужды в индексации и поддержке медленных устройств. Но удалось сильно уменьшить время загрузки за счет разбивки бандла на чанки. Наш бандл разбивается на нод модули, общедоступные куски кода, и отдельные куски по страницам. За счет небольшой кастомизации роутера так же сделали, чтобы каждая страница импортировалась асинхронно. Таким образом вместо всего кода и стилей на старте подгружается только процентов 20%, остальное догружается по мере перехода по страницам. И многие из этих кусков остаются неизменными при дальнейшей разработке и сохраняются в кеше.

Вот хорошая статья, где объясняется как просто настроить чанкинг в вебпаке medium.com/dailyjs/webpack-4-splitchunks-plugin-d9fbbe091fd0

Ну и применение стилей непосредственно к каждому html элементу это дольше чем применить класс ко многим.

Так styled-components не применяет стили отдельно к каждому элементу. Она динамически создает обычные классы. Возможно на огромных проектах производительность будет проседать, по сравнению с классическим css, но проблема должна решаться разбивкой на чанки.

Кастомизация компонентов Ant Design и оптимизация бандла

Спасибо! Эта проблема решена, но кажется, я действительно зря опустил подробности.
На втором шаге в файле AntAliases.ts создаются алиасы на обертки для относительных импортов, которые используются внутри составных компонентов.
Позже постараюсь дополнить статью этой информацией.

Information

Rating
Does not participate
Works in
Date of birth
Registered
Activity