Как получить только часть файла JavaScript? - PullRequest
Новая
       19

Как получить только часть файла JavaScript?

3 голосов
/ 17 июня 2020

У меня очень большой файл JavaScript (например, более 10 МБ), который разделен на разные разделы по смещению в байтах

Я хочу загрузить этот JavaScript файл в свой HTML код в виде разных фрагментов, в зависимости от байтового смещения, с использованием тега сценария, так что будет загружена только эта часть файла JS

Я знаю, что могу настроить его на своем сервере, чтобы в строке запроса GET-запроса, например ?bytes=10-40, в конце URL-адреса src, но мне было интересно, можно ли сделать это с помощью только клиентского кода, без каких-либо дополнений к серверу (при условии, что сервер в любом случае поддерживает accept-ranges:bytes, или, желательно, просто для автономного использования, если это возможно, просто включить автономный js файл и получить его содержимое таким образом) без других XMLHttpRequest или fetch)?

1 Ответ

1 голос
/ 17 июня 2020

Я думаю, что разделение файла на несколько файлов - лучший подход к этому, так вы получите выгоду от механизма кэширования.

С учетом сказанного, вы можете добиться того, о чем просили в вопросе, запрашивая часть файла, а затем вставляя текст ответа в элемент script и добавляя его в документ: 

let xhr = new XMLHttpRequest();

xhr.open('GET', 'url/of/the/js/file');

xhr.setRequestHeader('Range', 'bytes=10-40');             // set the range of the request

xhr.onload = function () {                                // when the request finishes
    let scriptEl = document.createElement("script");      // create a <script> element
    scriptEl.type = "text/javascript";
    scriptEl.textContent = xhr.responseText;              // set its content to the response text which is the snippet of code you requested (please take a look at this other SO answer https://stackoverflow.com/a/6433770)

    document.body.appendChild(scriptEl);                  // append that element to the body, the code will then be executed
};

// probably a good idea to handle xhr.onerror as well in case something goes wrong

xhr.send();
...