Сборка JS: хрень о двух концах

Или вот зашла речь о сборке JavaScript и CSS.

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

Например, на одной страничке у нас подключаются файлы A.js, B.js и C.js. Загружаются они браузером за три запроса и сохраняются в кэше.

Но мы, при деплое, запускаем свою супер-склеивалку и у нас вместо трёх файлов получается один ABC.js. Браузеру приходится загружать тот же самый объём, но всего за один запрос, что намного оптимальнее. Пока всё хорошо.

А теперь мы переходим на другую страницу, на которой у нас используются сценарии A.js, B.js и D.js. В обычной ситуации браузер бы запросил D.js, а остальные два файла взял бы из кэша. Но теперь у нас на продакшене вместо трёх файлов — один ABD.js. И браузеру приходится тащить к себе по второму разу содержимое A и B.

А потом мы вносим изменения в B.js. В случае без сборки, браузеру пришлось бы обновить только один этот файл. В случае со сборокой же, пришлось обновлять все сборки, где участвует B. В нашем случае, это и ABC.js и ABD.js.

Мораль, как обычно: ни одна крутая тулза не избавляет от необходимости думать головой. Собирать имеет смысл только самое ядро, которое используется на всём сайте и очень редко меняется.

6 комментариев »

  • Проблема решается правильным кешированием несклееных файлов в браузере.

    Или cклеивать все-все в один файл… и все равно жестко кешировать в браузере

    Sergey, 21.02.2013, 13:12

  • >Проблема решается правильным кешированием несклееных файлов в браузере.
    не понял, как?

    >Или cклеивать все-все в один файл… и все равно жестко кешировать в браузере
    да, но после изменений в одном из исходных файлов, будет каждый раз обновляться весь супер-файл.

    vasa_c, 21.02.2013, 13:32

  • Почитайте о кешировании и версионности тут — http://javascript.ru/optimize/cache-versioning

    Ничего нет страшного в том, что клиент раз загрузит обновленную большую склееную библиотеку. Но надо смотреть в конкретной ситуации.

    У нас проект на php + js + css — делаем сборку через phing. Все статические файлы копируем в папки типа v/1.2.3/ и настраиваем nginx на отдачу статики с правильными заголовками с этих папок. Так решаем версионность. Phing так же компилит js темплейты, сжимает и соединяет нужные файлы.

    Sergey, 21.02.2013, 13:39

  • >Ничего нет страшного в том, что клиент раз загрузит обновленную большую склееную библиотеку. Но надо смотреть в конкретной ситуации.

    Ну, если клиент загрузит все исходные файлы по отдельности и даже не сжатые, то солнце на землю тоже не упадёт.
    Однако, мы же боремся за оптимизацию. Я написал о том, что бездумная сборка всего в один файл не обязательно будет оптимальнее, чем ситуация вообще без сборки.

    >Все статические файлы копируем в папки типа v/1.2.3/
    1.2.3 — это общая ревизия? То есть каждый раз создаётся папка и туда копируются все файлы вне зависимости от того, изменились ли они или нет?

    vasa_c, 21.02.2013, 13:56

  • Ну нужно решить что оптимизировать. Количество запросов к серверу или трафик, или скорость загрузки страницы. И подобрать нужное для вашего проекта.

    1.2.3 — это номер версии сборки файлов. Автоматически номер добавляется в урлу ко всей статике в проекте. Загружается пользовательским браузером раз на месяц. Обновление файлов выкатываются раз в 2-3 недели. Паралельно с этим можно и пожать файлы и объединить.

    Sergey, 21.02.2013, 15:05

  • Ну я об этом и говорю — нужно сначала решить, а потом подобрать нужное :)
    А неправильное использование сборки негативно скажется, как на трафике, так и на скорости загрузки.

    vasa_c, 21.02.2013, 15:41

Leave a comment