Mejores prácticas para administrar y desplegar aplicaciones de JavaScript de gran tamaño

Question

¿Cuáles son algunas prácticas estándar para administrar una aplicación JavaScript de tamaño medio? Mis preocupaciones son tanto la velocidad de descarga del navegador como la facilidad y la facilidad de mantenimiento del desarrollo.

código de Nuestra JavaScript es más o menos "namespace" como:

var Client = { 
    var1: '', 
    var2: '', 

    accounts: { 
     /* 100's of functions and variables */ 
    }, 

    orders: { 
     /* 100's of functions and variables and subsections */ 
    } 

    /* etc, etc for a couple hundred kb */ 
} 

Por el momento, tenemos uno (sin embalaje, sin pelar, de fácil lectura) JavaScript archivos para gestionar toda la lógica de negocio de la aplicación web. Además, hay jQuery y varias extensiones jQuery. El problema al que nos enfrentamos es que se necesita para siempre para encontrar algo en el código JavaScript y el navegador aún tiene una docena de archivos para descargar.

¿Es común tener un puñado de archivos JavaScript de "origen" que se "compilan" en un último archivo comprimido de JavaScript? ¿Alguna otra sugerencia útil o mejores prácticas?

Answer 1

El enfoque que he encontrado funciona para mí es tener archivos JS separados para cada clase (como lo haría en Java, C# y otros). Alternativamente, puede agrupar su JS en áreas funcionales de la aplicación si es más fácil para usted navegar.

Si coloca todos sus archivos JS en un directorio, puede hacer que su entorno del lado del servidor (PHP por ejemplo) recorra cada archivo en ese directorio y produzca un <script src='/path/to/js/$file.js' type='text/javascript'> en un archivo de encabezado incluido en toda su UI páginas. Encontrará esta carga automática especialmente útil si crea y elimina regularmente archivos JS.

Al implementar en producción, debe tener un script que los combine en un solo archivo JS y lo "minimice" para mantener el tamaño reducido.

Answer 2

Para la eficiencia del servidor, es mejor combinar todos los javascript en un archivo minificado.

Determine el orden en que se requiere el código y luego coloque el código minificado en el orden en que se lo requiere en un solo archivo.

La clave es reducir el número de solicitudes requeridas para cargar su página, por lo que debe tener todo el javascript en un solo archivo para producción.

Recomiendo mantener los archivos divididos para el desarrollo y luego crear un script de compilación para combinar/compilar todo.

Además, como regla general, asegúrese de incluir su JavaScript al final de su página. Si JavaScript está incluido en el encabezado (o en cualquier lugar al comienzo de la página), detendrá todas las demás solicitudes hasta que se cargue, incluso si se activa pipelining. Si está al final de la página, no tendrá este problema.

Answer 3

Sólo un flanco lateral - Steve ya señaló, realmente debería "minificar" sus archivos JS. En JS, los espacios en blanco realmente importan. Si tiene mil líneas de JS y tira solo las nuevas líneas no requeridas que ya ha guardado, aproximadamente 1K. Creo que entiendes el punto.

Hay herramientas para este trabajo. ¡Y nunca debe modificar manualmente el JS "minificado"/despojado/ofuscado! ¡Nunca!

Answer 4

Hay un excelente artículo sobre la vitamina de Cal Henderson de Flickr fama de cómo optimizar la entrega de su CSS y JavaScript: http://www.iamcal.com/serving-javascript-fast/

Answer 5

En nuestros grandes aplicaciones JavaScript, escribimos todo nuestro código en pequeños archivos separados - un archivo por 'clase' o grupo funcional, usando una estructura de directorios/espacios de nombres tipo-de-como-Java. entonces tenemos:

• Un paso de tiempo de compilación que lleva todo nuestro código y le resta (usando una variante de JSMin) para reducir el tamaño de la descarga
• Un paso de tiempo de compilación que toma las clases que son siempre o casi siempre es necesario y los concatena en un paquete grande para reducir los viajes redondos al servidor
• Un 'cargador de clases' que carga las clases restantes en el tiempo de ejecución bajo demanda.

Answer 6

Lea el código de otras (buenas) aplicaciones de JavaScript y vea cómo manejan las cosas. Pero empiezo con un archivo por clase. Pero una vez que esté listo para la producción, combinaría los archivos en un archivo grande y lo minimizaría.

La única razón, no combinaría los archivos, es si no necesitaba todos los archivos en todas las páginas.

Answer 7

Además, le sugiero que utilice el AJAX Libraries API de Google para cargar bibliotecas externas.

Es una herramienta de desarrollador de Google que agrupa grandes bibliotecas de JavaScript y facilita su implementación, actualización y aligerarlas al usar siempre versiones comprimidas.

Además, hace que su proyecto sea más simple y ligero, ya que no necesita descargar, copiar y mantener estos archivos de bibliotecas en su proyecto.

usarlo de esta manera:

google.load("jquery", "1.2.3"); 
google.load("jqueryui", "1.5.2"); 
google.load("prototype", "1.6"); 
google.load("scriptaculous", "1.8.1"); 
google.load("mootools", "1.11"); 
google.load("dojo", "1.1.1"); 

Answer 8

Mi estrategia constan de 2 técnicas principales: los módulos de AMD (para evitar decenas de etiquetas de script) y el patrón de módulo (para evitar la fuerza de acoplamiento de las partes de la aplicación)

Módulos de AMD: muy sencillo, ver aquí: http://requirejs.org/docs/api.html también es capaz de empaquetar todas las partes de su aplicación en un archivo JS minified: http://requirejs.org/docs/optimization.html

patrón Módulo: he utilizado esta biblioteca: https://github.com/flosse/scaleApp preguntando ¿qué es esto? más información aquí: http://www.youtube.com/watch?v=7BGvy-S-Iag