2012-09-02 16 views
74

Esto puede ser una pregunta tonta para chicos de la web. Pero estoy un poco confundido por esto. Ahora, tengo una aplicación en la que estoy usando un par de archivos Javascript para realizar diferentes tareas. Ahora, estoy usando Javascript bundler para combinar y minificar todos los archivos. Por lo tanto, en tiempo de ejecución solo habrá un archivo app.min.js. Ahora, Requirejs se usa para cargar módulos o archivos en tiempo de ejecución. Entonces, la pregunta es si ya tengo todo en un archivo, ¿entonces necesito requirejs? ¿O qué es un escenario de caso de uso donde puedo usar requirejs y/o bundler?Cuándo usar Requirejs y cuándo usar javascript incluido?

Por favor, hágamelo saber si necesita más detalles.

+1

No veo por qué necesitaría ambos. ¿Crees que lo harías? – nnnnnn

+2

Eso es una confusión. Cuándo usar qué? ¿O solo necesitas elegir uno? – kunjee

Respuesta

27

Este es un problema muy controvertido entre muchos desarrolladores expertos de JavaScript. Muchos otros lenguajes tienen una fase de "compilación" en la que todo el programa se incluye para su despliegue (los archivos .WAR de JBoss vienen a la mente). Los programadores que provienen de entornos más tradicionales a menudo favorecen este enfoque.

Javascript ha visto tal crecimiento en los últimos años que es difícil trazar las mejores prácticas exactas, pero aquellos que aprecian la naturaleza más funcional de Javascript a menudo prefieren el enfoque de carga de módulos (como require.js usa).

Escribí Frame.js que funciona muy parecido a require.js, por lo que mi sesgo es hacia el enfoque del cargador de módulos.

Para responder a su pregunta directamente, sí, es una u otra.

La mayoría de las personas que abogan por empaquetar sus scripts en un único archivo creen que permite más compresión y, por lo tanto, es más eficiente. Creo que las ventajas de eficiencia del empaquetado son insignificantes en la mayoría de los casos porque: (1) los tiempos de carga del módulo se distribuyen durante toda la sesión, (2) los módulos individuales se pueden comprimir casi en el mismo porcentaje, (3) los módulos individuales pueden almacenarse en caché el servidor y los enrutadores por separado, y (4) cargar los scripts solo cuando son necesarios, en última instancia, le permite cargar menos código para algunos usuarios y más código en general.

A la larga, si puede ver una ventaja de la carga dinámica de scripts, úselo. Si no, agrupe sus scripts en un solo archivo.

+5

Si bien entiendo los beneficios de mantener los archivos por separado, creo que la agrupación también reduce la cantidad de conexiones HTTP requeridas. A medida que la canalización en los navegadores y servidores se vuelve más ampliamente disponible, esto puede importar menos, pero actualmente es un gran problema. –

+4

La tara de conexión http puede montarse rápidamente si la aplicación es grande. Para nuestra aplicación, cuando lo ejecutamos en modo descomprimido y cargamos cada archivo JS individualmente, tarda aproximadamente de 15 a 30 segundos en cargar la página. En modo empaquetado, es alrededor de un segundo. –

+0

un solo archivo empaquetado y en caché es, obviamente, mucho más rápido que buscar docenas o cientos de archivos, de los cuales nunca se puede estar seguro de que se carguen, o cuánto tiempo se tarda en cargarlos. por lo tanto, es mejor descargar todo en el cliente. en la mayoría de los casos, este único archivo no va a pasar el tamaño de 1mb de todos modos, probablemente mucho menos después de haber sido modificado y descomprimido. por lo tanto, FTW de un solo archivo. – vsync

46

Generalmente solo utiliza RequireJS en su forma de carga durante el desarrollo. Una vez que el sitio está listo y listo para su implementación, minimiza el código. La ventaja aquí es que RequireJS sabe exactamente cuáles son sus dependencias y, por lo tanto, puede minificar fácilmente el código en el orden correcto. Esto es lo que dice en la RequireJS website:

Una vez que haya terminado de hacer el desarrollo y desea implementar el código para sus usuarios finales, puede utilizar el optimizador para combinar archivos de JavaScript juntos y minify ella. En el ejemplo anterior, puede combinar main.js y helper/util.js en un archivo y minimizar el resultado.

+4

Sé que este es un hilo viejo, pero me encontré porque tenía dudas similares. Entonces, una pregunta de seguimiento, si no te importa, si finalmente unimos todo en un archivo para su implementación, entonces toda mi aplicación se carga de una vez en vez de poco a poco (a pedido). ¿No es esto contradictorio para AMD? –

+5

sí lo es, en cierto sentido. Pero AMD es más teórico, mientras que requirejs también se ocupa de problemas de rendimiento en el mundo real. Cargar cada módulo individualmente es definitivamente más limpio y más puro, pero llevará una eternidad :) –

+1

También puse esta pregunta en SO ver http://stackoverflow.com/questions/20515679/requirejs-to-bundle-or-not-to- paquete/20518314? noredirect = 1 # 20518314. Tal vez un punto medio entre los dos enfoques? –

11

Depende de su aplicación. Si estás haciendo una aplicación del lado del servidor con solo javascript modesto (menos de 100kb minificado) y luego opta por el agrupamiento total, probablemente estarás bien.

Pero si está haciendo una aplicación de Javascript y tiene un montón de código en ella, entonces sus necesidades serán diferentes.

Por ejemplo, en mi aplicación, incluyo todos los archivos principales. Hay jQuery, guión bajo, columna vertebral, mis archivos de aplicaciones principales, mi sistema de inicio de sesión de usuario, mi sistema de diseño, mis notificaciones y el sistema de chat, todos son parte de mi gran archivo inicial.

Pero también tengo muchos otros módulos que no forman parte del paquete inicial, que se cargan después de esos.

Los foros, el wiki, el wysiwyg, el selector de color, arrastrar/soltar, el calendario y algunos archivos de animación forman parte de la segunda categoría. Debe tomar decisiones razonables sobre lo que se usa comúnmente y lo que se necesita de inmediato frente a lo que se puede retrasar.

Si incluyo todo de inmediato puedo obtener un meg de Javascript por encima de lo normal, lo cual sería una locura y haría que el arranque inicial fuera inaceptablemente lento.

La segunda categoría comienza a descargar después de initSuccess el evento se desencadena desde el archivo inicial.

Pero la segunda categoría es más inteligente que la primera ya que carga lo que es más importante primero. Por ejemplo, si estás mirando el wiki, cargará el wiki antes de cargar el selector de color.

Cuestiones relacionadas