В этом посте речь пойдет о том, как использовать внешние файлы 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
Спасибо за чтение, и если есть что-то, что вы хотели бы видеть в будущих публикациях, дайте мне знать!