Community

Is there a way to bundle lazy loaded modules into a single file or main.js with webpack/angular 13?

778
1
10-19-2023 02:48 PM
DavidJohnson7
by
New Contributor
‎10-19-2023 02:48 PM

I have an angular 13 application that uses the javascript SDK 4.22.  When I build the application there are a number of files generated in the build output.  These appear to be lazy loaded modules.  Is there a way I can configure either the SDK or webpack to combine these modules into a single file?

Why? due to some unusual requirements I have to deliver the angular application a little funky and the server is getting overloaded with requests for the dependencies ultimately resulting in 404 errors for a number of the files.  I believe I can solve this if I were able to either: 1. include all dependencies in main.js (size isn't an issue) or 2. consolidate all dependencies into a single .js file.

I've been looking everywhere for a solution and so far have found nothing.

0 Kudos
1 Reply
AndyGup
by Esri Regular Contributor
Esri Regular Contributor
‎10-20-2023 11:03 AM

Hi @DavidJohnson7, are you using @arcgis/core?

When an ArcGIS JavaScript Maps SDK app loads, there are variety of HTTP request types depending on what functionality is in your app. These include .js, vector tiles, queries, localization files (json), css and sprites. The JavaScript-based dependencies should only be a relatively small number of the total HTTP requests needed to load your app.

Angular 13 uses Webpack, and that typically does a very good job of minimizing the number of SDK JavaScript bundles that are needed for the initial app load. We track this information here: https://github.com/Esri/jsapi-resources/blob/main/esm-samples/.metrics/.

I'm not familiar with your architecture, such as number of simultaneous users and hardware sizing. However, with regards to HTTP requests overloading your server, the most definitive approach would be to host the ArcGIS assets locally, and tweak your HTTP caching settings for those assets and the bundled modules. If you don't host the assets locally, then you'll be using the ArcGIS CDN and it's edge server caching rules, which may or may not be appropriate for your unique requirements. Is that something you have looked at?

0 Kudos