Пара советов для Ruby on Rails. Практическое приложение. Оптимизация структуры веб-страниц
Часто бывает так, что одно веб-приложение подгружает сразу несколько JavaScript-файлов и CSS-стилей. Что существенно замедляет загрузку страницы, так как веб-браузер каждый раз заново запрашивает новый файл.
Решение заключается в том, чтобы уменьшить количество внешних ресурсов на вашей странице, объединив их все в один файл. Поможет нам в этом плагин AssetPackager (http://synthesis.sbecker.net/pages/asset_packager)
Ставим:
script/plugin install git://github.com/sbecker/asset_packager.git
Пример config/asset_packages.yml:
javascripts:
- base:
- prototype
- effects
- controls
- dragdrop
- application
- secondary:
- foo
- bar
stylesheets:
- base:
- screen
- header
- secondary:
- foo
- bar
И запускаем рэйк таск:
rake asset:packager:build_all
Дальше для яваскрипта пишем
<%= javascript_include_merged :base %>
или
<%= javascript_include_merged 'prototype', 'effects', 'controls', 'dragdrop', 'application' %>
Для стилей пишем:
<%= stylesheet_link_merged :base %>
или
<%= stylesheet_link_merged 'screen', 'header' %>
В итоге получаем для режима разработки наш старый код например:
<script type="text/javascript" src="/javascripts/prototype.js"></script> <script type="text/javascript" src="/javascripts/effects.js"></script>
<script type="text/javascript" src="/javascripts/controls.js"></script>
<script type="text/javascript" src="/javascripts/dragdrop.js"></script>
<script type="text/javascript" src="/javascripts/application.js"></script>
<link href="/stylesheets/screen.css" type="text/css" />
<link href="/stylesheets/header.css" type="text/css" />
А в режиме продакшена будет:
<script type="text/javascript" src="/javascripts/base_packaged.js?123456789"></script>
<link href="/stylesheets/base_packaged.css?123456789" type="text/css" />
Теперь чтобы сделать нагрузку еще меньше, переносим все свои статические файлы на другой хост. В рельсах это очень просто сделать, достаточно добавить в config/environments/production.rb такую строчку:
config.action_controller.asset_host = "http://assets.example.ru"
Теперь все image_tag, javascript_include_tag и т.д. будут указывать на этот хост.