【Unity WebGL】从打包到IIS部署：避坑指南与性能调优实战
1. Unity WebGL打包前的关键设置
第一次把Unity项目打包成WebGL格式时，我踩了不少坑。记得当时花了两天时间才让项目在浏览器里正常跑起来，现在把这些经验整理成最佳实践分享给大家。
在Unity编辑器中切换到WebGL平台是第一步，但很多人会忽略平台切换后的基础检查。我建议在切换后立即运行一次项目，确保所有功能在编辑器模式下正常工作。曾经遇到过有位开发者切换平台后直接打包，结果发现项目在浏览器中完全无法运行，原因竟是平台切换后某些脚本需要重新编译。
分辨率设置是WebGL项目的第一个性能瓶颈。在Player Settings的Resolution and Presentation部分，建议将Default Canvas Width/Height设置为1280x720这样的常见尺寸。这里有个小技巧：勾选"Run In Background"，这样即使用户切换浏览器标签页，游戏逻辑也不会暂停。对于需要全屏的项目，记得勾选"Fullscreen Mode"为Fullscreen Window。
关于Strip Engine Code选项，官方文档说它能减小包体大小，但实际项目中我强烈建议取消勾选。去年有个项目因为勾选了这个选项，导致项目中的某些反射功能失效。Unity的代码剥离算法有时会误判代码使用情况，特别是使用了动态加载或反射的复杂项目。
压缩格式的选择直接影响加载速度和服务器配置。如果选择禁用压缩，打包出来的.data文件会很大，但服务器配置最简单。Brotli压缩的压缩率最高（通常比Gzip小20%左右），但打包时间会明显延长。对于中小型项目，Gzip是个不错的折中选择。这里有个实测数据：一个100MB的项目，禁用压缩后是102MB，Gzip压缩后是42MB，Brotli压缩后是35MB，但Brotli的打包时间比Gzip多出约40%。
2. 项目打包的实战技巧
打包路径的选择看似简单，却可能引发一系列问题。我坚持使用英文路径，最好直接在Assets同级目录创建Build文件夹。曾经有位开发者把项目放在"我的项目"这样的中文路径下，结果打包过程直接报错。Unity对中文路径的支持一直不太稳定，特别是WebGL平台。
内存设置是WebGL项目最大的坑之一。在Unity 2020之后的版本中，内存设置被移到了不太显眼的位置。我通常会在Assets下创建Editor文件夹，然后添加如下脚本：
using UnityEditor; public class WebGLMemorySetter { [MenuItem("WebGL/Set Memory Size to 2GB")] static void Set2GBMemory() { PlayerSettings.WebGL.memorySize = 2048; Debug.Log("WebGL memory size set to 2GB"); } }这个脚本会在Unity菜单栏添加一个快捷选项。对于3D项目，建议至少设置2GB内存。有个项目因为只设置了默认的256MB，结果加载到一半就报"Range Out Of Bounds"错误。
字体问题是中文开发者特有的痛点。Unity默认使用Arial字体，直接打包会导致中文不显示。解决方案是：
- 从C:\Windows\Fonts复制一个中文字体（如msyh.ttf）
- 在Unity中创建Font Asset
- 将所有UI文本的字体替换为新字体
有个项目因为使用了特殊字体，我不得不额外做字体子集化处理，将字体文件从15MB减小到300KB左右。
3. IIS服务器的配置详解
IIS的配置是WebGL项目上线的最后一道关卡。首先确保安装了IIS的静态内容模块和URL重写模块。添加网站时，物理路径要指向包含index.html的文件夹，而不是上级目录。我见过有人把路径指向Build文件夹，结果访问时出现403禁止访问错误。
MIME类型的配置直接影响文件能否正确加载。对于未压缩的WebGL项目，关键的MIME类型有：
| 文件扩展名 | MIME类型 |
|---|---|
| .data | application/octet-stream |
| .js | application/javascript |
| .wasm | application/wasm |
如果是Gzip压缩的项目，还需要添加：
| 文件扩展名 | MIME类型 |
|---|---|
| .gz | application/gzip |
| .unityweb | application/octet-stream |
这些配置可以直接在IIS管理界面添加，也可以通过web.config文件设置。我更喜欢后者，因为可以版本控制：
<configuration> <system.webServer> <staticContent> <mimeMap fileExtension=".data" mimeType="application/octet-stream" /> <mimeMap fileExtension=".wasm" mimeType="application/wasm" /> <mimeMap fileExtension=".gz" mimeType="application/gzip" /> </staticContent> </system.webServer> </configuration>跨域问题在测试阶段特别常见。除了在IIS中添加CORS头，还可以在开发阶段使用Live Server等工具快速测试。生产环境的CORS设置应该更严格，不要简单使用"*"：
<httpProtocol> <customHeaders> <add name="Access-Control-Allow-Origin" value="https://yourdomain.com" /> <add name="Access-Control-Allow-Methods" value="GET,POST" /> </customHeaders> </httpProtocol>4. 常见问题排查与性能优化
浏览器控制台是排查问题的第一站。F12打开开发者工具后，我通常会先看Console和Network两个面板。404错误通常意味着文件缺失或路径错误，而502错误可能是服务器配置问题。
内存问题在WebGL中特别棘手。除了前面提到的设置内存大小，还可以：
- 使用Addressables系统实现资源动态加载
- 将大纹理压缩为ASTC或ETC2格式
- 使用AssetBundle分包加载
有个3D项目通过以下优化将内存使用降低了60%：
- 将2048x2048的纹理降级为1024x1024
- 使用Mesh Compression减少模型内存占用
- 启用Occlusion Culling减少渲染负担
加载速度是WebGL项目的关键指标。通过以下方式可以将首屏加载时间缩短50%以上：
- 使用Unity的RuntimeInitializeOnLoadMethod特性延迟非关键系统初始化
- 实现自定义的进度条和预加载系统
- 使用WebGL的缓存API持久化存储资源
字体渲染问题还有个隐藏解决方案：将Text组件的Best Fit选项关闭，手动设置合适的字体大小。这样不仅能避免字体模糊，还能减少内存使用。
浏览器兼容性问题可以通过特性检测来处理。在index.html中添加以下脚本可以优雅降级：
function checkWebGLSupport() { try { var canvas = document.createElement("canvas"); return !!window.WebGLRenderingContext && (canvas.getContext("webgl") || canvas.getContext("experimental-webgl")); } catch(e) { return false; } } if(!checkWebGLSupport()) { document.getElementById("gameContainer").innerHTML = "<p>您的浏览器不支持WebGL，请使用最新版Chrome或Firefox</p>"; }最后提醒一点：WebGL构建在发布前一定要在不同设备上测试。我在项目中遇到过这些问题：
- 某些Android手机上的纹理显示异常
- iOS Safari的性能问题
- 老旧显卡上的着色器编译错误
通过条件编译和运行时检测，可以针对不同设备提供最优体验。例如：
#if UNITY_WEBGL && !UNITY_EDITOR if (SystemInfo.graphicsDeviceType == GraphicsDeviceType.OpenGLES2) { // 降级特效质量 } #endif