Unity打包WebGL，html加载速度优化

最新推荐文章于 2025-10-21 10:35:41 发布
转载 最新推荐文章于 2025-10-21 10:35:41 发布 · 1w 阅读 · 30 ·
CC 4.0 BY-SA版权
原文链接：https://docs.unity3d.com/Manual/webgl-deploying.html?_ga=2.119051274.227914711.1576031027-806276155.1551919893

本文介绍如何通过选择Gzip压缩格式和修改IIS web.config参数来优化Unity打包的WebGL项目加载速度，实测从17秒缩短至11秒。

Unity打包webgl后，在日志栏，看到这句提示

随后查到，打包webgl时，压缩格式选择Gzip，并修改iis webConfig参数，可以提升webgl加载速度

打包后的文件夹如下。如果没有web.config，可以手动创建

web.config中，添加下面图片中的内容。（安装iis url rewrite模块后，config中需要添加<rewrite>....</rewrite>部分，如果不安装，只需要保留<staticContent>....</staticContent>部分）

修改之前，打开网页，进度条需要17s---->修改后打开，需要11s。能稍微提升点加载速度

参考链接：

https://docs.unity3d.com/Manual/webgl-deploying.html?_ga=2.119051274.227914711.1576031027-806276155.1551919893

iisRewrite资源链接：

https://www.iis.net/downloads/microsoft/url-rewrite#additionalDownloads

 

Unity 优化 之 WebGL 草稿
蛰伏--当你不够强大时，就不要放弃努力
03-05 727
Unity 优化 之 WebGL 草稿
基于Unity开发WebGL项目加载AB包(二)
weixin_43818160的博客
10-31 3185
WebGL如何从局域网（本地服务器）加载AB包，以及解决WebGL的跨域访问问题。
UnityWebGL-LoadingTest:测试不同Unity版本的WebGL构建的加载速度和构建大小
04-27
Unity WebGL加载测试 针对不同版本和平台测试Unity的WebGL功能 现场演示 版本 尺寸 关联 2019.3.0f6 3.28兆字节 2019.4.25f1 2.96兆字节 2020.1.0f1 2.86兆字节 2020.2.0f1 2.82兆字节 2020.2.0f1 URP 5.27兆字节 2020.3.0f1 2.83兆字节 2020.3.0f1 URP 5.27兆字节 2021.1.0f1 2.85兆字节 2021.1.0f1 URP 5.47兆字节 平台类 平台 Chrome合金 火狐浏览器 边缘 苹果浏览器 IE浏览器 Windows 10 :check_mark: :check_mark: :check_mark: :minus: :cross_mark: Linux :check_mark: :check_mark: :check_mark: :minus: :minus: 苹果电脑 :check_mark: :check_mark: :check_mark: :
Unity打包WebGL注意事项
最新发布
unicrom的博客
10-21 714
Unity WebGL性能优化指南 针对Unity项目打包WebGL后加载慢、运行卡顿等问题，提出关键优化方案： 体积压缩：使用Brotli/Gzip压缩，采用Addressables资源分包加载； 性能调优：限制帧率至30/60FPS，简化物理计算与光照，优先使用烘焙； JS交互：通过JSLib桥接JavaScript，实现全屏等浏览器功能； 文件安全限制：替换System.IO为浏览器API，利用上传/对话框交互文件。 遵循以上策略，可显著提升WebGL版本的运行效率与兼容性。
Unity webgl 嵌入Vue实现过程
why820mmm的博客
11-28 2319
需求分析：Unity webgl嵌入到前端网页中，前端通过调用Unity webgl内方法实现需要展示的功能，前端点击Unity webgl内的交互点，Unity webgl返回给前端一些需要的数据。例如：当我们需要在三维场景中展示库区中一些监控设备的部署位置，通过点击三维场景中的监控按钮打开当前监控设备的实时画面，一般情况下打开监控需要传递当前监控的IP或者通道号，这时Unity webgl向前端返回数据就用到了。
提升Unity WebGL游戏启动速度
2301_79022588的博客
06-28 4463
因此原始代码包(webgl/Build目录下的code文件)不超过30MB, 建议开发者勾选"Strip Engine Code"并设置"Managed Stripping Level"为High。同时，可以使用代码分包工具将代码包减少到原始尺寸的到1/3。初始场景中需要后续主场景或配置加载时可采取分帧策略，避免在Start或Awake方法中执行长时间的操作或阻塞调用，因为这会延长首帧的执行时间，影响用户体验。这个选项的作用是去除Unity引擎中未使用的代码，从而减少最终构建的代码包大小。
UnityWebGL启动加载优化
boyZhenGui的博客
05-11 1万+
启动加载的优化分两个问题： 1.web中unity图标读条界面 解决方法： 先进入空场景，再通过空场景跳转进主场景。 问题：unity读条界面会很快消失，但跳转场景时会卡顿，总体时间不变，甚至会加长。 2.整体场景的加载时间 1.贴图大小优化 如果贴图格式时2048，在不影响画面效果的情况下，改成1024或者512，还可以缩小包体。 2.压缩和解压缩问题 官方文档： https://docs.unity3d.com/Manual/webgl-deploying.html?_ga=2.249632261.2
Unity打包WebGL ，实现网页的 JavaScript调用WebGL的开放接口
10-16
为了更深入了解Unity打包WebGL以及实现网页JavaScript调用WebGL的开放接口的详细信息，可以参考相关文章，这篇文章提供了详细的操作步骤和代码示例，帮助开发者快速掌握这一技术的实现过程。 最后，当开发者完成...
精选资源
Unity打包WebGL平台，能够实现自适应的Template
07-13
本主题将深入探讨如何使用Unity打包WebGL平台，并实现自适应的Template，以确保游戏或应用在不同设备上拥有良好的表现。 Unity WebGL允许开发者创建的交互式3D和2D内容在网页上运行，无需任何插件。WebGL模板是...
精选资源
UnityWebGL 打包模板支持手机
12-09
4. **Unity WebGL加载测试**： - 文件名称“UnityWebGL-LoadingTest-master”暗示这是一个关于加载测试的项目，可能是为了测试和优化Unity WebGL项目的加载性能。 - 这样的测试可能包括模拟不同网络环境，检查游戏...
精选资源
解决Unity发布WebGL无法正常浏览问题
07-27
解决Unity发布WebGL无法正常浏览问题，下载Config文件，放到发布的目录中
Unity使用 Addressables 预加载所有资源，提现加载资源，发布webgl加载缓慢问题
热门推荐
github_38633141的博客
03-30 2万+
Addressables 我也是刚接触，知道的不是很多，基本的用法还是知道一些的 1.在Window–>Package Manager里找到Addressables进行安装 2.选择资源，点击Assets中的一个资源，在Inspector面板上就会出现一个勾选Assressable，也就是是否加入资源打包的分组，和AssetBundle分组是一个性质。选上以后就出现在Addressable面板的分组里， 有默认分组，也可以自己新建分组，在分组中的资源就可以使用addressable加载.
Webgl加载时间过长
xj1009420846的博客
07-22 1万+
1）升级版本到unity2018以上 使用gzipg格式 2）在console里面看到： You can reduce your startup time if you configure your web server to host .unityweb files using gzip compression. 解决方法：创建文件名为.htaccess的文件，添加内容：为Add...
unity2020打包webGL时卡进程问题
alayeshi的专栏
05-31 987
即使是打包一个新建项目的空场景也是同样的问题，我尝试过一直卡在这里会如何，结果还真打包成功了。只是打包一个空场景需要20多分钟，20多分钟的时间电脑风扇一直在响，CPU都快冒烟了。然后我换成了新的版本2022.3.21f1c1版的unity，这个问题就不出现了，空场景第一次打包只需要3分钟，之后打包同个场景会很快。我使用的2020.3.0f1c1，打包发布WEB版的时候会一直卡到asm2wasm.exe这个进程里，而且CPU占用率90%以上。尝试过各种方法解决这个问题，均已失败告终。
unity webgl使用dataCaching让二次加载秒开
qq_42987967的博客
03-18 7166
使用dataCaching可以使得unity打包为webgl文件中的data.unityweb文件缓存在浏览器当中，实现二次打开浏览器的秒开。当然，前提是最好根据你的webgl的文件大小先提前设置好浏览器允许的缓存大小。可参考：浏览器磁盘缓存大小的设置_程序员修炼之路的博客-优快云博客_浏览器缓存大小设置 关于设置dataCaching步骤如下： 在这打上勾即可。 关于dataCaching可参考：PlayerSettings.WebGL-dataCaching - Unity 脚本 .
Unity WebGL 加载测试：优化你的WebGL应用
gitblog_00648的博客
09-15 1306
Unity WebGL 加载测试：优化你的WebGL应用 项目介绍 Unity WebGL Loading Test 是一个专注于测试和优化 Unity WebGL 构建大小和加载时间的开源项目。该项目由 Johannes Deml 开发，旨在帮助开发者更好地理解和优化他们的 WebGL 应用，尤其是在移动设备上的表现。通过对比不同 Unity 版本和设置下的构建大小和加载时间，开发者可以更有效地...
[转]unity webgl优化
小小姑娘
12-03 3818
laya是国产的一款引擎主要就是因为unity webgl不作为所以才有了laya他使用asts或者js开发在浏览器上不用转换脚本了场景可以用unity的并且也用上了实体组件系统可以控制加载需要的组件这是一款不错的工具主要用来开发各种小游戏.搞了三天开发了一个场景进行与其他对比测试.12.Publishing Settings ->Compression Format 是否压缩跟自己需要选择压缩肯定需要解压如果网络不好选择压缩.压缩尽量选择Gzip兼容好本地加载可以选择不压缩。
基于Unity开发WebGL项目加载AB包(一)
weixin_43818160的博客
10-31 4216
Unity发布WebGL,并加载AB包资源。
Unity打包WebGL的优化常用操作？
一条小咸鱼
02-20 4253
Unity打包WebGL的优化操作？
unity打包webgl首次加载特别慢怎么办
06-13
### Unity WebGL 首次加载优化方法 在开发 Unity WebGL 项目时，首次加载速度是一个常见的痛点。以下是一些有效的优化方法： #### 1. 减少代码包大小 通过限制原始代码包的大小（位于 `webgl/Build` 目录下的 `code` 文件），可以显著提升加载速度[^4]。具体措施包括： - **启用 "Strip Engine Code"**：这会移除未使用的引擎功能，从而减少打包后的文件体积。 - **设置 "Managed Stripping Level" 为 High**：此选项会进一步剔除不必要的代码，但需注意可能会影响某些脚本的功能。 - **使用代码分包工具**：将代码分割成多个小包，按需加载，可以减少初始加载时间。这种方法可以使代码包缩小到原始尺寸的三分之一[^4]。 #### 2. 使用自定义加载页面模板 专业的加载页面不仅能改善用户体验，还能掩盖部分加载延迟。推荐使用专门设计的加载页面模板，例如 `better-unity-webgl-template` 或其他类似的资源[^2]。这些模板通常提供以下功能： - 显示加载进度条。 - 提供动画或视觉效果以分散用户注意力。 - 支持多语言和可配置参数。 #### 3. 实现 Texture Streaming 方案 Texture Streaming 是一种动态加载纹理的技术，可以有效降低初始加载时间[^3]。其基本原理是： - 将高清纹理离线处理为低分辨率版本（称为 Lod Scene）。 - 在运行时加载 Lod Scene，并根据特定规则从外部加载对应的高清纹理进行替换。 这种方案特别适合需要大量纹理资源的项目，能够显著减少初始加载所需的资源量。 #### 4. 压缩资源和启用 Gzip 对资源文件启用压缩可以进一步减少传输时间。Unity 提供了多种压缩选项，例如 LZMA 和 Gzip。推荐的做法包括： - **启用 Gzip 压缩**：确保服务器支持 Gzip，并在发布前测试压缩效果。 - **优化纹理和模型**：使用较低分辨率的纹理或简化模型，减少资源大小。 #### 5. 异步加载和资源分批 通过异步加载和资源分批，可以避免一次性加载所有内容，从而缩短初次显示的时间。关键点包括： - **场景分批加载**：将游戏分为多个子场景，按需加载。 - **资源按需加载**：仅在需要时加载必要的资源，而非在启动时加载全部资源。 ```csharp // 示例代码：异步加载场景 using UnityEngine; using UnityEngine.SceneManagement; public class AsyncSceneLoader : MonoBehaviour { public void LoadSceneAsync(string sceneName) { AsyncOperation asyncLoad = SceneManager.LoadSceneAsync(sceneName); asyncLoad.allowSceneActivation = false; // 监控加载进度并激活场景 StartCoroutine(Progress(asyncLoad)); } private System.Collections.IEnumerator Progress(AsyncOperation asyncLoad) { while (!asyncLoad.isDone) { Debug.Log("Loading progress: " + asyncLoad.progress * 100 + "%"); if (asyncLoad.progress >= 0.9f) { asyncLoad.allowSceneActivation = true; } yield return null; } } } ``` #### 6. 测试和监控加载时间 最后，确保对优化后的项目进行全面测试，以验证改进效果。可以使用以下工具和技术： - **Unity Profiler**：分析加载过程中的瓶颈。 - **浏览器开发者工具**：检查网络请求时间和资源加载情况。 --- ###
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值