如何在HTML中包含巨大的JavaScriptJS文件?

Question

我有一个18兆字节的JavaScript文件。它只是我需要的 JSON 数组。

为了将这个巨大的 JSON.js 文件传送到客户端，浏览器需要 18 秒，假设用户的互联网速度约为 1 兆字节/秒，这很常见。

打开一个页面大约需要 18 秒！这是不可接受的用户体验。 我已将其压缩为json.zip为3MB，减少了83%的大小，这意味着减少了83%的带宽，用户下载需要3秒。

3秒是更好的用户体验。

这是一个问题，我如何在 HTML 中使用<script>标签来包含这个 jsonjs.zip 文件？

在浏览器中包含标签将无法识别".zip"文件。

Answer 1

您必须使用 js 库来操作 zip 文件，例如 jszip

但是，我会考虑将数据拆分为块 - 所有用户真的需要一次所有 18mb 吗？如果您按需加载其中的一些内容会怎样？json 中的数据可以简化吗？

Answer 2

如果可能的话，我会将其分解为较小的 json 文件并通过 XHR 加载，特别是如果它是 JSON 内容类型。 :)

Answer 3

经过 8 个小时的搜索和测试，我做到了。

zip.js是你需要的。

压缩.js API 文档

1(下载并添加所有zip.js，z-worker.js，放气.js，充气.js等。在您的项目中(您必须添加所有相关文件，否则稍后会出错(

2(html文件，添加脚本标签，我使用当前html页面的相对路径

<!-- ********* zip.js *********** -->
<script src="../js/lib/zipjs/zip.js" type="text/javascript"></script>
<!-- you must add this, to use zip.HttpReader later -->
<script src="../js/lib/zipjs/zip-ext.js" type="text/javascript"></script> 
<!-- ********* End ******** zip.js *********** -->

3(在你的JavaScript文件中，这样做：

//------------------- zip.js -----------------------------------



var _static_site_zip_uri = 'http://localhost:10/data/json2tree/hub.site.static.data.js.zip'


zip.workerScriptsPath = "../js/lib/zipjs/";

//https://github.com/gildas-lormeau/zip.js/issues/93
zip.createReader(new zip.HttpReader(_static_site_zip_uri), 
     function(zipReader){

zipReader.getEntries(function(entries){
if (entries.length) {
  // get first entry content as text
  entries[0].getData(new zip.TextWriter(), function(text) {
    // text contains the entry data as a String
   // console.log(text);


     //..........load into json-viewer,  unzipped text is string .........
              input = JSON.parse(text);
              // init load
              $('#json-renderer').jsonViewer(input, options);
      //.......... End ....... load into json-viewer,  unzipped text is string .........



    // close the zip reader
    zipReader.close(function() {
      // onclose callback
    });
  }, function(current, total) {
    // onprogress callback
     // console.log('current-', current)
     //  console.log('total-', total)
  });
}
});
}, function(zipreader_error) {
// onerror callback
console.log('zipreader_error --->',zipreader_error)
});


//------------------- End ---------------  zip.js -----------------------------------

4(. 完成。

请记住我的zip文件是一个数组[{}，{}]，所以使用json.parse(text(