Оптимизация. Заметки после live-coding (wepback-4)

После просмотра во вкладке network можно заметить загрузку жирного бандла. Посмотрим через webpack-bundle-analyzer что лишнее.

Возможные проблемы:
1 - неоптимальный бандл
2 - moment.js (или любая другая библиотека) грузит все локали и лишние зависимости
3 - CSS внутри JS
4 - нет code splitting

Возможные причины:
1 - несколько версий одной библиотеки
2 - грузится весь пакет ради одной функции
3 - лишние полифилы
4 - отсутствие хеша зависимого от контента (а не от билда) в имени бандла
5 - сборка не в production mode
6 - неподходящие source maps

▫️CSS
Выдираем css из бандла с помощью MiniCssExtractPlugin

▫️Fonts
Выносим шритфы из бандла с помощью fileLoader c
options : {
limit: 1024
}

▫️Конекретный пример с использованием определенной локали для moment.js
Используем
new webpack.ContextReplacementPlugin(/moment[/\\]locale$/, /en/);
что позволяет выбросить остальные локали

▫️Code Spliting
1 - для роутинга
2 - тяжелый js
3 - что не нужно сейчас
4 - что редко менятеся (и можно закешировать, проставляя [contentHash] в webpack, а не [hash])

Роутинг сплитится при помощи React lazy + в tsconfig прописать
{
module: esnext
moduleResolution: "node"
}

Разбиваем бандл дальше через optimization настройку webpack
optimization: {
minimize: true,
splitChunks: {
cacheGroups: {
uikit (или любое другое проперти): {
test: тут regex,
name: "uikit",
chunks: "all",
priority: 4 (любое число в зависимости от того, нужно ли сначала сбилдить этот бандл чтобы он не вошел в другой бандл)
}
}
}
}