The files for the packaged html builds are being named incorrectly when they’re compressed. For example jsgz instead of js.gz. It’s also not using the correct template, it uses templateX instead of the template for the compressed files. I’ve tried changing everything manually, but somewhere it calls for the data file and I can’t find where to change it to the compressed type.
To clarify further this happens in source builds and the regular releases. Both are in 4.11.2. I used Tappy Chicken to test it out also. Tappy chicken packages fine and has the correct compressed files in 4.10.4 and so does my project, but both generate the same wrongly named files, and use the wrong template for the compressed files. Any idea on how to fix this on my end would be greatly appreciated though.
Is there some option in the UE4 editor to switch to utilizing the precompressed files? If so, I haven’t used that, but I do routinely host precompressed files of UE4 exports. What I do is just export as usual, and then modify the .html file as follows.
First, find the definition of Module.locateFile() in the generated .html file:
var Module = {
...
// file location.
locateFile : function (name){
return name;
},
...
};
and edit that to the form
var Module = {
...
// file location.
locateFile : function (name){
var isAbsoluteUrl = name.indexOf('://') != -1;
// Fetch gzipped content if via a CDN, but when via file://, load up the noncompressed files.
if ((isAbsoluteUrl && name.indexOf('file://') == -1) || (!isAbsoluteUrl && location.protocol.indexOf('file') == -1)) return name + 'gz';
return name;
},
...
};
Then find all references to the URLs in the html page, and replace them to route through the Module.locateFile function. For example:
...
$.ajax({
url : "ShooterGame.js.symbols",
...
var promises = [
'Utility.js',
'ShooterGame.data.js',
'ShooterGame.js'
].map(download);
...
becomes
...
$.ajax({
url : Module.locateFile("ShooterGame.js.symbols"),
...
var promises = [
Module.locateFile('Utility.js'),
Module.locateFile('ShooterGame.data.js'),
Module.locateFile('ShooterGame.js')
].map(download);
...
After that, if the page is loaded via a http:// or https:// URL, it will fetch the .jsgz, .datagz and .symbolsgz files. However if the files are uploaded to a CDN, e.g. S3, it won’t work by default, since the web servers will incorrectly autodetect the mime type the content. For it to work, the CDN will need to be configured to add the following header rules for the gz-ending files:
.jsgz files need
Content-Type: application/x-javascript
Content-Encoding: gzip
and .datagz, .symbolsgz and .memgz files need
Content-Type: application/octet-stream
Content-Encoding: gzip
If you’d prefer using suffixes .js.gz instead of .jsgz and so on, that works as well, as long as the above headers are configured for the web server, and Module.locateFile() is set to append “.gz” suffix instead of only the “gz” suffix.
You’ll see that the above changes don’t change the loading of the .data and the .mem files anywhere, but it seems to magically work for those files as well. The reason for that is that the Module.locateFile() is actually an Emscripten runtime function that the Emscripten loader calls for these files when it is loading them up, see
Module.locateFile documentation and
occurrences of Module.locateFile in Emscripten runtime.
This setup works for UE 4.11.2, I think 4.10 and older generated a different looking .html output, so for those the changes would be somewhat different.
If there is some UE4 provided checkbox for enabling compression, I wasn’t aware of that, which is why I developed this manual configuration 
Of course any bugs on that method should be addressed by the developers.
You rock, I modified the HtmlX.template file with the your code and it worked perfectly. Thank you very much. I know next to nothing about emscripten or javascript for that matter, so that presents a problem when dealing with HTML5 development through UE4. Now if I could only get UE4 to not upload uncompressed files to the S3, I would be in good shape for automating this process. Anyways, thanks again.
After further inspection, the code forces a load from the compressed files regardless of whether or not it’s on the S3 or local. I don’t need it load uncompressed files though, just letting you know.
Hi feurern, once i did the changes as mentioned above in “.html” file. I tried refreshing the browser, although the load is faster but it is throwing reference error _gclearstencil. any idea about this ??
What html file did you put it in? Your project file or the HTMLX.template?
The output file in the folder, the file which we get once after shipping the project to HTML5. It is the only html file in the folder along with data.jsgz , data.gz, house3.data , utility and others. btw is it the same HTMLX.template ?
Apologies for falling off here and not responding. I stopped working on the html build once I got this working. Too many issues to make it viable at the moment, specifically the massive file sizes and the inability for it to work on mobile browsers. Which I assume are both related. I believe the clearstencil error is related to the fact that HTML5 builds don’t support custom depth stencils.