Ви неправильно використовуєте SVG зображення в React! Правильні методи оптимізації
HTML-код
- Опубликовано: 16 июн 2024
- Ви неправильно використовуєте SVG картинки в React проєктах! У цьому відео я поясню, як правильно використовувати SVG зображення, щоб вони не потрапляли в бандл. Розглянемо різні прийоми та порівняємо їх ефективність. Дізнайтеся, як зробити ваші проєкти швидшими та більш оптимізованими! Підписуйтеся на канал і ставте лайк, якщо відео було корисним. Ваші коментарі та запитання завжди вітаються!
#React #SVG #оптимізація #webdevelopment
Стати спонсором каналу:
/ @maksymrudnyi
Корисні статті по роботі з SVG:
kurtextrem.de/posts/svg-in-js
www.jacobparis.com/content/sv...
jakearchibald.github.io/svgomg/
Буду вдячний за підтримку каналу:
Patreon - / rudnyi
BuyMeACoffee - www.buymeacoffee.com/maksymru...
Mono Bank - send.monobank.ua/jar/6oqhydjLGp
або так - 5375 4114 0505 7287
Приват банк - 4627 0551 1331 6110
Давайте дружити:
Telegram ↣ t.me/maksymrudnyi
Telegram чат ↣ t.me/joinchat/H4AF4W4dfGeGepNQ
INSTAGRAM ↣ / maksym_rudnyi
TWITTER ↣ / maksymrudnyi
FACEBOOK ↣ / travelscode
WEB-SITE ↣ travelscode.com/
GITHUB ↣ github.com/MaksymRudnyi/
Другий RUclips канал ↣ / travelscode 
Наука
![NOSFERATU - Official Teaser Trailer [HD] - Only In Theaters December 25](http://i.ytimg.com/vi/b59rxDB_JRg/mqdefault.jpg)
Корисно, дякую! Ще один варіант - старий, добрий іконочний шрифт. Ще в роки коли працював з Галпом, часто генерував іконочні шрифти з svg файлів
Це теж цікавий варіант, нажаль такого я не робив. А може і на щастя))
@@MaksymRudnyi svg програє іконочному шрифту по якості відображення (рендерінг) як мінімум у хромі, за інщі браузери не знаю, це добре видно на маленьких іконках ~ 24px
інформативно. дякую )
Радий чути.
Прям меланхолія...) Давно таких потреб не було вже, крайній раз років 10 назад на одному проекті спрайтфайл генерили скриптом з папки іконок при деплої і потім аякс запитом забирали спрайтфайл і вставляли в боді як хтмл, і через use спокійно користувались по сторінці, оскільки айдішнік співпадав завжди з назвою файлу іконки не було проблем з ідентифікацією
Так найцікавіше що за 10 років нічого і не змінилось) Просто зараз багато кому лінь таким займатись або виористовують шрифти або пакети іконок. Та й швидкість інтернету уже не та. Можна "забити" на такі оптимізації.
Ого, 33 хвилини на цю тему... цікаво) тІльки відкрив відео
Трохи переборщив, треба було урізати, але інформації багато. Ще забув згадати пару інструментів, але то уже колись розповім окремо.
Нажаль не розкрита частина, коли тобі потрібно змінювати розмір іконок в залежності від розширення екрана чи інших чинників, змінювати кольори в залежності від зовнішніх параметрів (якщо від 0 до 5 то червоний, від 5 до 10 синій більше 10 фіолетовий), не описано як змінювати кольори якщо картина має декілька кольорів при ховері чи зміні тих самих зовнішніх параметрів. Все це в компонент прокидаю як пропси.
Svgr додає в vite як частина бандлу чи ні? Якщо додає SVG як частину бандлу то чому вони роблять саме так якщо цей підхід поганий.
- зміна розміру іконок - це робиться через CSS та медія квері. Я показав як зробити зображення щоб кастомізувати через CSS.
- кольори аналогічно змінюються за допомогою CSS .
- якщо потрібно кольори від певних умов (від 0 до 5) умовно то змінюєте клас або батьківському елементу вказуєте колір щоб SVG наслідував.
- якщо декілька кольорів, то зрозуміло що там набагато складніша логіка або таки передавати усе пропсами. Тут буде виправдане використання картинок як JSX
- svgr додає в бандл. Він дає можливість імпортувати svg як Реакт компонент щоб вручну не переносити в JSX
- хто робить так? Цей підхід не поганий, він має свої місця для застосування. Як я казав у відео, наприклад логотипи на сайті додавати в бандл потрібно. Так буде швидше рендеритись.
Взагалі, у відео ще багато чого не розкрито, але то уже треба цілий курс робити, а такої цілі в мене не було.
@@MaksymRudnyi тобто частина коментаря пропущена. Як змінювати розмір в залежності від вхідних параметрів, так само як я вказав про колір. Медіаквері тут не працюють. Також не працює коли багато кольорів і їх тре всі змінювати.
Супер класне відео. Може трохи затягнуто. У Next js немає проблеми бандла для статики.
Знаю що затягнуте. Треба скорочувати. У Next може і нема, але якщо розробник спеціально запихає SVG у JSX компонент то тут жоден фреймворк не допоможе .
До тегу ще є питання в плані SEO та індексації сторінок тим же google. Коли в нас іконки по типу email, phone, search та інше то їх потрібно класти як pseudo-elements щоб вони не відносились до основного контенту на сторінці сайту. Тоді вони теж не додаються до bundle тк як такий метод є частиною CSS. Но тут виникає інше питання, якщо в нас HeadlessCMS і в нас усі іконки прилітають через api call, то як тоді їх відображати щоб вони не попали в основний контент та тег ?
А як на разунок варіанту яки дуже часто зустрічається в статтях?
Не розглядали такий варіант?
import { ReactComponent as Logo} from './logo.svg';
Так це і є svgr. Я у відео його згадував. Тільки там для Vite чомусь ще хеш тег вкінці назви файлу треба. Може щось недоконфігурував. А приклад що ви показуєте - це топовий приклад. Я зараз на роботі на проєкті використовую інколи такий підхід. В нас WebPack налаштований. У будь-якому разі, цей файл кладеться в бандл проєкту. Ще що зручніше лише, не потрібно вручну створювати JSX компонент.
Дуже корисно! Але є одне але - якщо ui-kit окремо, і використовується декількома проектами, то тут уже спрайт не підійде, бо як його зробити доступним як медіа ресурс в основному проекті. Чи може є способи, що можуть зробити доступими всі файли, спрайт із ui-kit, щоб було певне посилання на ресурс...
У відео я ж не всі варіанти використання розповідаю. Зі спрайтами проблем багато. Якщо у Вас декілька команд то все рівно можна спробувати, але треба щоб при білді спрайти створювався скриптом а кожен розробник по id витягував потрібен йому.
У будь якому випадку все залежить від команди і як вони захочуть.
Якщо у вас дуже багато іконок і ви всі їх завертаєте у спрайт, він буде величезним і буде вантажитись кожен раз при завантаженні або перезавантаженні сторінки, чи є це зручно. коли у мас умовно вантажиться мегабайт спрайту?
По перше, дуже дивно що у вас svg на цілий мегабайт. По друге, ви їх і так будете тягнути, але або запхавши у бандл або окремо.
По друге, треба думати раціонально. Якщо можна розбити на кілька спрайтів то треба так робити.
По третє, не все треба в спрайти. Ніхто не забороняє просто картинки з public завантажувати. Тут головне щоб вони в бандл не йшли. Їх не обов'язково в спрайти запихати. Більш того, зараз такими оптимізаціями уже ніхто і не хоче займатися .
По четверте, якраз при перевантажені сторінок такі спрайти в кеші залишаються.
який у вас мак?
MacBook Pro (16-inch, 2019)
а webp використовуєте?
Ні. на поточному проєкті лише SVG або звичайні png, jpeg. З webp хочу розібратися і зняти окреме відео.
а в чому проблема використовувати public/sprite.svg ?
А я там у відео казав. Проблеми особо нема, лише на прев'ю в IDE не видно що там за картинки. Тому краще їх окремо зберігати і білдити коли треба
@@MaksymRudnyi я для цих цілей використовую vscode + svg-sprites-viewer ... Єдине що до мініса можна віднести, я люблю WebStorm