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

13

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

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

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

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

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

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

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

рукав моря
источник
Если у вас есть 700-килобайтный код JS, вы действительно должны разделить его и включить только те скрипты, которые вам действительно нужны. Кроме того, при использовании jQuery («… пиши меньше, делай больше…») кажется, что размер такого огромного JS-файла слишком велик. Какого черта ты делаешь с такой массой JS?
Feeela
@feeela взгляните на jquery-ui, jquery.datatables. Те, кто только 400 КБ вместе. У меня есть и другие плагины, которые я использую, такие как jquery.validate, jquery.uniform - все это складывается. xD
Кайл
В этом случае - как сказано ниже - вы действительно должны разделить сценарии и загрузить только то, что нужно ...
feeela

Ответы:

6

Вы можете использовать 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();
    });
})
Майкл
источник
1
Мне очень нравится этот дизайн сайта. Я никогда не слышал о requirejs. Как вы оцениваете это по HTTP-запросам? Разве это не помещает больше запросов http на страницу? (не так ли плохо?) Извините за мои глупые вопросы.
Кайл
Лучше, конечно, иметь меньше запросов, но сэкономить> 350 тыс. Тоже неплохо. Да, ваш сайт сделает еще один запрос, если вы добавите на эту страницу другую библиотеку. Если это datatablesна одном сайте и jqplotна другом, это нормально. Я согласен, что при загрузке еще пяти библиотек на 50% страниц преимущество исчезнет. Но в вашем случае я считаю это очень хорошим решением (при условии, что остальные из вас останутся в одном сжатом файле).
Майкл
Спасибо, Майкл. Это решение довольно блестящее. Прежде чем я собирался разделить все на одной странице, но это ... Это лучше, чем я имел в виду. Спасибо за это предложение. Поскольку вы знакомы с requirejs, считаете ли вы, что requirejs будет достаточно? Я вижу, что на некоторых сайтах они используют Google для загрузки своих jquery и других библиотек google.load('...').
Кайл
1
Я настоятельно рекомендую загружать общие библиотеки из Google (или других сайтов, предлагающих это). Это имеет 2 преимущества: а) файл lib кэшируется между различными сайтами. Скорее всего, пользователь посещал сайт раньше, который также использует jquery, загруженный из Google. Этот файл затем загружается из кэша, а не снова с сервера! б) Даже если он должен быть загружен, его будет гораздо быстрее загрузить из Google CDN, чем с вашего собственного веб-сервера.
Майкл
8

Если ваш фреймворк / 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 может быть лучшим подходом в целом.

Су»
источник
У меня есть собственный веб-сайт, который я сделал из HTML-шаблона, который я купил на themeforest. Единственная проблема в том, что чувак разбросал около 6 файлов JS, и это было грязно. Поэтому я поместил их в один файл, который включает несколько библиотек jqplot, datatables, jquery-ui. Все это составляет около 550-600 КБ. 100 КБ - это мой JS, использующий эти библиотеки. Я чувствую, что должен исправить это, вместо того, чтобы загружать столько ненужных библиотек JS на каждой странице. Спасибо за ваше предложение! =)
Кайл
5

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

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

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

Дунайский моряк
источник
Да, с таким размером JS в сочетании с тем фактом, что это в основном довольно распространенные библиотеки, использование CDN будет большим преимуществом.
Жаф - Бен Дюгид
1

~ 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.

Vineet1982
источник