如何優化圖像以提高 React.js 中的網站性能

Question

我目前正在使用 React.js 開發一個網站。 該網站包括一個自動圖像滑塊/旋轉木馬，它確實影響了網站的性能並顯着降低了速度。

對於圖像 slider，我有以下代碼：

import React, { useState, useEffect } from "react";
import images from "../../constants/images";
import "../CSS/carousel.css";
import { BsArrowLeft, BsArrowRight } from "react-icons/bs";

const carouselImages = [
  images.carousel_one,
  images.carousel_two,
  images.carousel_three,
  images.carousel_four,
  images.carousel_five,
  images.carousel_six,
  images.carousel_seven,
  images.carousel_eight,
  images.carousel_nine,
  images.carousel_ten,
  images.carousel_eleven,
  images.carousel_twelve,
  images.carousel_thirteen,
  images.carousel_fourteen,
];

const Carousel = () => {
  const [current, setCurrent] = useState(0);

  useEffect(() => {
    const slideInterval = setInterval(() => {
      setCurrent((current) =>
        current < carouselImages.length - 1 ? current + 1 : 0
      );
    }, 3000);

    return () => clearInterval(slideInterval);
  }, []);
  const length = carouselImages.length;

  const nextSlide = () => {
    setCurrent(current === length - 1 ? 0 : current + 1);
  };

  const prevSlide = () => {
    setCurrent(current === 0 ? length - 1 : current - 1);
  };

  if (!Array.isArray(carouselImages) || carouselImages.length <= 0) {
    return null;
  }

  const switchIndex = (index) => {
    setCurrent(index);
  };

  return (
    <div className="app__carousel">
      <div className="app__carousel-inner_container">
        {carouselImages.map((slide, index) => (
          <div
            className={
              index === current
                ? "app__carousel-slide_active"
                : "app__carousel-slide"
            }
            key={index}
          >
            {index === current && (
              <img src={slide} className="app__carousel-image" />
            )}
          </div>
        ))}
        <BsArrowLeft onClick={prevSlide} className="app__carousel-left_arrow" />
        <BsArrowRight
          onClick={nextSlide}
          className="app__carousel-right_arrow"
        />
      </div>
      <div className="app__carousel-indicator_container">
        {carouselImages.map((_, index) => (
          <button
            className={`app__carousel-indicator_btn${
              current === index ? " active" : ""
            }`}
            onClick={() => switchIndex(index)}
          ></button>
        ))}
      </div>
    </div>
  );
};

export default Carousel;

我已經使用 'imagemin' 插件和 craco.config.js 文件來嘗試優化圖像。 我的 craco 文件如下所示：

const ImageMinimizerPlugin = require("image-minimizer-webpack-plugin");

module.exports = {
  webpack: {
    configure: (webpackConfig) => {
      webpackConfig.optimization.minimize = true;
      webpackConfig.optimization.minimizer.push(
        new ImageMinimizerPlugin({
          minimizer: {
            implementation: ImageMinimizerPlugin.imageminMinify,
            options: {
              plugins: [["mozjpeg", { quality: 85 }]],
            },
          },
          generator: [
            {
              preset: "webp",
              implementation: ImageMinimizerPlugin.imageminGenerate,
              options: {
                plugins: [
                  "imagemin-webp",
                  "imagemin-pngquant",
                  "imagemin-svgo",
                ],
              },
            },
          ],
        })
      );
      return webpackConfig;
    },
  },
};

我做的另一件事是通過運行使用 WebP 對圖像進行編碼

npm i imagemin-webp -D

並導入我的圖像，如下所示：

import carousel_one from "../assets/carousel_one.jpg?as=webp";

我已經采取的步驟僅將燈塔測試中的性能提高了幾個點。 是否可以在現有代碼中添加或改進其他任何內容以進一步提高性能？

Answer 1

您可以使用 AVIF 而不是 WEBP 進一步優化圖像，在大多數情況下，在相同圖像質量的情況下，它應該提供比 WEBP 更好的壓縮。 如果您想進一步推進這一步，可以在線使用 AI 壓縮器，它們可以在不進一步降低質量的情況下縮小尺寸（每次您想要縮小圖像尺寸時都必須手動執行此操作，或者在大多數情況下為 API 付費）。

另一種選擇是提供符合您所用分辨率所需的最小尺寸的圖像。 這意味着要么使用<picture>或srcset屬性，要么在 JavaScript 中制作您自己的解決方案。

但最常見的圖片減慢頁面解決方案仍然是延遲加載。