Завантаження основного 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 на поточну сторінку?

Ви можете використовувати Requjs для динамічного завантаження потрібних бібліотек лише на ці сторінки. Тоді вам залишається завантажувати на всі сторінки лише запити (що становить близько 14 кб), економлячи приблизно 385 кбіт.

Інтеграція також дуже проста: просто "оберніть" код, який у вас є, з потребою, включайте речі:

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. Мінімізуйте Javascripts - просто ви стискаєте та скасовуєте, що не зменшує код. Перш за все використовуйте хороший інструмент Minify JS та мінімізуйте свій код. У вас є 12 файлів, і кожен файл буде мінімізувати окремо перед тим, як зробити найкращий результат.

2. Використовуйте асинхронне завантаження javascript , використовуючи результати асинхронного завантаження у дуже швидкий час завантаження та візуалізації сторінки. Вплив на користувача дуже сильний, тому що хороша асинхронна завантаженість не блокує процес візуалізації, а час завантаження сторінки, що погано, сильно скорочується. Зображення та інші елементи, що відображаються регулярно, відображатимуться без завантаження JavaScript.

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

4. Спеціальні заголовки довгих термінів дії : Деякі способи завантаження веб-сайту з питанням часу завантаження, тоді ви повинні дати Long Expires для HTTP JS-файлів, щоб їх не можна було завантажувати кожен раз, що зменшить запит вдруге. Згідно з моїм дослідженням, час завантаження на другу сторінку має більше виходів порівняно з відвідуванням першої сторінки.

5. Перевірка за допомогою швидкості сторінки : Інколи інші ресурси також впливають на швидкість завантаження сторінки, люб’язно перехресну перевірку, а також намагаються оптимізувати й інші ресурси. Оскільки робимо крок на кожному ресурсі, надайте додатковий час нашому завантаженню JS.