How to optimize and enhance performance of Cesium App for Mobile and Desktop?
Recently i have used splitChunks and Terser Plugin and played with performance while exporting.
Do let me know how can i ignore full cesium libraries except those i have just imported i.e
import {
Ion,
Viewer,
Cartesian3,
Math,
Cesium3DTileset,
Cesium3DTileStyle,
ScreenSpaceEventType,
Color,
data,
defined,
Entity,
ProviderViewModel,
buildModuleUrl,
UrlTemplateImageryProvider,
knockout,
BaseLayerPicker,
Transforms,}
ignore all other cesium code. Is there any possibility to do this?
Hi @Ahsan_Mahmood,
Thank you for your question! Performance optimization is an important topic for geospatial APIs such as CesiumJS. It is possible to just import the parts of our library that you are using in your JavaScript code. The syntax for Bebpack imports should be roughly as follows:
import { VolumeUnits, AngleUnits, DistanceDisplayCondition, Math } from '@cesiumgs/cesium-analytics';
I recommend checking out the following guide for more information on our best practices when using CesiumJS and Webpack:
I’m looking forward to learning more!
Best,
Sam
2 Likes
Dear @sam.rothstein,
hope you are doing well. Thank you very much for replying me.
I have done all this. My main concern is Optimization and performance. I have to release for production. My Final parsed size for App.js is 10Mb. I want to reduce this.
I have used import command how can i ignore all cesium components which i have not imported while releasing for production so that App.js size can be reduced.
Any specific optimization for mobile as well? Do let me know if i have to explore any area
Regards,
Hi @Ahsan_Mahmood,
Just to be clear - are you importing CesiumJS using the Node Package Manager (npm)? In this case, I am not sure if there is a simple way to just download part of the CesiumJS API. In terms of CesiumJS optimization and performance at runtime, it’s important to carefully manage your primitive and entity objects. If you are storing your 3D data locally, you might want to consider using Cesium ion. This would also help reduce the size of your application.
Best,
Sam
1 Like
What you want from Webpack is called “tree shaking”. Due to this long standing unresolved issue you must first configure webpack to ignore the “exports” field in Cesium’s package.json:
...
resolve: {
exportsFields: [],
...
}
This should allow you to import { Math } from "cesium/Source/Core/Math which uses the original ESM module, rather than referring to the 10MB unified built code. When you run webpack in production mode, it should automatically try to tree-shake imports, resulting in a much smaller bundle.
You can verify this using the NPM package source-map-explorer, which provides a command line script. You just build the project, run source-map-explorer path/to/my-project.min.js and it will open an interactive diagram of the modules used in your build, along with their size.
Be aware, though, that every transitive import that is referenced by the class you imported will also be included – for example, Viewer probably imports over half the rest of the codebase on its own.
2 Likes
Thank you very much @James_B for the input here - this is very helpful 
1 Like