Экспериментальная оптимизация SVG

Тип: boolean | object
По умолчанию: false

Добавлено в: astro@5.16.0

Эта экспериментальная функция включает автоматическую оптимизацию ваших SVG-компонентов с использованием SVGO во время сборки.

При включении ваши импортированные файлы SVG, используемые в качестве компонентов, будут оптимизированы для меньшего размера файла и лучшей производительности при сохранении визуального качества. Это может значительно уменьшить размер ваших активов SVG, удаляя ненужные метаданные, комментарии и избыточный код.

Чтобы включить эту функцию с настройками по умолчанию, установите ее в true в вашей конфигурации Astro:

import { defineConfig } from "astro/config"

export default defineConfig({
  experimental: {
    svgo: true
  }
})

Использование

Для использования этой функции не требуется никаких изменений в использовании SVG-компонентов. При включенном экспериментальном svgo все ваши файлы импорта SVG-компонентов будут автоматически оптимизированы:

---
import Logo from '../assets/logo.svg';
---

<Logo />

SVG будет оптимизирован во время процесса сборки, что приведет к уменьшению размера файлов в вашей продакшн-сборке.

Обратите внимание, что эта оптимизация применяется ко всем импортам SVG-компонентов в вашем проекте. Невозможно отказаться от нее на уровне отдельных компонентов.

Конфигурация

Вы можете передать объект конфигурации SVGO для настройки поведения оптимизации:

export default defineConfig({
  experimental: {
    svgo: {
      plugins: [
        'preset-default',
        {
          name: 'removeViewBox',
          active: false
        }
      ]
    }
  }
})

`plugins`

Тип: Array<string | PluginConfig>
По умолчанию: []

Массив плагинов SVGO, которые будут использоваться для оптимизации ваших импортов SVG-компонентов.

Это может включать любые плагины по имени ID, включая коллекцию плагинов SVGO preset-default. Плагин можно опционально передать как объект, включающий как его name, так и статус active, чтобы включить или отключить его по мере необходимости.

export default defineConfig({
  experimental: {
    svgo: {
      plugins: [
        'preset-default',
        {
          name: 'removeViewBox',
          active: false
        }
      ]
    }
  }
})

Другие параметры конфигурации

Вы также можете передать другие параметры конфигурации SVGO, такие как floatPrecision и multipass, непосредственно в ваш объект конфигурации:

export default defineConfig({
  experimental: {
    svgo: {
      floatPrecision: 2,
      multipass: true
    }
  }
})

Частые варианты использования

SVGO предоставляет обширный список плагинов по умолчанию с оптимизациями, которые удобнее использовать, чем добавлять каждый плагин по отдельности. Однако вам может потребоваться настроить его дополнительно для ваших нужд. Например, он может удалять элементы или очищать слишком агрессивно для вашей ситуации.

Сохранение определенных атрибутов

Вы можете захотеть сохранить определенные атрибуты SVG, такие как viewBox, которые SVGO удаляет по умолчанию:

export default defineConfig({
  experimental: {
    svgo: {
      plugins: [
        'preset-default',
        {
          name: 'removeViewBox',
          active: false // Сохранить атрибут viewBox
        }
      ]
    }
  }
})

Удаление определенных элементов

Вы можете настроить плагины для удаления определенных нежелательных элементов, таких как метаданные или скрытые слои. Обратите внимание, что многие плагины уже включены в preset-default, поэтому вам обычно нужно только настроить их поведение:

export default defineConfig({
  experimental: {
    svgo: {
      plugins: [
        'preset-default',
        {
          name: 'removeMetadata',
          active: true
        }
      ]
    }
  }
})

Пользовательская точность

Управление точностью числовых значений в данных пути:

export default defineConfig({
  experimental: {
    svgo: {
      floatPrecision: 2
    }
  }
})

Как это работает

Оптимизация SVG происходит во время процесса сборки, а не во время выполнения:

В режиме разработки файлы SVG не оптимизируются, чтобы обеспечить более быстрое время пересборки и более плавный опыт разработки.
В продакшн-сборках все импортированные файлы SVG оптимизируются один раз во время процесса сборки, что приводит к уменьшению размера файлов.
Нет накладных расходов во время выполнения - оптимизированные SVG обслуживаются как предварительно обработанные статические активы.

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

Дополнительное чтение

Документация SVGO