I just upgraded an Angular app from v17 to v18, and during the process I made the move from using webpack to now building with esbuild. Im trying to understand the code splitting and chunk names with esbuild though. When I was building with webpack, my build output would use the folder/library name as the chunk name Initial chunk files | Names | Raw size | Estimated transfer size main.92475803a5fca8d8.js | main | 1.42 MB | 273.24 kB styles.20904db00cf53b80.css | styles | 141.38 kB | 16.59 kB polyfills.0f3a4437da88979b.js | polyfills | 33.53 kB | 10.81 kB runtime.ba39d907e85687c8.js | runtime | 2.97 kB | 1.43 kB | Initial total | 1.59 MB | 302.06 kB Lazy chunk files | Names | Raw size | Estimated transfer size 371.9d3e31a503ec5f8b.js | bevtech-domain-wine-type-mocks | 625.53 kB | 100.67 kB 159.950ed6c3cf479734.js | bevtech-app-source-tank-mocks | 21.41 kB | 7.57 kB 828.b76b0b426edc2ab7.js | bevtech-shared-feature-errors | 15.00 kB | 4.81 kB 312.9d6d0d453f345efb.js | bevtech-shared-feature-heartbeat | 9.79 kB | 2.77 kB[39m[39m 563.6479fc29093db925.js | NestedAppAuthController-mjs | 8.01 kB | 2.13 kB common.033a642f4d7c3bcd.js | common | 6.18 kB | 1.01 kB 805.b65d734ca0645730.js | bevtech-shared-feature-version | 6.15 kB | 2.21 kB 949.a597d12949426514.js | bevtech-shared-feature-profile | 5.81 kB | 1.64 kB 708.5d90869b8eb826ea.js | bevtech-shared-feature-help | 5.31 kB | 1.87 kB 476.7e017a9c5d34cf3e.js | bevtech-shared-feature-notifications | 4.87 kB | 1.57 kB 776.d3b4ea7c52ff0412.js | bevtech-app-source-tank-mocks | 510 bytes | 277 bytes 688.de53900278fcbe74.js | bevtech-shared-mocks | 356 bytes | 239 bytes 689.511c5a5988140480.js | bevtech-shared-ui-atoms-icons | 177 bytes | 123 bytes But now with esbuild, and without really changing anything else prject wise other than the build executors, the chunk names are all missing or just say "index" Initial chunk files | Names | Raw size | Estimated transfer size main-KWHD6H2S.js | main | 1.14 MB | 110.58 kB chunk-JX2ZJQXV.js | - | 456.58 kB | 91.15 kB chunk-5CC73DVU.js | - | 168.01 kB | 49.63 kB styles-3SWETO6W.css | styles | 143.41 kB | 17.02 kB chunk-FEL4DAWO.js | - | 79.04 kB | 19.57 kB chunk-3ANSV6VJ.js | - | 55.63 kB | 15.59 kB chunk-7APSDC5B.js | - | 49.65 kB | 14.37 kB polyfills-6EAL64PA.js | polyfills | 34.23 kB | 11.13 kB chunk-QE2GORIC.js | - | 18.32 kB | 5.18 kB chunk-LB44TSLO.js | - | 15.58 kB | 5.17 kB chunk-UVA5YSGE.js | - | 9.18 kB | 2.58 kB chunk-NXR37NKG.js | - | 8.65 kB | 2.60 kB chunk-37B7PM2U.js | - | 2.49 kB | 964 bytes chunk-U4SIGHYW.js | - | 2.25 kB | 901 bytes chunk-BTQNES4R.js | - | 1.69 kB | 717 bytes chunk-OCEG32DO.js | - | 1.68 kB | 443 bytes chunk-LFEKHDIL.js | - | 1.12 kB | 535 bytes chunk-SOKPGJEH.js | - | 295 bytes | 295 bytes | Initial total | 2.19 MB | 348.44 kB Lazy chunk files | Names | Raw size | Estimated transfer size src-RMOL7GYA.js | index | 663.19 kB | 110.88 kB src-XLEY72BJ.js | index | 15.44 kB | 5.01 kB src-E4TECBBB.js | index | 6.36 kB | 1.93 kB src-VL7AMVCZ.js | index | 6.30 kB | 1.82 kB src-UICMSAO7.js | index | 5.56 kB | 1.98 kB src-5T3SWQ35.js | index | 4.97 kB | 1.64 kB router-F5OFDX6B.js | router | 2.06 kB | 800 bytes ngx-markdown-YKWGQXAU.js | ngx-markdown | 698 bytes | 698 bytes src-IHKGMIR7.js | index | 409 bytes | 409 bytes src-TH4CWI4Q.js | index | 125 bytes | 125 bytes BrowserPerformanceMeasurement-XR4JUOF4.js | BrowserPerformanceMeasurement | 113 bytes | 113 bytes What is driving the chunk names and is there something in the build configuration I can change so that I can get it back to the naming how it used to be, or is that just not possible using esbuild vs webpack? Continue reading...
