Option to load Cesium.js conditionally

[vladoyoung]

I'm running an app that hosts a package react component that requires Cesium to run. Basically I'm using your plugin to set up Cesium so package X can use it, because Cesium can't be included in the package itself.

However, the package react component is displayed only on a certain page/tab of my app, but Cesium.js is loaded throughout the whole app, thus making unnecessary resource loading for ~90% of the pages (technically not full pages because I'm using BrowserRouter from react-router-dom).

Is there a current way to make the Cesium.js script load conditionally or should this be considered a potential feature for development?

Here is an example code that kind of works when I edit index.html after build.

<script>
    const currentPath = window.location.pathname;
    const isTwinsRoute = /^\/modpanel\/twins(\/.*)?$/.test(currentPath);

    if (isTwinsRoute) {
        Object.defineProperty(globalThis, 'CESIUM_BASE_URL', { value: '/cesium/' });
        const cesiumScript = document.createElement('script');
        cesiumScript.src = '/cesium/Cesium.js';
        cesiumScript.crossOrigin = 'anonymous';
        document.head.appendChild(cesiumScript);
    }
</script>

But this is clunky and has to be done manually after every build.

I really appreciate the work you've done with the plugin and it works very well out of the box. Hopefully there's an efficient solution to my problem too.

Let me know if you need more info on my side!

[s3xysteak]

The causes of lag is that Cesium.js is a huge file so it takes lot of network bandwidth. I think the perfect solution is using ESM to load on demand. I can provide an option to choose whether to enable iife. It still not good enough because it will take a long time buildling. But anyway, it could resolve the problem. I can improve it in the future.

[vladoyoung]

Woah, works like a charm! Amazing job on the new feature! 🙏