Всем привет, кто-то знает как решить проблему на проде во

Question

Vue.js — русскоговорящее сообщество

Maksym

Всем привет, кто-то знает как решить проблему на проде во

время загрузки иконок vuetify?

#frontend #javascript #programming #russian #vue.js

0

09.06.2023

9 ответов

24 просмотра

Maksym Автор вопроса

благодарю, я тоже думал об создании общего компонента, думаю стоит попробовать)

0

09.06.2023

iQs Solution

Maksym
благодарю, я тоже думал об создании общего компоне...

Есть уже готовые библиотеки иконок которые можно установить через yarn или npm, но вряд ли в вашем приложении используется свыше 100 иконок. Если их от 10 до 20 по всему проекту, то можно брать готовый svg, например отсюда https://fonts.google.com/icons, или отсюда https://ionic.io/ionicons

0

09.06.2023

Ruslan

Maksym
благодарю, я тоже думал об создании общего компоне...

общий компонент и с svg и с png хорошо делается

0

09.06.2023

Maksym Автор вопроса

iQs Solution
Есть уже готовые библиотеки иконок которые можно у...

Спасибо!

0

09.06.2023

iQs Solution

Ruslan
общий компонент и с svg и с png хорошо делается

В img нужно вызвать src и alt, и это создаёт дополнительную нагрузку, можете проверить через Lighthouse, плюс поисковики эти картинки индексируют, и если смотреть "сайт" в поисковой выдаче через вкладку КАРТИНКИ, там могут вылезти все эти иконки. Поэтому всё в пользу svg. Плюс к таким иконкам можно прикрутить анимацию через JS

0

09.06.2023

Maksym Автор вопроса

iQs Solution
В img нужно вызвать src и alt, и это создаёт допол...

есть большой плюс использования общего компонента для иконок, не нужно подгружать десятки иконок, достаточно только 1-го компонента

0

09.06.2023

Ruslan

Какую нагрузку? Нагрузку как раз таки создают большие svg , и весьма немалую

0

09.06.2023

iQs Solution

Ruslan
Какую нагрузку? Нагрузку как раз таки создают боль...

Вы создаёте туннель для вызова ресурсов через сорс по ссылке, которую вы указываете в src. Получается что 1 src = 1 запросу к серверу, который ищет файл по указанному пути, соответственно сколько этих src на сайте, столько и запросов к серверу. Те файлы, которые сервер не найдёт, вернут ошибку 404, это можно посмотреть в devtools во вкладке console. Если файлы тяжёлые, то перегрухается буфер обмена, который скачивает файлы с сервера в ваш браузер, чтобы отобразить страницу, это как раз и приводит к тому что сайт грузится дольше, пока все данные не будут скачены, это нагрузка на память. SVG это уже скомпилированный код, который не делает запрос к серверу и ничего не подгружает, но влияет на ноды, чтобы сформировать все узлы DOM дерева. По этой причине svg грузится быстрее на уровне html но заголовок у файла xml. Так как он не вызывается по ссылке, а встроен в ноду (узлы) DOM дерева, то НА СЕРВЕР такой подход не создаёт никакой нагрузки ВООБЩЕ. Такой подход грузит только клиентскую часть, во время отрисовки DOM дерева, но из-за того что svg не надо никак компилировать, он уже в ноде, то и ресурсы на отрисовку уходят мизерные килобайтные или вовсе байтные.

0

09.06.2023

iQs Solution · Accepted Answer

Со шрифтами нет смысла бороться, всё равно где-то будет не прогружаться или если иконки подключены из CDN, то может сработать блокировка прокси сервера на уровне провайдера, держать все иконки на своём приложении тоже нет смысла, но, лично я решил эту проблему с помощью SVG. Помещаю чистый код svg в компонент, указываю дефолтные параметры, размер, цвет, жирность обводки, и делаю экспорт, потом, в тех местах, где нужна эта иконка, я импортирую этот компонент. Если вы хотите, чтобы svg принял текущий цвет элемента, по умолчанию в fill передайте currentColor 😉

169 похожих чатов

Всем привет, кто-то знает как решить проблему на проде во

9 ответов

Похожие вопросы