Привет друг ! В этой статье попробуем разобраться каким образом мы можем оптимизировать наше приложение 🤔. Но не везде и всюду 😇, а хотя бы уменьшить размер .svg файлов.
Мотивация: Логика крайне проста, чем меньше весят твои .svg файлы, тем легче будет клиенту загружать твой божественный проект. Мы конечно можем, по заветам наших дедов, каждую .svg-шку сжимать, на каком нибудь сервисе, жмякнув в поисковике "сжать svg". Но мы с тобой, крутые ребята 🧸, и попробуем автоматизировать данный процесс. Благо, светлые умы, за на с тобой уже подумали и на просторах npm есть замечательная либа.
И так - поехали !🛼
1. Устанавливаем https://svgo.dev/.
pnpm add -g svgo
2. Создаём конфигурационный файл
Создаём конфигурационный файл svgo.config.js, в корне проекта разумеется. Ниже предоставлю, понравившуюся мне, конфигурацию. В конфиге оставлю комменты, что бы более понятно было, чего хотел добиться:
export default {
multipass: true, // Максимальная оптимизация
js2svg: {
pretty: false, // Минимальный размер
},
plugins: [
'preset-default',
{
name: 'removeViewBox',
active: false, // Сохраняем viewBox для масштабируемости
},
{
name: 'removeDimensions', // Удаляем фиксированные width/height
active: true,
},
{
name: 'prefixIds', // Заменяет cleanupIDs
active: true,
params: {
prefix: 'optimized-', // Добавляем префикс
delim: '-', // Разделитель для префиксов
},
},
{
name: 'removeMetadata', // Удаляем метаданные
active: true,
},
{
name: 'removeComments', // Удаляем комментарии
active: true,
},
{
name: 'removeUnusedNS', // Удаляем неиспользуемые пространства имён
active: true,
},
{
name: 'removeEditorsNSData', // Удаляем данные редакторов
active: true,
},
{
name: 'cleanupAttrs', // Оптимизация атрибутов
active: true,
},
],
};
P.S. Документация у svgo, очень даже понятная, так что, если тебе как-то надо - по другому, есть простор для творчества.
3. Скрипт в package
В package.json добавляем скрипт:
"optimize-svgs": "npx svgo --config=svgo.config.js -f ./src/assets/images -o ./src/assets/images"
Что же там понаписано 🤔?
- npx svgo --config=svgo.config.js -f: указываем файл конфигурации, с переданными настройками.
- ./src/assets/images -o ./src/assets/images: путь, к той самой папке, в которой, хранятся твои svg-шки.
Ну вот собственно и всё🚀🚀🚀.
Наверное, надо показать что получилось ?)
4. Итого
- Закидываю рандомный .svg файл в папку ./src/assets/images:
- Запускаю скрипт:
Пример, не особо наглядный - согласен. Но даже тут вполне очевидно, что на реальном проекте, таких файлов может быть 100500, и путём не хитрых вычислений, можно легко посчитать, на сколько приложение станет легче. А самое приятное, то, что мы добились этого нажатием всего лишь одной кнопки.
Спасибо за внимание! До Новых Встреч!🤗🤗🤗