nav[aria-label="Primary Navigation"] { padding: 0; & ul { list-style: none; width: 100%; display: flex; flex-direction: row; justify-content: start; align-items: start; gap: 30px; padding: 0; & li { margin: 0; } & ul li { list-style: none; } } }

Building in vite includes unnecessary files

We have a simple app showing a map that uses es modules and Vite for building (we do not set assetsPath). When we do a "npm run build" we end up with almost 300 files from the arcgis api for js in our dist/assets folder.

When running the built app we can see that some of those 300 files are imported and used, but far from all of them. For instance the assets folder includes files for WMTSLayer, although we do not use WMTS layers in our app.

Why are there files included in the build that apparently are not used by the app? Why are the files not being bundled?

Finde mehr Beiträge mit dem Tag

Accepted answers

RRubalcava

This is because the dynamic imports using in the API. We can't always determine what will be needed for rendering and loading portal items at build time, so dynamic imports allow JS to load modules as needed. Vite using esbuild, will output all files it thinks might be needed at runtime.

There's some additional info in our github sample repo.

https://github.com/Esri/jsapi-resources/tree/main/esm-samples#bundle-size-and-performance

All comments

RRubalcava

Yes, autocasting also contributes as it will add to the bundles as needed. Again, size on disc is not related to size used at runtime.

rob_hewy

Would this also be related to autocasts that are used in some of the samples?

Is that the tradeoff?

Or can one still tree shake?

BTW I am attempting to use Vite and JSAPI but the build assets folder has a lot of JS files that I perceived may not be needed.

Note, for my project I do not see rollup in the node_modules folder and the vite.config.js did not exists until I made it. It could be how I created and configured the app on the dev side.

Thank you for the clarification! I think it would be great if you could add a sentence or two about this to the building with es modules page: https://developers.arcgis.com/javascript/latest/es-modules/ Pretty sure there will be many others wondering the same.

RRubalcava

There's some additional info in our github sample repo.

https://github.com/Esri/jsapi-resources/tree/main/esm-samples#bundle-size-and-performance

Nimm an der Unterhaltung teil

Angemeldete Mitglieder können Beiträge verfassen, Updates folgen und mehr. Neu hier? Registriere ein kostenloses Konto.

Schnellzugriffe

Community Help
Find useful guides, FAQs, and documents to help you navigate and make the most of Esri Community.