如何在html中包含巨大的javascript js文件？

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

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

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

3秒是更好的用户体验

问题是，如何在HTML中使用

标记来包含这个jsonjs.zip文件

---

浏览器中的include标记将无法识别“.zip”文件

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

---

<>但是，我会考虑把数据分割成块——所有用户是否真的同时需要所有18MB？如果你按需加载一些呢？json中的数据可以简化吗？

如果可能的话，我会将其分解成更小的json文件，并通过XHR加载，特别是如果它是json内容类型的话。：）

经过8个小时的搜索和测试，我成功了

这就是你需要的

1） 下载并添加所有zip.js、z-worker.js、deflate.js、inflate.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 *********** -->

4） 。完成了

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

           //------------------- 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 -----------------------------------