Чи слід поєднувати файли js / css в один файл?

Як додатки YSlow, так і Google Page Speed ​​Speed рекомендують поєднувати файли скриптів (і стилів) в один файл, щоб зменшити кількість HTTP-запитів, і я, безумовно, бачу сенс цього, коли файли скриптів узгоджуються на всьому сайті, але для веб-додатків, які мають різні вимоги на сайті.

Як я це бачу, є кілька варіантів:

1. Поєднайте всі файли, які використовуються на сайті, і кожна сторінка отримує один і той же комбінований файл - недоліком є ​​невикористаний вміст, захаращуючи сценарій (і важче перше завантаження (також перезавантажтесь, коли будь-який компонентний сценарій зміниться))

2. Комбінуйте файли на основі кожної сторінки - недолік кожної сторінки з різними вимогами отримує різний комбінований файл (важче перше завантаження для кожного типу сторінки)

3. Ігноруйте сувору інтерпретацію рекомендацій лише для одного файлу та завантажте сторінку у декількох файлах, якщо це доречно, кешування, сподіваючись, заперечує кількість HTTP-запитів у загальному випадку - недоліком є ​​кількість запитів HTTP на кожній сторінці

Думки?

Варіант 2 - найгірший; це означає, що кожна сторінка з різною комбінацією необхідних сценаріїв JS призведе до HTTP-запиту. Це значно погіршить продуктивність .

Варіант 1 - найкращий. Врешті-решт більшість користувачів відвідають більшість «типів» сторінки вашого веб-сайту, тому все-таки вигідно поєднувати все в один файл, за винятком великих JS-файлів, які потрібні на кількох, рідко відвідуваних сторінках.

Звернення до першої сторінки може бути повільніше, ніж з різними файлами, але це все-таки варто зробити, оскільки кожен другий перегляд сторінки використовує кешований глобальний JS.

Одна порада, хоча; з’єднайте їх автоматично, якщо ви ще цього не зробили!

Я, як правило, поєдную "глобальний Javascript" - jQuery і загальні плагіни - в один файл, а потім подаю додаткові додатки як окремі файли, коли потрібно.

Наприклад, на одному сайті, на якому я запускаю багато сторінок, є таблиці даних на них, тому у мене є global.jsjQuery, DataTables та SuperFish (для мого меню). На сайті є дві сторінки, які використовують "лайтбокс", тому у мене є окремий сценарій для цих двох сторінок.

Для CSS я просто обслуговую один файл для всього сайту і намагаюся зробити CSS максимально загальним - більшість сторінок мають лише кілька унікальних елементів CSS.

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

Якщо достатня кількість вашого JS може бути перенесена у другу категорію, ви можете покращити сприйняту початкову швидкість завантаження сторінки, створивши кращий досвід для своїх користувачів.

Я б не пропонував поєднувати їх усіх. Якщо ви використовуєте загальну бібліотеку, ви можете використовувати CDN для доставки ваших javascripts. Потім ви можете скористатися кешуванням браузера (якщо інші сайти використовують той самий CDN) та розподіленою доставкою. Майкрософт та Google мають рішення (я їх чесно не використовував, але я, звичайно, почну), і можуть бути інші. У відповідній записці SO має таке запитання:

Коли браузер автоматично очищає кеш JavaScript?

і перша відповідь - тверде золото.