Загрузка основного JavaScript на каждой странице? Или разбить его на соответствующие страницы?

У меня есть 700kbраспакованный файл JS, который загружается на каждой странице. Раньше у меня были 12файлы javascript на каждой странице, но для уменьшения http-запросов я сжал их все 1 file.

Этот файл есть ~130kb gzippedи обслуживается gzip. Однако на локальном компьютере он все еще распаковывается и загружается на каждой странице. Это проблема с производительностью?

Я профилировал javascript с помощью профилировщика firebug, но не увидел никаких проблем. Проблема / иллюзия, с которой я сталкиваюсь, состоит в том, что в этом файле есть сжатые библиотеки jquery, которые иногда не используются на текущей странице.

Например, jquery datatablesсжат 200 кб, и он загружается только на 2 страницы моего сайта. Другое есть, jqplotа это другое 200kb.

Теперь у меня есть 400kbлишний код, который не выполняется на 80%страницах.

Должен ли я оставить все в 1 файле?

Должен ли я извлечь библиотеки JQuery и загрузить только соответствующие JS на текущей странице?

Вы можете использовать requirejs для динамической загрузки библиотек, которые вам нужны только на этих страницах. Тогда вам нужно только загрузить requirejs (который составляет около 14 КБ) на всех страницах, сэкономив около 385 КБ.

Интеграция также очень проста: просто "оберните" код, который у вас есть, необходимыми элементами include:

require(["jquery", "jquery.alpha", "jquery.beta"], function($) {
    //the jquery.alpha.js and jquery.beta.js plugins have been loaded.
    $(function() {
        $('body').alpha().beta();
    });
})

Если ваш фреймворк / CMS / что-либо имеет соответствующие функции, вы можете включить сценарии условно, как предполагает @Michael, но без дополнительной библиотеки.

Например, WordPress может справиться с ситуацией через что-то вроде:

// For reference; this isn't functional code.
if (is_page('whatever')) {
    <script src="/path/to/datatables.js"><script>
    <script>
        [Your datatables setup here]
    </script>
}

В RequireJS нет ничего плохого; вам просто нужно оценить, компенсирует ли дополнительный уровень сложности, который он добавляет (плюс обучение его использованию в первую очередь), то, что могут сделать для вас более легкодоступные инструменты. Если у вас есть только два случая, которые вы упомянули выше, это может быть лучшим вариантом. Если у вас еще много работы, то RequireJS может быть лучшим подходом в целом.

700 КБ JavaScript - это проблема производительности, потому что она должна быть проанализирована после загрузки страницы. Поэтому вам следует позаботиться о том, чтобы загружались только те скрипты, которые нужны. Один большой JavaScript может быть в порядке на полных сайтах AJAX, таких как GMail, когда навигация выполняется внутренне, не покидая одной страницы. Однако даже полные сайты AJAX выполняют динамическую загрузку JS, чтобы предотвратить загрузку ненужного JS при запуске (это связано как с памятью, так и со скоростью).

Вы сказали, что хотите уменьшить http-трафик. Вы должны играть с HTTP-кэшированием . Проблема в том, что изменения в JS могут быть не видны, пока не истечет срок действия кэша, если вы установите слишком большое время истечения.

Однако есть хитрость, на которую вы не ссылаетесь myscript.js, но myscript.js?version={myversion}. После обновления приложения вы изменяете {myversion}и принудительно перезагружаете JavaScript.

~ 700 КБ JavaScript - это проблема производительности, и если она сжимается, мы должны увидеть правила, которым необходимо следовать при оптимизации кода:

1. Minify Javascripts - просто вы сжимаете и распаковываете, что не уменьшало код, прежде всего используйте хороший инструмент Minify JS и Minify ваш код. У вас 12 файлов, и каждый файл будет сокращен до того, как вы станете лучшим членом.

2. Использовать асинхронную загрузку JavaScript , используя асинхронную загрузку, приводит к очень быстрому времени загрузки и отрисовки страницы. Влияние пользователя очень сильно, потому что хорошая асинхронная загрузка не будет блокировать процесс рендеринга, а время загрузки страницы будет значительно уменьшено. Изображения и другие отображаемые элементы регулярно будут отображаться, так как не загружен JavaScript.

3. Используйте GOOGLE cdn для JQUERY ; Я думаю, что вы используете JQUERY и загружаете его со своего веб-сайта, что также является дополнительным недостатком, любезно используйте GOOGLE CDN ​​(бесплатно) для загрузки JQUERY. Так как он используется почти на каждом третьем веб-сайте и, таким образом, уже доступен на клиентском компьютере в кеше.

4. Настраиваемые заголовки с длительным сроком действия : если сайт загружается с проблемой времени загрузки, вы должны предоставить файлы с длинным сроком действия для файлов JS HTTP, чтобы их нельзя было загружать каждый раз, что уменьшит количество запросов во второй раз. Согласно моим исследованиям, время загрузки, занятое на второй странице, больше, чем при первом посещении страницы.

5. Проверка со скоростью страницы : иногда другие ресурсы также влияют на скорость загрузки страницы, пожалуйста, перепроверьте, а также попробуйте оптимизировать и другие ресурсы. Делая шаг за шагом на каждом ресурсе, дайте дополнительное время нашей загрузке JS.