Оптимизация изображения для оптимизации производительности интерфейса, сокращение ресурсов изображения на 57 %.

Эта статья участвовала в "Проект «Звезда раскопок»», чтобы выиграть творческие подарочные наборы и бросить вызов творческим поощрениям.

предисловие

я писал ранееПрактика оптимизации производительности фронтенда с 30 до 2 сСтатья оптимизирована с общего направления, в основном плагин按需引入, плюсgzip 压缩конфигурация.

Эта статья по-прежнему оптимизирует ту же систему, но начинается с оптимизации деталей, в основном вводит图片的优化处理.

Схема оптимизации изображения

Формат изображения: обычно используемые форматы изображений: JPG, PNG, SVG, WebP и т. д.
Сжатие изображения: Обработка сжатия может выполняться для изображений с требованиями высокой четкости.
- Рекомендуется ручное сжатиеtinypng
- плагин веб-пакетаimage-webpack-loaderкомпрессия
backround-position) для отображения соответствующей картинки, для которой требуется более высокая детализация
- Пусть UI поможет нам синтезировать, конечно, лучше, если вы сами сможете его синтезировать
- webpack-spritesmithплагин
Ленивая загрузка изображения
- Для большего чем картинка, только картинки в визуальном окне, прочее и т.д. Перетащите в визуальное окно и потом загрузите;
- Компонент карусели изображений также может использовать ленивую загрузку.
- Схема ленивой загрузки: адрес изображения хранится, например, в атрибуте тега img.data-src, когда изображение находится в пределах видимого окна, оноsrcЗамените атрибут адресом изображенияdata-srcценность .
- Intersection Observer API — интерфейс веб-API | MDN
- vue-lazyload
Реализация замены CSS
- Попробуйте добиться снимков с CSS, больше не учитывайте планы резки
- При использовании свойств CSS3 старайтесь учитыватьGPU 硬件加速
Адаптивная загрузка изображений: Устройства с разным разрешением используют изображения разного размера, подходящие для мобильных телефонов.
формат base64
- Измените исходный код изображения на формат base64 для загрузки, уменьшите сетевые запросы
- Изображение станет больше после кодирования base64, что увеличит размер HTML-страницы и повлияет на скорость загрузки.
- Так что используйте этот метод разумно, обычно используемый в веб-пакетахurl-loaderиспользуется в
значок шрифта: уменьшить количество HTTP-запросов
Используйте CDN: Некоторые большие изображения могут быть размещены непосредственно на сервере, чтобы уменьшить задержку доступа.

Настоящий

До оптимизации

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

(1) Код конфигурации

easywebpack имеет несколько встроенных плагинов, которые можно включать и выключать с помощью простой настройки.Конечно, вы также можете переопределить конфигурацию по умолчанию и настроить конфигурацию.

// 安装
$ npm install imagemin-webpack-plugin --save-dev

// 配置webpack.config.js
module.exports = {
  plugins: [
    { // 1. 禁用内置图片压缩插件配置（imagemin-webpack-plugin），默认启用
      // imagemini: false, 
      
      // 2. 当然也可以自定义配置
      imagemini: {
        enable: true,
        env: ["prod"],
        type: "client",
        name: "imagemin-webpack-plugin",
        entry: "default",
        args: {
          test: /\.(jpe?g|png|gif|svg)$/i,
          optipng: {
            optimizationLevel: 9,
          },
          pngquant: {
            // 压缩质量
            quality: "20-30",
          },
        },
      },
    },
  ],
};

(2) Сравнение конфигураций

Фотографии из ресурсов4.6MB 变为 1.7MB, конечно я настроил20-30Это должно быть немного экстремально, в нормальных условиях конфигурация70-90.

Конфигурация у меня такая низкая, а картинка еще большая.Можно рассмотреть ее отдельно, сжать сначала вручную, а потом уже другую обработку делать.

преобразование base64 URL-загрузчика

Рассмотрите возможность использования небольших изображенийurl-loaderПрямая передачаbase64формат, уменьшающий сетевые запросы

(1) Код конфигурации:

easywebpack интегрирует плагин url-loader, который используется по умолчанию следующим образом:

// 配置webpack.config.js
module.exports = {
  module: {
    rules: [
      {
        // 1. 默认禁用
        // urlimage: false 
        
        // 2. 自定义处理
        urlimage: {
          options: { limit: 1024 * 5 }, // 小于5KB转为base64，大于的不转
        },
      },
    ],
  },
};

(2) Сравнение конфигураций

После настройки ресурс изображения из4.6MB 变为 4.4MB, изображение меньше, чем5KBПреобразуются в Base64 и количество картинок в 50,减少了60个

открыть одновременно

Есть несколько отличных картинок до сжатия,imageminПосле небольшого, если эти файлыimagemin-webpack-pluginПосле обработки не получится формат base64, т.к.loaderсуществуетpluginurl-loader

Если вы одновременно включаете сжатие изображения и преобразование base64, результат только сжимается, а не преобразуется в base64.

решение:Используйте image-webpack-loader вместо imagemin-webpack-plugin

(1) Код конфигурации:

Конфигурацию по умолчанию необходимо заменить следующей конфигурацией:

// 安装插件
$ npm install image-webpack-loader --save-dev

// 配置webpack.config.js
module.exports = {
  plugins: [
    {
      imagemini: false, // 禁用
    },
  ],
  module: {
    rules: [
      {
        // urlimage: false // 默认禁用
        urlimage: {
          use: [
            {
              loader: "url-loader",
              options: {
                limit: 1024 * 5, // 小于5KB转为base64
                fallback: "file-loader",
                name: `img/[name].[hash:8].[ext]`,
              },
            },
            {
              loader: "image-webpack-loader",
            },
          ],
        },
      },
    ],
  },
};

(2) Сравнение конфигураций:

Источник изображения из4.6MB 变为 2MB, ресурс изображения减少了57%, количество картинок уменьшено со 110 до 42,减少了68个

**这个是最合适的，最终也是采用了这个配置**

Следующий:После борьбы с сегментацией кода для оптимизации производительности внешнего интерфейса пакет пакетов был уменьшен на 26%.

Сверхдетальный анализ реального боя Lighthouse, поэлементный анализ и оптимизация
Детали оптимизации производительности переднего плана

Связанные справочные документы

Официальный сайт настройки плагина easywebpack
Адрес Github imagemin-webpack-plugin
документ конфигурации url-loader