2. Оптимизация в бандлерах (webpack-5)

1. Treeshaking (трясем дерево зависимостей и смотрим что реально используется)

Конфиг webpack optimizations

optimizations:
usedExports: true - включаем treeshaking

В настройка babelrc (настраивает преобразование модулей) может быть косяк
modules: "cjs" - приводит все к commonJS - сложно оптимизровать - не делай так
modules : false - оставить как есть export и import

Webpack не анализирует модули без доп настроек.

Убираем неиспользуемые импорты (что есть в коде, но по факту не используется)
optimizations:
innerGraph: true

Под капотом webpack использует доп экспорты/импорты в бандле, это можно оптимизировать и сделать чтобы твой импорт указывал напрямую на функцию (без посреднических экспорт/импорт)
optimizations:
providedExport: true

Настройка sideEffects.
optimizations:
sideEffects: true / по дефолту

Позволяет убирать модули без сайд эффектов (которые не изменяют global и тп). Как негласный стандарт многие библиотеки в package.json указывают, есть ли там функции с сайд эффектами через sideEffects: true/false/regex

2. Минимизация доп кода

У webpack 3 вида модулей:
- js/dynamic - commonjs
- js/auto -
- js/esm - импорт экспорт

Это указывается в pakage.json библиотек (поле type):
- commonJS
- auto
- module

Для commonJS treeShaking работать не будет, для auto как то сработает, для module - будет

Можно слепить вообще все в один модуль через concatinateModules
optimizations:
concatinateModules: true

Классная мысль - сначала юзать простой Zero config для parcel, если нужно что то сложнее - то webpack.