На какой фронтэнд сборке легче манипулировать способом вставки иконок, картинок?
Когда-то давно делал себе сборку на галпе(для всего остального)+вебпак(для js). ориентировался на скринкасты Ильи Кантора. Сейчас заново всё вспоминаю и в последнее время изучая react пользовался настроенным конфигом из коробки. Собственно, обучение закончилось и хотелось пару приложений разработать нарисовав макеты, дизайн, бд схемы и разработать уже с нуля, а не под руководством какого то видео, урока, поэтому решил начать с конфига своего.
1. Есть ли сейчас смысла также разделять js на вебпак, остальное на галп? Или всё это можно решить плагинами вебпака, тут вопрос также к скорости, на чем разумнее.
2. Интересует, чтобы была свобода в том, как управлять картинками, иконками, чтобы была возможность собрать svg спрайт, часть инлайново вставить, а обычные картинки просто ссылками. Чтобы это было автоматом и потом не возвращаться к этому.
3. Возможно порекомендуете новый сборщик, типа ESBuild, где все это можно решить или снова же может с галпом обьеденить.
Хочется на реакте с тайпискриптом верстать, всё минифицировать и иметь гибкость в добавлении иконок, картинок. Буду также благодарен, если поделитесь своей универсальной сборкой. Архивация, залить сразу на сервер и т.д, пока не сильно требуется, хотя давно на галпе это настраивал.
Я это задаю вопрос параллельно делу, пока обойдусь и стандартной сборкой, которую на вебпаке написал. Там оно по размеру файла просто вставляет инлайново или ссылкой на файл. Это в принципе сейчас не критично, но просто хотелось бы контроллировать это. Потом глянуть в конце как сайт лучше загружается, кешируется.
Думаю, если вы работающий человек, то у вас на потоке уже написан подходящий вариант, конечно, если вы уделяете время оптимизации. Тут вопрос открытый чуть для меня, не тестировал это всё, возможно на больших проектах это актуально, на маленьких менее. Просто по наитию помню, что на главном экране основные иконки лучше вставить в файл, остальные в спрайт, чтобы один запрос был к файлу и удобно было контролировать цвет, размер, а большие файлы уже ссылкой.
У меня сделано вебпаком: стандартный лоадер: 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
А можешь показать всю сборку, может у тебя на гитхабе есть? Я в принципе хотел бы одну папку под свг спрайты, другую папку под svg завернутые в компоненты, чтобы их потом легко можно было заинлайнить передавая в параметры цвет, размеры, все остальные картинки просто внешней ссылкой.
a2d7cc, я дефолтный конфиг (я даже хз, где он) от vue cli и quasar cli вот таким вот образом дополняю и всё. а папки которые у тебя в проекте - они не имеют значения, как заимпортишь в компоненты, так оно и подставится - в инлайн и в спрайты
Антон Антон, я в последнее время из коробки пользовался готовыми конфигами под react, react typescript, next. А тут как захотел добавить нюанс с загрузкой svg, оптимизацией картинок и каких то миксинов доабвить, то как снова начал смотреть сборки туплю на ровном месте.
1. В реакте там есть готовые сбокри, но они спрятаны, хотя её можно выгрузить. То есть ты вот такую дефолтную и под себя подправил в плане обработки svg картинок?
2. А с галпом у тебя не было до этого опыта? У меня раньше была на галпе и сейчас в интернете тоже видел написанные сборки на нем, правда там не с реактом, а просто как под верстку, пару библиотек карусели, попап и сами компоненты, они просто разбиты по папкам без реакта, просто на шаблонизаторе html.
У меня тут чуть смешалось как сборщик будет обрабатывать файлы, в итоге он все компилирует в один файл, если не задавать дополнительных настроек. Но если это делать через галп, то все эти импорты картинок, стилей и сами jsx файлы также само как и в вебпаке будут адекватно компилироваться на выходе, если на js файлы подключить вебпак?
Думаю, как лучше поступить, вебпаком компилить или галп с вебпаком, и инетресно что там по скорости, где быстрее.
Антон Антон, и как вообще со спрайтами, у тебя там есть обработка подгрузки их, если браузер не понимает тот, который вставляется документ, раньше там был плагин в галпе svg4everybody. glivera-team.github.io/svg/2016/06/13/svg-sprites-... вот тут в статье описано, как там сделано. У тебя что то похожее с контролем размеров, цвета или в простом варианте просто иконки в одном спрайте, как есть.
реакте там есть готовые сбокри, но они спрятаны, хотя её можно выгрузить
не знаю, как в реакте, наверное как и во многих других инструментах. есть возможность подкрутить конфиг вебпакачерез webpack chain
и как вообще со спрайтами, у тебя там есть обработка подгрузки их
в том способе, что я написал у тебя в исходниках отдельные svg файлы, а при импорте в js происходит магия - создается один спрайт (ну или не один, если сделаешь несколько вариантов через конфиг) и уже юзается он а в результате импорта у тебя есть id и все, что нужно https://www.npmjs.com/package/svg-sprite-loader
Простой
Средний
