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

676
2
Jump to solution
03-04-2021 07:09 AM
MattStayner
Occasional Contributor

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!

 

Tags (1)
0 Kudos
1 Solution

Accepted Solutions
ReneRubalcava
Frequent Contributor II

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.

View solution in original post

0 Kudos
2 Replies
ReneRubalcava
Frequent Contributor II

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.

0 Kudos
MattStayner
Occasional Contributor

Thanks @ReneRubalcava!

I really wanted to make this work for a PWA. It seems it is technically possible, it is unlikely to work on iOS where there is a 50 MB cap. In case others are interested, we found that switching to ES Modules inscreased the size of our js folder by 32 MB, and the assets folder is 22 MB. With that alone, you are over 50 MB.

The ArcGIS Javascript API is so powerful, and I understand why it is large, but it would be nice in the future if we could get an optimized version just for the few small methods we are using in our applications.