Reduce the bundle size of a game using Vite and Typescript

Phaser 3
1

Hello guys, so i have build some games with phaser now and i want to start optimizing then, when i bundle the game the bundle size is massive, i have already try the custom build approach but i did not have any success, my game is on the v3.70.0 with typescript and vite, is there anything i’m missing, any other solutions to only pick what my game really need?

Obs. I have no problems switching vite with another tool if i can get a smaller bundle size, but for development the typescript is a must have

2

Have Vite remove comments in the production build.

You could try using named imports from the Phaser ESM script.

3

Using named imports make so the unused modules of phaser arent in the final bundle?

Example, if a have a game with only sprits shoud I import them like?:

import { GameObjects } from 'phaser'
4

Well I’m not sure about that part. But I am about the comments.

You could always make a custom build in Webpack and then use it in Vite if you need to.

How big is the output file? Does it appear to be minified?

5

I have now updated my vite.config.ts to handle minification and remove coments, the difference was almost 200kb non gzipped

I also tryied the custom build with webpack, I used a medium article as a base, but I was not able to add the build to my project with typescript

6

If anyone has the same problem, the solution is to import the custom build into the index.html and download the type definitions of phaser from the oficial repo, then everything should work fine, at least it worked for me

Got this solution from the official discord server