optimizar online minificar entrega comprimir codigo archivos javascript css optimization website performance

javascript - online - minify js



¿Cómo organizar la minificación y el empaquetado de archivos css y js para acelerar el sitio web? (11)

Estoy haciendo optimización de velocidad para mi aplicación de sitio web. Y encontré algunas prácticas para hacer eso. Por ejemplo, las mejores prácticas para acelerar su sitio web desde Yahoo. Entre ellos están:

  • Minificar JavaScript y CSS.
  • Minimice el número de solicitudes HTTP combinando varios archivos (css, js) en uno.

Mi pregunta es: ¿qué infraestructura, herramientas y proceso de construcción utilizas o puedes recomendar para realizar eso?

Gran fan de Dean Edwards / packer / myself: viene en una variedad de sabores.

Hago ASP.NET, entonces uso CruiseControl.NET con NAnt para mi proceso de compilación. Una parte de este proceso de compilación se comprime con YUICompressor que, en mi experiencia, es el mejor compresor que existe.

Si no hace ASP.NET, todavía existe el CruiseControl original con Ant que puede usar en la misma capacidad.

La razón por la que considero que esta es una configuración superior es porque a) todo lo tedioso está automatizado yb) si está probando en su propia máquina, no tiene que depurar una sola cadena larga de JS :)

He integrado la minificación a mi proceso de implementación. Lo hago en perl con paquetes JavaScript :: Minifier y CSS :: Minifier .

Durante mi desarrollo, quiero mantener el script expandido. Puse algunos comentarios en mi HTML para que mi secuencia de comandos sepa qué archivos poner para togetheer y minify:

<!--- MinifyJS[js/minified-1.js] --> <script src="..."></script> <script src="..."></script> <!-- end[js/minified-1.js] --> <!--- MinifyCSS[css/minified-1.css] --> <link ...>

Un par de expresiones regulares, y rápidamente obtengo una versión de "producción" con archivos minificados.

Los consejos de Yahoo son excelentes. Uso gomez para probar los resultados de los esfuerzos de optimización. La minificación es un buen paso. He encontrado que los impactos más grandes generalmente se pueden hacer ajustando la forma en que se unen las páginas (particularmente para reducir la cantidad de imágenes cortadas en pequeños fragmentos para reducir el número de solicitudes). De todos modos, este blog yahoo da un resumen bastante bueno de las herramientas de minificación. Normalmente me mantengo alejado de la ofuscación a menos que haya una razón de peso más allá de la patada de desempeño relativamente pequeña. Los pasos reales para instalar y usar una herramienta de minificación son relativamente sencillos.

O simplemente puede configurar su servidor HTTP en GZIP para comprimir todos los documentos de texto.

Puede usar el compresor YUI .

Puede comprimir JavaScript y CSS. Simplemente ejecútelo para todos sus archivos y luego conéctelos en un solo archivo ''paquete''. Puede hacerlo manualmente, escribir un Makefile o usar algún script para comprimir el "just-in-time" en la solicitud web, aunque es posible que desee almacenar en caché el archivo resultante.

Para comprimir todo antes de subirlo a la web, este programa es excelente tanto para CSS / JS / HTML:

http://www.w3compiler.com/

Incluso es posible seleccionar áreas para no comprimir, ya que no todos los códigos MVC en su marcado admiten la compresión.

Y guarda los archivos de copia de seguridad cada vez que comprime tus archivos, por lo que puedes descomprimirlos fácilmente con solo un clic.

Encontré que Minify es más útil para mis proyectos PHP. Muy fácil de usar, solo ahorra tiempo configurando la minimización, compresión y almacenamiento en caché de archivos CSS y JS manualmente. También tiene una característica de agrupación ordenada.

Algunas notas sobre el compresor YUI

  1. El compresor YUI genera sin saltos de línea mientras que Minify tiene algunos.
  2. Tenga cuidado si ha escapado de cadenas. Descubrí que el compresor YUI los deshace. Así que cadenas como "/" "se convierten en '''' ''''.