Using cesium default type make my project gigantic

CesiumJS
1

Hello, In my angular 10 app I am using cesium.

This might be something I am doing wrong again, but I tried to switch to cesium built in type, instead of @types/cesium which probably will get abandoned soon.

it works ok, but the thing is the following :

BEFORE

@types
@types1918×927 139 KB

AFTER

cesiumtypes
cesiumtypes1920×932 137 KB

From a merely 11mb, my app is now 22 mb ?

I am using the default import like this

import { HorizontalOrigin, VerticalOrigin, NearFarScalar, Cartesian2, Color } from "cesium";

should I switch them all to

import Color from 'cesium/Source/Core/Color';
import NearFarScalar from 'cesium/Source/Core/NearFarScalar';
import HorizontalOrigin from 'cesium/Source/Scene/HorizontalOrigin';
import VerticalOrigin from 'cesium/Source/Scene/VerticalOrigin';

this will add a lot of useless lines tho

2

@Crocsx_Gaming could you please use source-map-explorer to inspect the bundle instead of the webpack one and post your results again? You will probably get the same results but the Angular team suggests using source-map-explorer for Angular apps because they have seen notable differences during reporting of the bundles.

Here is a link that contains simple steps on how to use source-map-explorer https://angular.io/guide/deployment#inspect-the-bundles

3

@Aristeidis_Bampakos Above is without import ‘cesium’ down is with

BEFORE
BEFORE1916×884 39.2 KB
Screenshot 2020-09-14 235523
Screenshot 2020-09-14 2355231911×893 59.4 KB

4

Hi @Crocsx_Gaming,

Thanks for baring with me :+1: I am sure that both of the following ways will produce the same result:

import { Color } from 'cesium';

import Color from 'cesium/Source/Core/Color';

However, let me clarify that the use of @types/cesium package, is totally different from the above ES6 import statements. In the first case we are actually defining types in our code, just like using an interface in an Angular artifact:

interface Car {
  brand: string;
  type: string
} 

const myCar: Car;

In the preceding snippet we are not importing something in our code because interfaces and types are syntactic sugar and they are vanished during compiling to JavaScript. Now in the case of the ES6 statements, we are importing the whole class along with any dependencies in our code:

import { Car } from './car;'

The previous snippet would import the car.js in our code. So, the final bundle will contain the JavaScript of car.js along with any other files that are dependencies of the Car.

5

I see what you say and I kind of knew it but.

One thing I don’t understand it feels like I have two Cesium now. One is Cesium/Build/Cesium.js the other is all the import.

prior to using import ‘cesium’ to use the native typings, I was using Cesium from the window scope, with the @types/cesium and that resulted on a single Cesium.js in the bundle, and with it all the functionalities.

Now, with the import, I use Cesium.js, but also all the separated module which make them duplicated.

Is there a way to reduce this bundle?

6

prior to using import ‘cesium’ to use the native typings, I was using Cesium from the window scope, with the @types/cesium

Sorry if I did not make it clear with my previous answer but what I was trying to explain is that by using @types/cesium, you are not adding Cesium in the window object. Types are not importing anything. Probably you should have a script tag somewhere that includes Cesium at first place :wink:

7

Ahhh, that make sense. let me check

8

Ah sorry,

there was indeed a

"build": {
          "builder": "@angular-builders/custom-webpack:browser",
          "options": {
            ....
            "assets": [
              {
                "glob": "**/*",
                "input": "./node_modules/cesium/Build/Cesium",
                "output": "./assets/cesium"
              },
              "src/favicon.ico",
              "src/assets"
            ],
            "styles": ["./node_modules/cesium/Build/Cesium/Widgets/widgets.css", "src/styles.less"],
            "scripts": ["./node_modules/cesium/Build/Cesium/Cesium.js", "./node_modules/hls.js/dist/hls.min.js"]
             ...
          },

the script ./node_modules/cesium/Build/Cesium/Cesium.js added to the build. So I guess it’s not necessary anymore if I use import ‘cesium’

2 Likes
9

In case it helps anybody in the future, take a look at the second image from source_map_explorer, and you can clearly see on the left side, the biggest box contains lots of a bunch of individual Cesium imports (Scene, Core, etc), then on the right you have a single huge empty box for cesium/Build/Cesium/Cesium.js, which is the monolithic build for CommonJS. That’s how you can tell that Cesium’s code is in there twice.

None of this is actually Angular-specific, or even Typescript-specific. This could happen to anybody when they migrate to ES6 modules.

1 Like