Huge .js file in development

Phaser 3
1

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?

1 Like
2

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?

3

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
Skjermbilde 2020-02-24 kl. 20.37.222538×698 75.7 KB

4

I thought something was fishy due this statement:

But it explains why game.js was so big:

Unfortunately I never worked with vue.js.
Sorry.

5

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
6

Is there a build report in dev mode?

9

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

10

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

11

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);
12

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.

1 Like