javascript - Angular CLI 8 og webpack genererer en optimalisert main.js-fil som er større enn den uoptimaliserte kodebasen


Vi er et lite team av utviklere som jobber med et ganske typisk ERP-system for en kunde. Vi har laget hundrevis av små inndataformer, rutenett, underformer osv. osv., så nå har vi omtrent 1600 filer (.ts, .html) med en samlet størrelse på omtrent 6 MB.

Vi startet fra en standard SPA .NET Core 2.2 + Angular 6 (oppgradert til 8) Visual Studio-mal, og den har fungert helt fint. Bortsett fra at vi nylig har lagt merke til at byggetidene våre har blitt mye lengre og distribusjonspakken vår har vokst til en latterlig størrelse.

Nå er byggetiden vår omtrent 25 minutter, og mesteparten av tiden brukes av ModuleConcatenationPlugin (som ser ut til å bruke CPU noe ineffektivt og aldri går over 15%). Og - overraskelse! - main.js er 20 MB (mens vendor.js er under 3 MB).

Det er definitivt noe galt med optimaliseringen. Hvorfor blir vår 6 MB store TypeScript-kodebase (med mange kommentarer og mellomrom og greier) "optimalisert" til en 20 MB fil?

Her er resultatene fra webpack-buntanalysatoren.

Som du ser, ser main.js ren ut; det er ingen fremmed kode, bare våre egne /src ~1600 filer.

Hvordan løser vi problemet, slik at koden vår blir riktig optimalisert (og byggetiden redusert, hvis mulig)?

Vi gjør ikke noe ekstremt eller eksotisk - det virker som et normalt brukstilfelle; hvert ERP-system vil ha hundrevis av små skjemaer; så hvorfor fungerer ikke optimaliseringen som den skal rett ut av esken?