Help Needed: Minimizing Chunks in Angular Build with ArcGIS Core

[someswarraomanukonda]

Hello Guys,

I am using the ArcGIS Core NPM package in my Angular application to create maps and other services. The application runs successfully, and everything works fine during development. However, when I build the application, it generates over 800 chunk files, which significantly impacts performance. I am concerned about this issue when deploying to production. Since I am not using the Webpack NPM package (as it is archived), could you please help me reduce the number of chunks generated during the build process?

[AndyGup]

Angular 18+ defaults to using esbuild for production builds. The large number of files is a known issue with Angular, unrelated to the ArcGIS SDK for JavaScript, because of esbuild code splitting. We also document this issue here: https://github.com/Esri/jsapi-resources/tree/main/core-samples/jsapi-angular-cli#known-issues. 

In theory, you can still use Webpack with Angular 19, for example: https://www.npmjs.com/package/@angular-builders/custom-webpack. I don't have any experience with that builder, but you might look around. Or maybe another community member with experience can jump in and share their experience.

For the best performance, make sure your server is using HTTP/2 (or HTTP/3) and that your browser version(s) are on the SDK's browser support list: https://developers.arcgis.com/javascript/latest/system-requirements/#supported-browsers. Modern browsers are generally quite performant when combined with the latest HTTP protocols.

You can see a comparison of the various build tools and various build/performance numbers here: https://github.com/Esri/jsapi-resources/blob/main/core-samples/.metrics/4.31.0.csv.