I am currently integrating ArcGIS into a small forms library I am building for an organization. My library is bundled into UMD, and then imported into a browser using a simple <script> tag like so :
<script type="text/javascript" src="mylibrary.umd.js"></script>
The bundling is done via Vite, on library mode, bundling into UMD.
Before I started using the ArcGIS libraries, my bundle size was as below :
dist/browser/mylibrary.umd.js 188.58 kB │ gzip: 63.94 kB
After adding ArcGIS via the following NPM import :
"@arcgis/core": "^4.29.10"
And then importing the following types (Using a map, pinning a map, zooming, just a few small things).
import MapView from "@arcgis/core/views/MapView";
import Map from "@arcgis/core/Map";
import Search from "@arcgis/core/widgets/Search";
import Graphic from "@arcgis/core/Graphic";
import Point from "@arcgis/core/geometry/Point.js";
import Color from "@arcgis/core/Color.js";
import * as Symbols from "@arcgis/core/symbols.js";
I now have :
dist/browser/mylibrary.umd.js 7,950.07 kB │ gzip: 2,149.95 kB
This seems outrageous to the say the least.
I have read around several other posts, with several comments around "It will only -load- what it needs at runtime". Possibly true, but the bundle size is still downloaded in one go and to go from 63KB to 2149KB is a bit ridiculous.
Am I doing something wrong here that the bundle size is suddenly this large, and what can I do to shrink the bundle size all together? It's likely that I try and externalize the dependency, so that my bundle is not so big, but even then, it's just pushing the issue elsewhere.
