CommonJS

Czy wiesz, jak analizować i optymalizować zależności w bundle?

16 czerwca 2026

Przy budowaniu projektu Angularowego można natrafić na poniższy błąd:

Application bundle generation complete. [28.317 seconds]

▲ [WARNING] bundle initial exceeded maximum budget. Budget 2.00 MB was not met by 1.89 MB with a total of 3.89 MB.

Rozpoczynamy śledztwo od zbudowania aplikacji z flagą statsJson. Ustawiamy ją w angular.json/project.json lub uruchamiamy z nią build.

Po zbudowaniu aplikacji w ten sposób w katalogu wynikowym pojawi się dodatkowy wygenerowany plik - stats.json.

W zależności od tego, czy używamy esbuild, czy webpack, należy użyć odpowiedniego narzędzia:

esbuild-visualizer
webpack-bundle-analyzer

Po otwarciu pliku można zobaczyć poniższy ekran:

Interfejs narzędzia do analizy rozmiaru bundle'a JavaScript

Przyjrzyjmy się w takim razie plikowi, który zajmuje sporo miejsca. W naszym przypadku będzie to lodash.js. Przed zmianami wyglądał tak:

Analiza rozmiaru i importów biblioteki lodash w bundle'u JavaScript

Jest to spowodowane tym, że przez użycie niepoprawnego importu w plikach importowana jest cała biblioteka, co powoduje załadowanie całej zależności.

import {uniqWith, isEqual} from 'lodash';
import lodash from 'lodash';

Możemy to zoptymalizować na dwa sposoby:

(Common JS) Zawężanie importu

Należy zawęzić import do elementów, które są używane:
```
 import uniqWith from 'lodash/uniqWith';
 import isEqual from 'lodash/isEqual';
 import unset from 'lodash/unset';
```
po zmianach:

z ~75KB na ~21KB, czyli prawie 4 krotna optymalizacja bundle dla wybranej zależności!
(ESM) Korzystanie z odpowiedniej zależności

Zamiast korzystać z zależności AMD/Common JS, można zaimportować zależność modułową (ES). Lodash udostępnia taką wersję: lodash-es

Wtedy import wygląda tak:
```
 import {uniqWith, isEqual, unset} from 'lodash-es';
```
Tree shaking sprawia, że ładowane są tylko używane zależności, zmniejszając przy tym rozmiar bundle’a.