Tree-shaking — способ убрать из вашей сборки неиспользуемый код.
Webpack умеет это делать. Также Webpack и Rollup умеют делать
scope hoisting. С Webpack также можно использовать
JSON Tree Shaking.
Code splitting — ещё одна функция Webpack, позволяющая разбить код на чанки и загружать их по запросу. Вам же не нужно загружать, парсить и компилировать весь JavaScript сразу. Вам нужно определить точки разбиения, а Webpack позаботится о зависимостях в сборке. Это позволит вам загружать минимум кода в самом начале и догружать нужные части по мере необходимости. У Александра Кондрова есть
фантастическое введение в code splitting с помощью Webpack и React.
Посмотрите в сторону
preload-webpack-plugin. Он берёт набор эндпоинтов из кода, разделенного на чанки нужным образом, а затем предлагает браузеру предварительно загрузить их с помощью <link rel = "preload"> или <link rel = "prefetch">.
Встроенные директивы Webpack также позволяют контролировать элементы preload/prefetch. Но здесь нужно
остерегаться ошибок связанных с приоритезацией загрузки.
Как правильно разделить свой код? Отслеживайте, какие фрагменты CSS и JavaScript используются, а какие не используются. Умар Ханса (Umar Hansa)
объясняет, как в этом может помочь Code Coverage в Devtools.
Работая с SPA, нужно учитывать — до того, как мы сможем отобразить страницу, потребуется некоторое время для инициализации приложения. В этом случае вам, скорее всего, потребуется кастомное решение, но можно поискать готовые решения. Например,
вот статья о том, как отладить производительность в React, а
здесь о том, как устранить распространенные проблемы с производительностью React, а
вот видео о повышении производительности в Angular. Как правило, большинство проблем с производительностью возникает на этапе начальной загрузки приложения.