Menu
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?
971
Coming back to provide a solution I have been using for this for the past few months.
I am using a Nx monorepo and their angular build plugin, so if you are not, you may need to modify this to work with your project setup.
In my project.json, I have this build config:
"build": {
"executor": "@nx/angular:application",
"outputs": ["{options.outputPath}"],
"options": {
"plugins": ["tools/chunk-names-plugin.js"],
...
...
}
I created my own build plugin called chunk-names-plugin.js which is inside a tools directory in my projects root folder.
const ChunkNamesPlugin = {
name: 'plugin1',
setup(build) {
const options = build.initialOptions;
options.chunkNames = '[dir]/[name]-[hash]';
options.entryNames = '[dir]/[name]-[hash]';
options.splitting = true;
}
}
module.exports = ChunkNamesPlugin;
My project has grown since then, so the output looks a little different, however, how the lazy loaded chunks have their respective path names instead of just "chunk" or "src" which helps with clarity of what being bundled.
Initial chunk files | Names | Raw size | Estimated transfer size
main-L53R5S6F.js | main | 606.10 kB | 139.47 kB
chunk-2HUNLZNZ.js | - | 19.34 kB | 5.63 kB
chunk-3TFCCJUI.js | - | 780 bytes | 780 bytes
chunk-BKZRRONH.js | - | 1.12 kB | 560 bytes
chunk-BPLYSY2Z.js | - | 1.86 kB | 720 bytes
chunk-CQXMLCCJ.js | - | 199.43 kB | 50.94 kB
chunk-DRCLJANB.js | - | 49.50 kB | 14.18 kB
chunk-DYP5WS3G.js | - | 1.02 kB | 1.02 kB
chunk-EC2PC56W.js | [39m[2m- | 1.22 kB | 535 bytes
chunk-ECZKWT26.js | - | 60.51 kB | 16.11 kB
chunk-F2CIMG3O.js | - | 1.59 kB | 721 bytes
chunk-GXOESWCY.js | - | 13.68 kB | 4.24 kB
chunk-IBTC45SB.js | - | 1.62 kB | 407 bytes
chunk-IDBANHQH.js | - | 1.19 kB | 613 bytes
chunk-IM2ST3DR.js | - | 79.18 kB | 19.43 kB
chunk-MYBIZDJ7.js | - | 4.27 kB | 1.39 kB
chunk-N7Z25T2F.js | - | 66.98 kB | 17.40 kB
chunk-QNMFDNIR.js | - | 57.92 kB | 12.31 kB
chunk-SR4IITK2.js | - | 182.36 kB | 52.96 kB
chunk-TEMISVX5.js | - | 4.89 kB | 1.61 kB
chunk-YJCA42X6.js | - | 5.01 kB | 1.60 kB
chunk-ZP6JSCHV.js | - | 5.33 kB | 1.82 kB
polyfills-FFHMD2TL.js | polyfills | 34.52 kB | 11.28 kB
styles-RIGL5EMZ.css | styles | 159.86 kB | 18.05 kB
| Initial total | 1.56 MB | 373.77 kB
Lazy chunk files | Names | Raw size | Estimated transfer size
chunk-2ZU2A2NF.js | - | 3.41 kB | 1.17 kB
libs/app/source-tank/feature-maintenance/src/lib/maintenance-create-modal/maintenance-create-modal.component-T34VBNI6.js | maintenance-create-modal-component | 9.83 kB | 2.69 kB
libs/app/source-tank/feature-maintenance/src/lib/maintenance-search-results-compact/maintenance-search-results-compact.component-PPWT7QKU.js | maintenance-search-results-compact-component | 3.01 kB | 1.13 kB
libs/app/source-tank/feature-maintenance/src/lib/maintenance-upload-modal/maintenance-upload-modal.component-PU2NXOB3.js | maintenance-upload-modal-component | 13.31 kB | 3.58 kB
libs/shared/feature/admin/src-HMUFKBZY.js | index | 12.87 kB | 4.28 kB
libs/shared/feature/change-log/src-ISOXYLAD.js | index | 6.75 kB | 2.33 kB
libs/shared/feature/errors/src-OWFZMJBR.js | index | 15.64 kB | 4.99 kB
libs/shared/feature/heartbeat/src-4EBBMPQ4.js | index | 13.17 kB | 3.71 kB
libs/shared/feature/help/src-KZVE6W6U.js | index | 5.60 kB | 1.94 kB
libs/shared/feature/notifications/src-KBG2N6P2.js | index | 4.93 kB | 1.61 kB
libs/shared/feature/preferences/src-Y3TY2RQB.js | index | 4.61 kB | 1.52 kB
node_modules/@angular/animations/fesm2022/browser-YQDGMQV5.js | browser | 967 bytes | 967 bytes
node_modules/@angular/common/fesm2022/common-DEWHH3ZJ.js | common | 3.05 kB | 1.07 kB
node_modules/@angular/router/fesm2022/router-VGZHJSCL.js | router | 2.17 kB | 810 bytes
node_modules/ngx-markdown/fesm2022/ngx-markdown-IW3VBFMP.js | ngx-markdown | 790 bytes | 790 bytes
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With