# Using cesium default type make my project gigantic

**URL:** <https://community.cesium.com/t/using-cesium-default-type-make-my-project-gigantic/10906>\
**Category:** CesiumJS\
**Created:** [September 13, 2020, 4:54am UTC](https://community.cesium.com/t/using-cesium-default-type-make-my-project-gigantic/10906 "2020-09-13T04:54:05Z")\
**Posts on this page:** 9\
**Page:** 1

<div class="post-metadata">

**Author:** ![Crocsx\_Gaming](https://sea2.discourse-cdn.com/cesium/user_avatar/community.cesium.com/crocsx_gaming/32/2454_2.png) [@Crocsx\_Gaming](https://community.cesium.com/u/Crocsx_Gaming)\
**Post date:** [September 13, 2020, 4:54am UTC](https://community.cesium.com/t/using-cesium-default-type-make-my-project-gigantic/10906/1 "2020-09-13T04:54:05Z")

</div>

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](https://global.discourse-cdn.com/cesium/original/2X/7/71914a59f8f40b4946ec57d439c2c7933d0514e1.png)

AFTER

 ![cesiumtypes](https://global.discourse-cdn.com/cesium/original/2X/0/0432aff5992de08f115b3369ba9b4528fc9eb4cd.png)

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

I am using the default import like this

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

```

should I switch them all to

```auto
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

---

<div class="post-metadata">

**Author:** ![Aristeidis\_Bampakos](https://sea2.discourse-cdn.com/cesium/user_avatar/community.cesium.com/aristeidis_bampakos/32/2013_2.png) [@Aristeidis\_Bampakos](https://community.cesium.com/u/Aristeidis_Bampakos)\
**Post date:** [September 14, 2020, 1:21pm UTC](https://community.cesium.com/t/using-cesium-default-type-make-my-project-gigantic/10906/2 "2020-09-14T13:21:26Z")

</div>

@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](https://angular.io/guide/deployment#inspect-the-bundles)

---

<div class="post-metadata">

**Author:** ![Crocsx\_Gaming](https://sea2.discourse-cdn.com/cesium/user_avatar/community.cesium.com/crocsx_gaming/32/2454_2.png) [@Crocsx\_Gaming](https://community.cesium.com/u/Crocsx_Gaming)\
**Post date:** [September 14, 2020, 2:55pm UTC](https://community.cesium.com/t/using-cesium-default-type-make-my-project-gigantic/10906/3 "2020-09-14T14:55:46Z")

</div>

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

> [@Aristeidis\_Bampakos](#):
>
> **source-map-explorer**

 ![BEFORE](https://global.discourse-cdn.com/cesium/original/2X/8/8fde6148fa086cc654ee50741280282edafc3f99.png) ![Screenshot 2020-09-14 235523](https://global.discourse-cdn.com/cesium/original/3X/6/9/6945d2f45a1aa67332cd09f794f0c140f4bad403.png)

---

<div class="post-metadata">

**Author:** ![Aristeidis\_Bampakos](https://sea2.discourse-cdn.com/cesium/user_avatar/community.cesium.com/aristeidis_bampakos/32/2013_2.png) [@Aristeidis\_Bampakos](https://community.cesium.com/u/Aristeidis_Bampakos)\
**Post date:** [September 15, 2020, 12:30pm UTC](https://community.cesium.com/t/using-cesium-default-type-make-my-project-gigantic/10906/4 "2020-09-15T12:30:05Z")

</div>

Hi @Crocsx_Gaming,

Thanks for baring with me 👍 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`.

---

<div class="post-metadata">

**Author:** ![Crocsx\_Gaming](https://sea2.discourse-cdn.com/cesium/user_avatar/community.cesium.com/crocsx_gaming/32/2454_2.png) [@Crocsx\_Gaming](https://community.cesium.com/u/Crocsx_Gaming)\
**Post date:** [September 15, 2020, 12:59pm UTC](https://community.cesium.com/t/using-cesium-default-type-make-my-project-gigantic/10906/5 "2020-09-15T12:59:19Z")

</div>

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?

---

<div class="post-metadata">

**Author:** ![Aristeidis\_Bampakos](https://sea2.discourse-cdn.com/cesium/user_avatar/community.cesium.com/aristeidis_bampakos/32/2013_2.png) [@Aristeidis\_Bampakos](https://community.cesium.com/u/Aristeidis_Bampakos)\
**Post date:** [September 15, 2020, 1:40pm UTC](https://community.cesium.com/t/using-cesium-default-type-make-my-project-gigantic/10906/6 "2020-09-15T13:40:13Z")

</div>

> 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 😉

---

<div class="post-metadata">

**Author:** ![Crocsx\_Gaming](https://sea2.discourse-cdn.com/cesium/user_avatar/community.cesium.com/crocsx_gaming/32/2454_2.png) [@Crocsx\_Gaming](https://community.cesium.com/u/Crocsx_Gaming)\
**Post date:** [September 15, 2020, 2:01pm UTC](https://community.cesium.com/t/using-cesium-default-type-make-my-project-gigantic/10906/7 "2020-09-15T14:01:39Z")

</div>

Ahhh, that make sense. let me check

---

<div class="post-metadata">

**Author:** ![Crocsx\_Gaming](https://sea2.discourse-cdn.com/cesium/user_avatar/community.cesium.com/crocsx_gaming/32/2454_2.png) [@Crocsx\_Gaming](https://community.cesium.com/u/Crocsx_Gaming)\
**Post date:** [September 15, 2020, 2:06pm UTC](https://community.cesium.com/t/using-cesium-default-type-make-my-project-gigantic/10906/8 "2020-09-15T14:06:06Z")

</div>

Ah sorry,

there was indeed a

```auto
"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’

---

<div class="post-metadata">

**Author:** ![James\_B](https://sea2.discourse-cdn.com/cesium/user_avatar/community.cesium.com/james_b/32/2424_2.png) [@James\_B](https://community.cesium.com/u/James_B)\
**Post date:** [September 16, 2020, 9:46am UTC](https://community.cesium.com/t/using-cesium-default-type-make-my-project-gigantic/10906/9 "2020-09-16T09:46:58Z")

</div>

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.