Servir Javascript agrupado en ruby on rails.

En mi último proyecto, el número de archivos javascript que tenia que importar eran considerables por lo que los tiempos de carga se veian afectados, ya que los navegadores tienen una limitación en cuanto a conexiones y descargas simultáneas. Por tanto, la solución para mejorar estos tiempos, no es más que agrupar los archivos importados en el menor número posible de éstos y para ello tenemos varias opciones:

• javascript_include_tag ..., :cache => true

Haciendo uso de esta funcionalidad que trae rails, agrupamos todos los archivos indicados como argumentos en el helper en uno solo "all.js".

• Uso de Bundle-fu

La funcionalidad es la misma que la anterior solución mas unos "extras":

• Agrupa tambien archivos css!!
• Minimiza el tamaño del javascript usando JSMin u opcionalmente PackR.
• Posibilidad de ofuscación del código(No soy muy partidario de ello, pero bueno ahí está)

Por tanto haciendo algo del tipo:

 <% bundle do %>
   <%= javascript_include_tag "prototype", "ClusterMarker", "window", "map", "live_validation", "application", "effects" %>
   <%= stylesheet_link_tag "all", "flash", "themes/alphacube" ,"themes/default" %>
 <% end %>
 

Pasamos de esto:

 <script src="/javascripts/prototype.js" type="text/javascript"></script>
 <script src="/javascripts/ClusterMarker.js" type="text/javascript"></script>
 <script src="/javascripts/window.js" type="text/javascript"></script>
 <script src="/javascripts/map.js" type="text/javascript"></script>
 <script src="/javascripts/live_validation.js" type="text/javascript"></script>
 <script src="/javascripts/application.js" type="text/javascript"></script>
 <script src="/javascripts/effects.js" type="text/javascript"></script>
 <link href="/stylesheets/all.css" media="screen" rel="stylesheet" type="text/css" />
 <link href="/stylesheets/flash.css" media="screen" rel="stylesheet" type="text/css" />
 <link href="/stylesheets/themes/alphacube.css" media="screen" rel="stylesheet" type="text/css" />
 <link href="/stylesheets/themes/default.css" media="screen" rel="stylesheet" type="text/css" />
 

a esto:

 <link href="/stylesheets/cache/bundle.css" media="screen" rel="stylesheet" type="text/css" />
 <script src="/javascripts/cache/bundle.js" type="text/javascript"></script>
 

En cuando a la que elijo yo, me quedo con la segunda opción simplemente por la posibilidad de agrupar también las hojas de estilo.

servido por n3uro5i5 1 comentario compártelo