Reducing Bundle Size

PixiJS is about 100kb~ minified + gzipped when using the pixi.js package. If you’re only using a few features, this may be a lot more than you need.

If you’re using a modern bundler (and since you’re using Svelte, you likely are), you can create a custom pixi.js file that only exports the features you’re using and setup an alias so that Svelte Pixi uses it.

Creating a Custom pixi.js

PixiJS offers an easy way to create your own pixi file. Let’s visit that page and select the “Bundler” option at the top-right.

Select the features that you want and copy the contents of the file it generates. Create a pixi.js file somewhere and paste that in. Don’t forget to npm install those packages (on the right you will see a command you can copy to quickly do that).

Here’s one I’ll be using:

export * from '@pixi/constants'
export * from '@pixi/math'
export * from '@pixi/runner'
export * from '@pixi/settings'
export * from '@pixi/ticker'
import * as utils from '@pixi/utils'
export { utils }
export * from '@pixi/display'
export * from '@pixi/core'
export * from '@pixi/events'
export * from '@pixi/extract'
export * from '@pixi/loaders'
export * from '@pixi/compressed-textures'
export * from '@pixi/basis'
export * from '@pixi/mesh'
export * from '@pixi/particle-container'
export * from '@pixi/sprite'
export * from '@pixi/accessibility'
export * from '@pixi/app'
export * from '@pixi/graphics'
export * from '@pixi/sprite-animated'
export * from '@pixi/sprite-tiling'
export * from '@pixi/spritesheet'
export * from '@pixi/text-bitmap'
export * from '@pixi/text'
export * from '@pixi/interaction'
export * from '@pixi/prepare'

// Renderer plugins
import { Renderer } from '@pixi/core'
import { AccessibilityManager } from '@pixi/accessibility'
Renderer.registerPlugin('accessibility', AccessibilityManager)
import { BatchRenderer } from '@pixi/core'
Renderer.registerPlugin('batch', BatchRenderer)
import { Extract } from '@pixi/extract'
Renderer.registerPlugin('extract', Extract)
import { InteractionManager } from '@pixi/interaction'
Renderer.registerPlugin('interaction', InteractionManager)
import { ParticleRenderer } from '@pixi/particle-container'
Renderer.registerPlugin('particle', ParticleRenderer)
import { Prepare } from '@pixi/prepare'
Renderer.registerPlugin('prepare', Prepare)
import { TilingSpriteRenderer } from '@pixi/sprite-tiling'
Renderer.registerPlugin('tilingSprite', TilingSpriteRenderer)

// Application plugins
import { Application } from '@pixi/app'
import { AppLoaderPlugin } from '@pixi/loaders'
Application.registerPlugin(AppLoaderPlugin)
import { TickerPlugin } from '@pixi/ticker'
Application.registerPlugin(TickerPlugin)

// Loader plugins
import { Loader } from '@pixi/loaders'
import { BasisLoader } from '@pixi/basis'
Loader.registerPlugin(BasisLoader)
import {
  CompressedTextureLoader,
  DDSLoader,
  KTXLoader,
} from '@pixi/compressed-textures'
Loader.registerPlugin(CompressedTextureLoader)
Loader.registerPlugin(DDSLoader)
Loader.registerPlugin(KTXLoader)
import { SpritesheetLoader } from '@pixi/spritesheet'
Loader.registerPlugin(SpritesheetLoader)
import { BitmapFontLoader } from '@pixi/text-bitmap'
Loader.registerPlugin(BitmapFontLoader)

This has most of the packages from “Core” (minus @pixi/polyfill and the -extras packages), but nothing from “Filters” or “Canvas”.

Make sure to install the needed @pixi dependencies:

npm install @pixi/constants @pixi/core @pixi/math @pixi/runner @pixi/settings @pixi/ticker @pixi/utils @pixi/accessibility @pixi/app @pixi/basis @pixi/compressed-textures @pixi/display @pixi/events @pixi/extract @pixi/graphics @pixi/graphics-extras @pixi/interaction @pixi/loaders @pixi/mesh @pixi/mixin-cache-as-bitmap @pixi/mixin-get-child-by-name @pixi/mixin-get-global-position @pixi/particle-container @pixi/prepare @pixi/sprite @pixi/sprite-animated @pixi/sprite-tiling @pixi/spritesheet @pixi/text @pixi/text-bitmap @pixi/unsafe-eval

Aliasing

In order for Svelte Pixi to make use of this custom file we’ll need to create an alias. Most bundlers will either have a plugin or a config option to do this.

Here are some examples:

Vite

// vite.config.js
import { defineConfig } from 'vite'

export default defineConfig({
  /* ... */
  optimizeDeps: {
    // required so svelte-pixi will use pixi.js alias
    exclude: ['svelte-pixi'],
  },
  resolve: {
    alias: {
      // update path to wherever your pixi.js is
      'pixi.js': '/src/pixi.js',
    },
  },
})

Parcel

// package.json
{
  "alias": {
    "pixi.js": "./path/to/pixi.js"
  }
}