Building in vite includes unnecessary files

[ae]

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?  

[ReneRubalcava · Accepted solution]

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

[ae]

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.

[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.

[ReneRubalcava]

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.