Пост Оптимизация загрузки 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/