# Huge .js file in development

**URL:** <https://phaser.discourse.group/t/huge-js-file-in-development/5316>\
**Category:** Phaser 3\
**Created:** [February 24, 2020, 3:46pm UTC](https://phaser.discourse.group/t/huge-js-file-in-development/5316 "2020-02-24T15:46:58Z")\
**Posts on this page:** 10\
**Page:** 1

<div class="post-metadata">

**Author:** ![oivinds](https://yyz2.discourse-cdn.com/free1/user_avatar/phaser.discourse.group/oivinds/32/1973_2.png) [@oivinds](https://phaser.discourse.group/u/oivinds)\
**Post date:** [February 24, 2020, 3:46pm UTC](https://phaser.discourse.group/t/huge-js-file-in-development/5316/1 "2020-02-24T15:46:58Z")

</div>

I use Webpack and Typescript in my project.  
After I import Phaser in development the filesize is a whooping 17.8 MB

app.js 173 KB  
chunk-vendors.js 2.1 MB  
Game.js 17.8 MB

Removing the phaser import,  
Game.js is 39.9 KB

Is this normal?

---

<div class="post-metadata">

**Author:** ![plicatibu](https://yyz2.discourse-cdn.com/free1/user_avatar/phaser.discourse.group/plicatibu/32/2397_2.png) [@plicatibu](https://phaser.discourse.group/u/plicatibu)\
**Post date:** [February 24, 2020, 4:24pm UTC](https://phaser.discourse.group/t/huge-js-file-in-development/5316/2 "2020-02-24T16:24:44Z")

</div>

Something is fishy.

Phaser.js is a bit less than 6MB and phaser.min.js is a bit less than 1MB.

Are you sure you’re not adding all source code from phaser repository?

---

<div class="post-metadata">

**Author:** ![oivinds](https://yyz2.discourse-cdn.com/free1/user_avatar/phaser.discourse.group/oivinds/32/1973_2.png) [@oivinds](https://phaser.discourse.group/u/oivinds)\
**Post date:** [February 24, 2020, 7:35pm UTC](https://phaser.discourse.group/t/huge-js-file-in-development/5316/3 "2020-02-24T19:35:50Z")

</div>

I don’t think so. Here’s my package.json.

```
{
  "name": "fresh",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build"
  },
  "dependencies": {
    "core-js": "^3.6.4",
    "phaser": "3.22.0",
    "pug": "^2.0.4",
    "pug-plain-loader": "^1.0.0",
    "register-service-worker": "^1.6.2",
    "vue": "^2.6.11",
    "vue-class-component": "^7.2.2",
    "vue-property-decorator": "^8.3.0",
    "vue-router": "^3.1.5"
  },
  "devDependencies": {
    "@vue/cli-plugin-babel": "~4.2.0",
    "@vue/cli-plugin-pwa": "~4.2.0",
    "@vue/cli-plugin-router": "~4.2.0",
    "@vue/cli-plugin-typescript": "~4.2.0",
    "@vue/cli-service": "~4.2.0",
    "sass": "^1.25.0",
    "sass-loader": "7.3.1",
    "typescript": "~3.7.5",
    "vue-template-compiler": "^2.6.11",
    "webpack": "^4.36.0"
  }
}

```

I should perhaps have mentioned that I use Vue.js. The vue template below produce the 17.8MB file.

```
 <template lang="pug">
.demo
    canvas(ref="dem")
</template>

<script>

    import {Game} from 'phaser';
    /*
    import BootScene from '../demo/BootScene'
    import MainScene from '../demo/MainScene' 
    */

    export default {
    	data() {
    		return {
    			game: Game,
    		};
    	},
    	 
        /* 
        mounted() {
    		const config = {
    			type: Phaser.WEBGL,
    			width: 800,
    			height: 600,
    			canvas: this.$refs.dem,
    			 audio: {
                    noAudio: true
                },
    			scene: [MainScene],
    			scale: {
    				mode: Phaser.Scale.FIT,
    				autoCenter: Phaser.Scale.CENTER_HORIZONTALLY
    			},
    		};
    		this.game = new Phaser.Game(config);
    	},

    	beforeDestroy() {
    		this.game.destroy(true);
        } 
        */
    }

    </script>

<style lang="scss" scoped>
	.demo{
		background: black
	}
</style>

```

 ![Skjermbilde 2020-02-24 kl. 20.37.22](https://global.discourse-cdn.com/free1/uploads/phaser1/original/2X/f/f33319bb2fa5fcdaee04a066b29ca6bad72c7065.png)

---

<div class="post-metadata">

**Author:** ![plicatibu](https://yyz2.discourse-cdn.com/free1/user_avatar/phaser.discourse.group/plicatibu/32/2397_2.png) [@plicatibu](https://phaser.discourse.group/u/plicatibu)\
**Post date:** [February 25, 2020, 3:24am UTC](https://phaser.discourse.group/t/huge-js-file-in-development/5316/4 "2020-02-25T03:24:31Z")

</div>

I thought something was fishy due this statement:

> [@oivinds](#):
>
> After I import Phaser in development the filesize is a whooping 17.8 MB

But it explains why game.js was so big:

> [@oivinds](#):
>
> I should perhaps have mentioned that I use Vue.js. The vue template below produce the 17.8MB file.

Unfortunately I never worked with vue.js.  
Sorry.

---

<div class="post-metadata">

**Author:** ![oivinds](https://yyz2.discourse-cdn.com/free1/user_avatar/phaser.discourse.group/oivinds/32/1973_2.png) [@oivinds](https://phaser.discourse.group/u/oivinds)\
**Post date:** [February 25, 2020, 7:47pm UTC](https://phaser.discourse.group/t/huge-js-file-in-development/5316/5 "2020-02-25T19:47:16Z")

</div>

Thanks for replying!  
It’s actually not a problem or showstopper.  
The build size is ok.

```
 File Size Gzipped

  dist/js/Game.056e8983.js 1259.09 KiB 308.93 KiB
  dist/js/chunk-vendors.25e0cc45.js 130.46 KiB 45.84 KiB
  dist/js/app.a1b0e24e.js 8.03 KiB 2.90 KiB
  dist/precache-manifest.19c5b87afe20d85 1.43 KiB 0.56 KiB
  4ebcd26bc2428bd0f.js
  dist/service-worker.js 1.04 KiB 0.61 KiB
  dist/css/app.d1c65797.css 0.48 KiB 0.29 KiB
  dist/css/Game.990f7e44.css 0.04 KiB 0.06 KiB
```

---

<div class="post-metadata">

**Author:** ![samme](https://yyz2.discourse-cdn.com/free1/user_avatar/phaser.discourse.group/samme/32/5275_2.png) [@samme](https://phaser.discourse.group/u/samme)\
**Post date:** [February 25, 2020, 8:04pm UTC](https://phaser.discourse.group/t/huge-js-file-in-development/5316/6 "2020-02-25T20:04:07Z")

</div>

Is there a build report in dev mode?

---

<div class="post-metadata">

**Author:** ![oivinds](https://yyz2.discourse-cdn.com/free1/user_avatar/phaser.discourse.group/oivinds/32/1973_2.png) [@oivinds](https://phaser.discourse.group/u/oivinds)\
**Post date:** [February 29, 2020, 12:19am UTC](https://phaser.discourse.group/t/huge-js-file-in-development/5316/9 "2020-02-29T00:19:01Z")

</div>

I made a simple test without Vue and Vue-cli :

> **[oivinds/huge-dev](https://github.com/oivinds/huge-dev)**
>
> Contribute to oivinds/huge-dev development by creating an account on GitHub.

---

<div class="post-metadata">

**Author:** ![samme](https://yyz2.discourse-cdn.com/free1/user_avatar/phaser.discourse.group/samme/32/5275_2.png) [@samme](https://phaser.discourse.group/u/samme)\
**Post date:** [February 29, 2020, 1:16am UTC](https://phaser.discourse.group/t/huge-js-file-in-development/5316/10 "2020-02-29T01:16:08Z")

</div>

A lot is from `'inline-source-map'`.

---

<div class="post-metadata">

**Author:** ![oivinds](https://yyz2.discourse-cdn.com/free1/user_avatar/phaser.discourse.group/oivinds/32/1973_2.png) [@oivinds](https://phaser.discourse.group/u/oivinds)\
**Post date:** [February 29, 2020, 12:05pm UTC](https://phaser.discourse.group/t/huge-js-file-in-development/5316/11 "2020-02-29T12:05:37Z")

</div>

Indeed, I commented out `devtool: 'inline-source-map',` and the build bundle was reduced by approx. 10Mib.

Maybe more of a general coding question but I dont understand why I cant shave off some more off Phasers code by changing:

```
import 'phaser';

const config: Phaser.Types.Core.GameConfig = {
  type: Phaser.AUTO,
  width: 800,
  height: 600,
  backgroundColor: 0xff0000,
  parent: 'app',
  scale: {
    mode: Phaser.Scale.FIT,
    autoCenter: Phaser.Scale.CENTER_HORIZONTALLY,
  },
};
new Phaser.Game(config);

```

to this:

```
import { Types, Game, Scale, AUTO } from 'phaser';

const config: Types.Core.GameConfig = {
  type: AUTO,
  width: 800,
  height: 600,
  backgroundColor: 0xff0000,
  parent: 'app',
  scale: {
    mode: Scale.FIT,
    autoCenter: Scale.CENTER_HORIZONTALLY,
  },
};
new Game(config);
```

---

<div class="post-metadata">

**Author:** ![samme](https://yyz2.discourse-cdn.com/free1/user_avatar/phaser.discourse.group/samme/32/5275_2.png) [@samme](https://phaser.discourse.group/u/samme)\
**Post date:** [February 29, 2020, 4:18pm UTC](https://phaser.discourse.group/t/huge-js-file-in-development/5316/12 "2020-02-29T16:18:56Z")

</div>

The `'phaser'` package exports the whole `Phaser` namespace so it would get included regardless.

You would have to import separately, e.g.,

```
import { AUTO } from 'phaser/src/const';

```

or [make a custom build](https://github.com/photonstorm/phaser3-project-template-custom-build "phaser3-project-template-custom-build").