В этом посте речь пойдет о том, как использовать внешние файлы webpack.config.js для создания игры Phaser 3. Есть несколько способов оптимизировать размер файла сборки.

Сначала убедитесь, что в webpack.config.js добавлен mode: “production". Этот режим автоматически минимизирует ваш код.

Затем добавьте конфигурацию externals: // Я просто пробую и ошибаюсь 😂

module.exports = {
  mode: "production"  
  externals: {
    phaser: {
      root: "phaser",
      commonjs2: "phaser",
    },
  },
}

Это документы для деталей внешнего вида: https://webpack.js.org/configuration/externals/

Добавьте модуль phaser min.js в index.html, убедитесь, что вы добавили этот скрипт перед скриптом игры:

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/phaser.min.js"></script>
// my Phaser game
<script src="dist/app.js"></script>

Осторожность

Убедитесь, что вы сделали это, если хотите импортировать фазер :

import "phaser"
// don't do this
// import { GameObjects } from "phaser"

Если вы используете import {GameObjects} from “phaser", это будет ошибка:

За и против

Плюсы:
- Вы можете использовать все функции фазера.
- Размер вашего пакета определяется только вашим кодом.
- Phaser добавит к глобальной константе.

Минусы:
- На одной странице можно использовать только одну версию Phaser 3.

По желанию

Вы можете использовать defer в своем index.html, он будет загружен в конце загрузки. Вы можете использовать некоторую анимацию, когда ваше тело загружено.

<script defer src="https://cdn.jsdelivr.net/npm/[email protected]/dist/phaser.min.js"></script>
<script defer src="dist/app.js"></script>

Бонус

Вот шаблон для запуска вашего проекта с использованием этой оптимизации:
https://github.com/ArifZx/phaser3-typescript-webpack-externals-template

Спасибо за чтение, и если есть что-то, что вы хотели бы видеть в будущих публикациях, дайте мне знать!