Заметки про React: “Оптимизация загрузки SPA с помощью предварительной загрузки чанков Для…”

Оптимизация загрузки SPA с помощью предварительной загрузки чанков

Для уменьшения размера бандла используют подход разделения кода по роутам. В этом подходе при открытии или переключении страницы происходит ленивая загрузка чанка роута. Из-за ленивой загрузки чанка, парсинга и выполнения скрипта увеличивается время загрузки страницы. Это может быть особенно актуально при открытии сайта, в случае ленивой загрузки происходит «водопад» запросов – сначала загружается и исполняется основной бандл, который лениво загружает чанк текущей страницы.

Для решения проблемы водопада при открытии сайта можно вставлять небольшой скрипт в <head>, который будет мапить текущий адрес и чанк роута. Найденный чанк роута может подгружаться через link rel="preload”.

В своей статье автор поделился скриптом для предварительной загрузки чанка. Для реализации автор использовал сборщик Rsbuild. Для именования чанков можно использовать комментарий webpackChunkName. Это пригодится для мапинга пути и имени чанка:


const Home = lazy(
  () => import(/* webpackChunkName: "home" */ "./pages/home-page"),
);

export const routeChunkMapping = {
  "/": "home",
  "/home": "home"
};

https://mmazzarolo.com/blog/2024-08-13-async-chunk-preloading-on-load/