php - superior - optimizar la entrega de css
Cómo minificar JS o CSS sobre la marcha (10)
Creo que su pregunta debería ser: ¿Cómo puedo actualizar mis servidores en vivo de manera confiable y repetible? Lo que necesita es un script de despliegue automático. Personally prefiero Fabric , pero hay otras herramientas disponibles.
Una secuencia de comandos de implementación automática le permitirá ejecutar un único comando que irá a los servidores en vivo y actualizará el código fuente, ejecutará todos los pasos de implementación (como minimizar el javascript) y reiniciará el servidor web.
Realmente no desea ministrar los archivos javascript o css sobre la marcha, debe hacerlo una vez en la implementación y luego tener una variable en su código que especifique si se trata de una implementación en vivo o no. Si la variable es verdadera, entonces sus enlaces a los archivos deberían ser enlaces a la versión minimizada, si es falsa, entonces deberían ser las versiones normales.
Hay una serie de programas que realizan minimización, uno que aún no se ha mencionado es JSMin .
Cómo minimizar JS y CSS sobre la marcha / tiempo de ejecución, para que pueda mantener la estructura del código original en mis servidores si se minimiza en el tiempo de ejecución / vuelo.
Después de una gran cantidad de búsquedas y optimizaciones de sitios, realmente recomiendo usar esta secuencia de comandos para los archivos CSS:
<style>
<?php
$cssFiles = array(
"style.css",
"style2.css"
);
$buffer = "";
foreach ($cssFiles as $cssFile) {
$buffer .= file_get_contents($cssFile);
}
$buffer = preg_replace(''!//*[^*]*/*+([^/][^*]*/*+)*/!'', '''', $buffer);
$buffer = str_replace('': '', '':'', $buffer);
$buffer = str_replace(array("/r/n", "/r", "/n", "/t", '' '', '' '', '' ''), '''', $buffer);
echo($buffer);
?>
</style>
Comprime todos los archivos css en uno y lo pasa a html, reduciendo a cero el número de solicitudes adicionales. También puede crear su propio archivo compressed.css si lo prefiere y pegar estilos en html.
Dudo que esta locura de la minificación realmente haga una gran diferencia si el JS se envía con compresión zlib.
En primer lugar, el espacio en blanco se comprime extremadamente bien, por lo que el tamaño de archivo reducido que resulta de la minificación es probablemente solo un problema importante con bibliotecas grandes como jQuery (que probablemente debería ser servido desde una CDN a menos que necesite una versión pirateada).
Seconfly, JS generalmente es almacenado en caché por el cliente, por lo tanto, a menos que use muchos scripts diferentes en páginas diferentes, la mayoría de las cargas de página no marcarán la diferencia.
Los problemas con la minificación y por qué no lo hago (excepto con cosas como jQuery): A) Elimina los comentarios, por lo tanto, a menos que los vuelva a agregar, se perderán cosas como avisos de derechos de autor. Esto podría provocar una violación de la licencia, ya que incluso muchas licencias de OSS requieren que el copyright esté intacto.
B) Cuando hay un problema, es bueno ver el código real que el servidor está sirviendo solo en caso de que sea diferente a su copia de trabajo. El código modificado no funciona bien en ese sentido.
Mi opinión personal: zlib compress on the fly, sí. minify: solo para archivos realmente grandes.
Rendimiento analizando el JS en el intérprete, tal vez si el navegador se ejecuta en un Apple Performa con 32 MB de RAM. No creo que suponga una diferencia real en el mundo con la mayoría de los guiones. Las páginas que son lentas suelen ser lentas debido a un código demasiado ineficiente que se ejecuta al mismo tiempo o que realizan demasiadas solicitudes a servidores sobrecargados. (Por ejemplo, ¿realmente necesita verificar la disponibilidad del nombre de usuario a medida que escribo cada letra? ¿No puede verificar cuando cambio a un campo diferente o cuando hago clic en enviar ???;)
Eso es exactamente lo que hace WebUtilities (para J2EE). Aqui esta el link.
Hace la minificación y la fusión sobre la marcha. También tiene almacenamiento en caché para evitar volver a ejecutar la minificación o el reprocesamiento de un recurso si el recurso no se modifica. También ayuda con las siguientes optimizaciones.
- Sirve múltiples archivos JS o CSS en una sola solicitud
- El encabezado Añadir caduca para JS, CSS y los archivos de imagen que se almacenarán en caché con el navegador
- Minify JS, archivos CSS sobre la marcha
- Minificar bloques de código CSS y JS en línea
- Agregue Codificación de caracteres a su respuesta
- Contenido comprimido del servidor (gzip / compress / deflate)
- Respuestas de caché para acelerar la carga evitando el reprocesamiento
Por favor, eche un vistazo en caso de que lo encuentre interesante.
Si puedo hablar tan libremente;
La reducción de un archivo JS / CSS tendría como objetivo que analizara más rápidamente (y también utilizara menos espacio en el disco). Al minificarlo en tiempo de ejecución, ese beneficio se perdería por completo.
Tal vez estoy equivocado en tu objetivo final, pero esto es lo que viene a mi mente al principio.
Editar : la publicación de @Ant me lo aclaró.
Si su objetivo es hacer que su JavaScript sea ligeramente menos legible, y hacerlo en tiempo de ejecución, puede mantenerlo muy, muy simple. Con solo tres líneas de código, puede recorrer un largo camino hacia la minificación total en unos pocos milisegundos.
// make it into one long line
$code = str_replace(array("/n","/r"),'''',$code);
// replace all multiple spaces by one space
$code = preg_replace(''!/s+!'','' '',$code);
// replace some unneeded spaces, modify as needed
$code = str_replace(array('' {'','' }'',''{ '',''; ''),array(''{'',''}'',''{'','';''),$code);
Esto no hace ninguna comprobación de sintaxis en absoluto. El código puede quedar invalidado después de usar esto. Compruebe el final de las líneas en su JS, es un '';'' ¿falta algo?
Si tiene el control total de su configuración de Apache / Ngnix, una buena opción (en general) sería habilitar el módulo PageSpeed , en su caso con
- js-minify filter https://developers.google.com/speed/pagespeed/module/filter-js-minify
- css-rewrite filter https://developers.google.com/speed/pagespeed/module/filter-css-rewrite
HTML5 Boilerplate viene con una práctica secuencia de comandos de compilación que comprime JS, CSS, imágenes y mucho más. ¡Echale un vistazo!
Como se explica en las otras respuestas, la minificación "real" sobre la marcha (comprimir dinámicamente un archivo cada vez que se solicita) no sería una buena idea.
Assetic es un buen proyecto que ayuda a organizar recursos como CSS y Javascript, incluida la minificación. Vea here para una introducción.
En general, la minificación del tiempo de ejecución siempre debe combinarse con el almacenamiento en caché sólido en el lado del servidor y el uso de cachés de cliente y proxy en el camino hacia el navegador.