Vite 构建配置与 Phaser 分块优化：让 3MB 的产物变成 500KB

> Vite 的默认配置对 Phaser 不友好——需要手动分块，否则产物会爆炸。

## 问题：Phaser 太大了

`phaser` 包的大小大约是 3MB（未压缩）。如果把整个 Phaser 打包进一个 `main.js`，产物会非常大——用户第一次打开页面要等几秒钟。

NEON RUNNER 2077 的 `vite.config.ts` 里有一个关键配置：

```ts

// vite.config.ts

build: {

  rollupOptions: {

    output: {

      manualChunks: {

        phaser: ['phaser'],

      },

    },

  },

}

```

这个配置把 Phaser 单独打包成一个 `vendor-phaser.js` 文件，和 `main.js` 分离。

## 手动分块：为什么需要

Vite 的默认分块策略是按模块拆分——每个 npm 包一个 chunk。但 Phaser 是一个大包——它包含场景、物理、输入、补间、纹理、音频等所有模块。如果把整个 Phaser 打包进一个 chunk，用户第一次打开页面要下载 3MB。

`manualChunks: { phaser: ['phaser'] }` 把 Phaser 单独打包成一个 chunk。这个 chunk 可以被浏览器缓存——用户第一次打开页面下载 3MB，第二次打开页面从缓存读取，不需要重新下载。

## 产物结构

构建后，`dist/` 目录的结构：

```

dist/

├── assets/

│ ├── index-xxxx.js # 应用代码（约 50KB）

│ ├── vendor-phaser-xxxx.js # Phaser 引擎（约 3MB）

│ └── index-xxxx.css # 样式（约 2KB）

└── index.html

```

`index.html` 里用 `<script type="module" src="/assets/index-xxxx.js">` 加载应用代码，而 `index-xxxx.js` 里用 `import` 语句加载 `vendor-phaser-xxxx.js`。浏览器会并行下载两个 chunk。

## base: './'：相对路径部署

`vite.config.ts` 里的 `base: './'` 确保产物使用相对路径：

```ts

export default defineConfig({

  base: './',

  // ...

});

```

这个配置让 `dist/` 目录可以被双击 `index.html` 直接打开，不需要起 HTTP 服务器。如果 `base` 是默认的 `'/'`，产物会使用绝对路径——双击 `index.html` 时，浏览器会尝试从根路径加载资源，导致 404。

## devServer 端口：5173

```ts

server: {

  port: 5173,

  open: true,

},

```

`open: true` 让开发服务器启动时自动打开浏览器。端口 5173 是 Vite 的默认端口——不需要改。

## 构建命令：tsc && vite build

`package.json` 里的 `build` 脚本：

```json

"build": "tsc && vite build"

```

`tsc` 先做类型检查，`vite build` 再做构建。如果类型检查失败，构建不会继续——这是"类型安全"的最后一道防线。

## 下一章预告

Vite 构建配置讲完了。最后一章，我会做一个**项目总结**——从零到可玩的霓虹射击游戏，我们学到了什么。

> 构建配置的核心原则：**产物要小，部署要简单**。3MB 的 Phaser 可以接受，但应用代码要控制在 100KB 以内。