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

最新推荐文章于 2025-05-25 13:18:40 发布
转载 最新推荐文章于 2025-05-25 13:18:40 发布 · 9.9k 阅读 · 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秒。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

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

 

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...
Unity使用 Addressables 预加载所有资源，提现加载资源，发布webgl加载缓慢问题
github_38633141的博客
03-30 2万+
Addressables 我也是刚接触，知道的不是很多，基本的用法还是知道一些的 1.在Window–>Package Manager里找到Addressables进行安装 2.选择资源，点击Assets中的一个资源，在Inspector面板上就会出现一个勾选Assressable，也就是是否加入资源打包的分组，和AssetBundle分组是一个性质。选上以后就出现在Addressable面板的分组里， 有默认分组，也可以自己新建分组，在分组中的资源就可以使用addressable加载.
提升Unity WebGL游戏启动速度
2301_79022588的博客
06-28 3974
因此原始代码包(webgl/Build目录下的code文件)不超过30MB, 建议开发者勾选"Strip Engine Code"并设置"Managed Stripping Level"为High。同时，可以使用代码分包工具将代码包减少到原始尺寸的到1/3。初始场景中需要后续主场景或配置加载时可采取分帧策略，避免在Start或Awake方法中执行长时间的操作或阻塞调用，因为这会延长首帧的执行时间，影响用户体验。这个选项的作用是去除Unity引擎中未使用的代码，从而减少最终构建的代码包大小。
跨平台WebGL资源处理与文件操作插件套装
最新发布
weixin_28922227的博客
05-25 601
WebGL（Web Graphics Library）是一种JavaScript API，用于在不需要插件的情况下在Web浏览器中渲染2D和3D图形。它的出现标志着网页3D图形的发展迈出了重要一步。WebGL基于OpenGL ES 2.0，利用HTML5的Canvas元素将GPU加速的图形带入浏览器。自2011年推出以来，WebGL经历了多个版本的迭代，不断优化性能并引入新特性。开发者可以利用WebGL在网页中创建高级的视觉效果，如3D动画、实时渲染的模型等。案例分析。
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: :
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
unity2020打包webGL时卡进程问题
alayeshi的专栏
05-31 853
即使是打包一个新建项目的空场景也是同样的问题，我尝试过一直卡在这里会如何，结果还真打包成功了。只是打包一个空场景需要20多分钟，20多分钟的时间电脑风扇一直在响，CPU都快冒烟了。然后我换成了新的版本2022.3.21f1c1版的unity，这个问题就不出现了，空场景第一次打包只需要3分钟，之后打包同个场景会很快。我使用的2020.3.0f1c1，打包发布WEB版的时候会一直卡到asm2wasm.exe这个进程里，而且CPU占用率90%以上。尝试过各种方法解决这个问题，均已失败告终。
unity webgl使用dataCaching让二次加载秒开
qq_42987967的博客
03-18 7012
使用dataCaching可以使得unity打包为webgl文件中的data.unityweb文件缓存在浏览器当中，实现二次打开浏览器的秒开。当然，前提是最好根据你的webgl的文件大小先提前设置好浏览器允许的缓存大小。可参考：浏览器磁盘缓存大小的设置_程序员修炼之路的博客-优快云博客_浏览器缓存大小设置 关于设置dataCaching步骤如下： 在这打上勾即可。 关于dataCaching可参考：PlayerSettings.WebGL-dataCaching - Unity 脚本 .
Unity打包WebGL平台，能够实现自适应的Template
07-13
本主题将深入探讨如何使用Unity打包WebGL平台，并实现自适应的Template，以确保游戏或应用在不同设备上拥有良好的表现。 Unity WebGL允许开发者创建的交互式3D和2D内容在网页上运行，无需任何插件。WebGL模板是...
UnityWebGL 打包模板支持手机
12-09
4. **Unity WebGL加载测试**： - 文件名称“UnityWebGL-LoadingTest-master”暗示这是一个关于加载测试的项目，可能是为了测试和优化Unity WebGL项目的加载性能。 - 这样的测试可能包括模拟不同网络环境，检查游戏...
Better-Minimal-WebGL-Template unity webgl打包模板 支持手机
12-09
这个模板的核心目标是减少最终WebGL构建的大小，提高加载速度，同时保持良好的运行效率。它通过去除不必要的Unity组件和服务，以及优化资源加载和管理来实现这一目标。这使得在移动设备上运行Unity WebGL项目变得...
Unity打包到Webgl平台以及遇到的问题
m0_74824635的博客
12-13 1910
打包后我们会发现在我们的文件夹里会有一个网址html，这代表我们的Web包已经打成功了，那么直接点击这个html文件运行我们的项目会发现一个报错提示我们没有web服务这个问题是因为我们Web包必须在有服务器支持的环境下才能够正常运行，所以接下来我们要配置我们的包体在本地也就是127.0.0的环境下的服务器托管状态。
Unity WebGL 加载测试：优化你的WebGL应用
gitblog_00648的博客
09-15 1247
Unity WebGL 加载测试：优化你的WebGL应用 项目介绍 Unity WebGL Loading Test 是一个专注于测试和优化 Unity WebGL 构建大小和加载时间的开源项目。该项目由 Johannes Deml 开发，旨在帮助开发者更好地理解和优化他们的 WebGL 应用，尤其是在移动设备上的表现。通过对比不同 Unity 版本和设置下的构建大小和加载时间，开发者可以更有效地...
[转]unity webgl优化
小小姑娘
12-03 3704
laya是国产的一款引擎主要就是因为unity webgl不作为所以才有了laya他使用asts或者js开发在浏览器上不用转换脚本了场景可以用unity的并且也用上了实体组件系统可以控制加载需要的组件这是一款不错的工具主要用来开发各种小游戏.搞了三天开发了一个场景进行与其他对比测试.12.Publishing Settings ->Compression Format 是否压缩跟自己需要选择压缩肯定需要解压如果网络不好选择压缩.压缩尽量选择Gzip兼容好本地加载可以选择不压缩。
基于Unity开发WebGL项目加载AB包(一)
weixin_43818160的博客
10-31 4065
Unity发布WebGL,并加载AB包资源。
Unity打包WebGL的优化常用操作？
一条小咸鱼
02-20 4094
Unity打包WebGL的优化操作？
Unity打包WebGL的全过程及在打包和使用过程中会遇到的问题(本地测试)
热门推荐
qq_66312646的博客
06-07 2万+
如果说选择压缩打包那么在本地测试会出现浏览器不支持解压缩这个问题解决方案还在研究中，所以就只讲解一下不压缩的，其实压缩与不压缩其会出现的问题只会在包的大小上体现出来如果不是正式上线只是本地测试的话没有什么区别也不会存在解压缩这个问题了。打包后我们会发现在我们的文件夹里会有一个网址html，这代表我们的Web包已经打成功了，那么直接点击这个html文件就能够直接运行我们的项目了。点击确定就添加上了我们的类型然后再回去我们的网站就发现BUG不见了至此所有本地测试的流程就完成了。
Untiy打包html获取之前网页传参的方法
波波斯维奇
10-14 863
前言：在之前做的一个小项目中，需要使用Unity打包出webgl网页，并且用其中的html接受之前网页传过来的一个参数。这不属于我擅长的，但是没办法，问题还是要解决的，经过查询资料，最终我还是解决了这个问题。具体步骤如下。 1.使用Unity打包出webgl包，打开其中的index.html文件。 2.打出的代码如下。 <!DOCTYPE html> <html lang="e...
unity webgl启动时间优化
u013172864的博客
06-19 1万+
接触过unity发布成webgl的都应该被其加载的启动时间恶心过吧，真的很慢，对用户体验很差我的解决办法是1.Resources文件夹里东西越多越慢，能弄成ab包就尽量弄成，图片资源预知体什么的最好别放这文件夹下2.建议使用brotli压缩方式3.那就是服务器做缓存机制，了解webgl文件包的应该度知道其文件格式，主要数据在build文件下我测试了很多次加载过程，发现大部分时间都是在下载和解压.u...
webgl和pwa
03-24
### WebGL与PWA的关系 WebGL 是一种基于浏览器的技术，允许开发者通过 JavaScript API 创建高性能的 3D 图形渲染效果[^1]。而渐进式网络应用 (Progressive Web App, PWA) 是一种利用现代 web 技术构建的应用程序形式，旨在提供接近原生应用程序的用户体验。 两者之间的关系主要体现在以下几个方面： #### 性能优化 当将 WebGL 集成到 PWA 中时，可以充分利用 Service Worker 的缓存功能来减少资源加载时间并提高性能。例如，在开发过程中可以通过配置 `service-worker.js` 文件实现对 WebGL 资源（如 `.json`, `.js` 和其他二进制数据）的有效管理[^2]。 ```javascript self.addEventListener('install', function(event) { event.waitUntil( caches.open('my-pwa-cache').then(function(cache) { return cache.addAll([ '/index.html', '/build/webgl.json', '/unity-loader.js' ]); }) ); }); ``` 上述代码片段展示了如何使用 service worker 来预缓存必要的 WebGL 数据文件。 #### 离线支持 由于 PWAs 提供离线访问能力，因此即使在网络连接不可用的情况下也可以运行包含 WebGL 内容的应用。这通常依赖于之前提到的服务工作线程以及 IndexedDB 或本地存储解决方案保存较大资产的数据副本。 #### 安全性和兼容性考虑 需要注意的是，某些安全策略可能会影响两者的集成过程。比如跨域资源共享(CORS) 设置可能会阻止从不同域名加载纹理或其他媒体素材；另外并非所有的移动设备都完全支持最新的 WebGL 版本或者 ES6+特性，所以在设计阶段就要考虑到这些潜在障碍。 ### 结合使用的具体方法 要使 WebGL 成功应用于 PWA 场景下，则需遵循如下原则： - **初始化项目结构**: 确保 HTML 页面能够正确引入所需的库和脚本，并定义好画布容器用于呈现图形内容。 - **适配移动端体验**: 对触摸事件做出响应调整界面布局适应各种屏幕尺寸变化情况下的显示需求。 - **部署最佳实践**: 使用 HTTPS 协议发布网站以满足安装为桌面快捷方式的前提条件之一——即站点必须位于加密通道之上才能被识别为可信赖来源。 综上所述，虽然存在一些挑战需要克服，但凭借合理规划和技术手段完全可以达成让带有复杂视觉特效的游戏或模拟器作为独立软件存在于用户的手机和平板电脑上的目标。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值