@a2d7cc

На какой фронтэнд сборке легче манипулировать способом вставки иконок, картинок?

Когда-то давно делал себе сборку на галпе(для всего остального)+вебпак(для js). ориентировался на скринкасты Ильи Кантора. Сейчас заново всё вспоминаю и в последнее время изучая react пользовался настроенным конфигом из коробки. Собственно, обучение закончилось и хотелось пару приложений разработать нарисовав макеты, дизайн, бд схемы и разработать уже с нуля, а не под руководством какого то видео, урока, поэтому решил начать с конфига своего.

1. Есть ли сейчас смысла также разделять js на вебпак, остальное на галп? Или всё это можно решить плагинами вебпака, тут вопрос также к скорости, на чем разумнее.
2. Интересует, чтобы была свобода в том, как управлять картинками, иконками, чтобы была возможность собрать svg спрайт, часть инлайново вставить, а обычные картинки просто ссылками. Чтобы это было автоматом и потом не возвращаться к этому.
3. Возможно порекомендуете новый сборщик, типа ESBuild, где все это можно решить или снова же может с галпом обьеденить.

Хочется на реакте с тайпискриптом верстать, всё минифицировать и иметь гибкость в добавлении иконок, картинок. Буду также благодарен, если поделитесь своей универсальной сборкой. Архивация, залить сразу на сервер и т.д, пока не сильно требуется, хотя давно на галпе это настраивал.

Я это задаю вопрос параллельно делу, пока обойдусь и стандартной сборкой, которую на вебпаке написал. Там оно по размеру файла просто вставляет инлайново или ссылкой на файл. Это в принципе сейчас не критично, но просто хотелось бы контроллировать это. Потом глянуть в конце как сайт лучше загружается, кешируется.
Думаю, если вы работающий человек, то у вас на потоке уже написан подходящий вариант, конечно, если вы уделяете время оптимизации. Тут вопрос открытый чуть для меня, не тестировал это всё, возможно на больших проектах это актуально, на маленьких менее. Просто по наитию помню, что на главном экране основные иконки лучше вставить в файл, остальные в спрайт, чтобы один запрос был к файлу и удобно было контролировать цвет, размер, а большие файлы уже ссылкой.
  • Вопрос задан
  • 162 просмотра
Пригласить эксперта
Ответы на вопрос 1
Fragster
@Fragster
помогло? отметь решением!
У меня сделано вебпаком: стандартный лоадер: asset/resource или asset/inline по размеру +
переключение через resourceQuery типа ассета отдельно если нужно (у меня только inline зафорсить можно, остальное как в боилерплэйте квазара) + svg-sprite-loader также включаемый для нужных ассетов через resourceQuery
вот такое добавлено в конфиг

chain.module
          .rule('svg-raw')
          .test(/\.svg$/)
          .resourceQuery(/raw/) // import icon from 'file.svg?raw'
          .type('asset/source')
        chain.module
          .rule('svg-icon')
          .test(/\.svg$/)
          .resourceQuery(/icon/) // import icon from 'file.svg?icon'
          .use()
          .loader('svg-sprite-loader').options({ spriteFilename: 'icons.svg' })
          .end()
        // старое правило из бойлерплэйта
        chain.module.rule('images').resourceQuery(/^$/) // пустой query
Ответ написан
Ваш ответ на вопрос

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

Войти через центр авторизации
Похожие вопросы
4People Санкт-Петербург
До 320 000 ₽
Sportmaster Lab Санкт-Петербург
от 200 000 до 300 000 ₽
25 сент. 2022, в 21:01
300 руб./за проект
25 сент. 2022, в 17:40
10000 руб./за проект