How can I reduce/optimized the ES modules copied to my project?

Question

Hi Andy and team!

First of all, great work implementing the "Build with ES modules". This will be a great asset for all of us moving forward.

We followed the instructions on this page to change our build to make use of ES modules. We are using Vue.js and we also found this example to be extremely helpful for our specific use case. Now we have our 4.x project building with ES modules. Yay!

My question is, how can optimize the build to only grab the specific modules we need? Currently, we are copying all the public assets, and it is over 20 MB; however, we are using very few in our project. I 3.x there was the web optimizer tool. Is there an equivalent here? We are using the build in a PWA and are trying to minimize the cache size. iOS limiting to 50 MB is really restricting.

Thanks!

ReneRubalcava · Accepted Answer

You can look at how the webpack-plugin does it.

https://github.com/Esri/arcgis-webpack-plugin/blob/master/lib/requiredPlugins.js

You could maybe use it wit vue-cli, it allows extending the webpack config or set up a script to do similar.

Another option is to load the assets from the CDN.

import config from '@arcgis/core/config';
config.assetsPath = 'https://cdn.jsdelivr.net/npm/arcgis-js-api@4.18.1/assets';

There's no way to really optimize the output chunks of the core api outside assets. That's determined by the build tooling, and in many cases it's unknown what is needed at runtime, like if you use a webmap, there's no way to know up front what layers, capabilities might be needed.