Как улучшить производительность фронтенда с помощью Lazy Loading и Code Splitting

document.addEventListener('DOMContentLoaded', function () {
  // Находим все изображения с классом "lazy"
  const lazyImages = document.querySelectorAll('img.lazy');
 
  // Проверяем, поддерживается ли Intersection Observer
  if ('IntersectionObserver' in window) {
    // Создаем новый наблюдатель Intersection Observer
    let lazyImageObserver = new IntersectionObserver(function (
      entries,
      observer
    ) {
      entries.forEach(function (entry) {
        // Если изображение пересекается с областью видимости
        if (entry.isIntersecting) {
          let lazyImage = entry.target;
          // Заменяем src изображения на значение из data-src
          lazyImage.src = lazyImage.dataset.src;
          // Удаляем класс "lazy"
          lazyImage.classList.remove('lazy');
          // Прекращаем наблюдение за этим изображением
          lazyImageObserver.unobserve(lazyImage);
        }
      });
    });
 
    // Начинаем наблюдение за каждым ленивым изображением
    lazyImages.forEach(function (lazyImage) {
      lazyImageObserver.observe(lazyImage);
    });
  } else {
    // Фоллбек для браузеров, не поддерживающих Intersection Observer
    let lazyLoad = function () {
      let active = false;
 
      if (active === false) {
        active = true;
 
        setTimeout(function () {
          lazyImages.forEach(function (lazyImage) {
            // Проверяем, что изображение находится в области видимости и отображается
            if (
              lazyImage.getBoundingClientRect().top <= window.innerHeight &&
              lazyImage.getBoundingClientRect().bottom >= 0 &&
              getComputedStyle(lazyImage).display !== 'none'
            ) {
              // Заменяем src изображения на значение из data-src
              lazyImage.src = lazyImage.dataset.src;
              // Удаляем класс "lazy"
              lazyImage.classList.remove('lazy');
 
              // Убираем это изображение из списка наблюдаемых
              lazyImages = lazyImages.filter(function (image) {
                return image !== lazyImage;
              });
 
              // Если все изображения загружены, убираем слушатели событий
              if (lazyImages.length === 0) {
                document.removeEventListener('scroll', lazyLoad);
                window.removeEventListener('resize', lazyLoad);
                window.removeEventListener('orientationchange', lazyLoad);
              }
            }
          });
 
          active = false;
        }, 200);
      }
    };
 
    // Добавляем слушатели событий для загрузки изображений при прокрутке, изменении размера окна или изменении ориентации устройства
    document.addEventListener('scroll', lazyLoad);
    window.addEventListener('resize', lazyLoad);
    window.addEventListener('orientationchange', lazyLoad);
  }
});

npm install --save-dev webpack webpack-cli webpack-bundle-analyzer

const path = require('path');
 
module.exports = {
  entry: {
    main: './src/index.js',
  },
  output: {
    filename: '[name].bundle.js',
    path: path.resolve(__dirname, 'dist'),
  },
  optimization: {
    splitChunks: {
      chunks: 'all',
    },
  },
};

// index.js
import('./moduleA').then((moduleA) => {
  moduleA.doSomething();
});
 
import('./moduleB').then((moduleB) => {
  moduleB.doSomethingElse();
});