Cómo minimizar JS y CSS sobre la marcha/tiempo de ejecución, para que pueda mantener la estructura de código original en mis servidores si se minimiza en el tiempo de ejecución/vuelo.Cómo minimizar JS o CSS sobre la marcha
Es necesario system(); este
$ java-jar-yuicompressor x.y.z.jar
Si se me permite hablar con tanta libertad;
La minimización de un archivo JS/CSS tendría como objetivo que analizara más rápidamente (y también utilizara menos espacio en disco). Al minificarlo en tiempo de ejecución, ese beneficio se perdería por completo.
Quizás estoy equivocado en tu objetivo final, pero esto es lo que primero me viene a la mente.
Editar: publicado por @Ant lo aclaró para mí.
El archivo minidado de tiempo de ejecución está en caché, obviamente. Incluso entonces, en buenos sistemas, se minimiza al inicio del sitio web. Cuando tiene 258 archivos JS correctamente refactorizados y diseñados para su aplicación angular extremadamente grande, esto es obligatorio. Debe ser tiempo de ejecución para la depuración. Debug = true (dependiendo de su sistema), puede mostrarle los archivos verdaderos y permitir el paso. –
HTML5 Boilerplate viene con un práctico script 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.
Cuando se minimiza sobre la marcha, simplemente colóquelo en el archivo. Si cambia la fecha y hora de cualquier archivo fuente, minimícelo y vuelva a almacenarlo en la memoria caché. Trabajé durante años en todos mis proyectos. – Meglio
Assetic es un lindo 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 se debe combinar 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.
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 activos 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 el 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 la minimización, uno que no se ha mencionado todavía es JSMin.
"... en el archivo" debería estar en * fly *, creo? ;-) –
Vaya, buen lugar :-) –
Esto no responde la pregunta ni ofrece una buena solución. – Ligemer
Eso es exactamente lo que WebUtilities (para J2EE) hace. Aqui esta el link.
Se hace el minimizació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.
Eche un vistazo en caso de que le resulte interesante.
¿Algo como esto para un servidor basado en PHP? – ADTC
Tengo dudas de que esta locura de la minificación realmente marque 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 reducido tamaño de archivo que resulta de la minificación probablemente sea 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 utilice muchas secuencias de comandos 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 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 por si acaso es diferente de su copia de trabajo. El código modificado no funciona bien en ese sentido.
Mi opinión personal - comprime zlib sobre la marcha, 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 32MB 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 cuándo cambio a un campo diferente o cuando hago clic en enviar?)
A. - no es verdad. Por lo general, puede configurar minificador para mantener los comentarios de derechos de autor. Por ejemplo, vea la documentación de uglify. – Meglio
No estoy de acuerdo. Cuando las páginas se cargan, dejan de cargar archivos si el archivo que se está cargando es un script (a menos que el atributo async esté en uso). Si abre DevTools cuando se carga una página lenta, verá que está bloqueada porque un script no se está descargando rápidamente. Reducir el guión al tamaño ayuda de alguna manera. –
Como a la gente le gusta decir, usted estaba en el "lado equivocado de la historia". Minificación (un proceso en tiempo de ejecución, con la capacidad de ingresar al modo "depuración" ha demostrado ser necesario incluso para las aplicaciones más pequeñas.) Con la mayoría de las aplicaciones AngularJS tienen docenas o cientos de archivos JS, tiene que combinar/minificar. durante años. Debes actualizar tu queja para reflejar esto. –
Si tiene el control total de su configuración de Apache/Ngnix, una gran opción (en general) sería la de activar el módulo PageSpeed, en su caso con
Probé con la velocidad de página y a veces comprime, a veces no, otros dan un 404 ... Me rendí con esta solución – marcostvz
Si tu objetivo es hacer que tu JavaScript un poco menos legible, y hazlo en tiempo de ejecución, puedes 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 comprueba la 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?
Acabo de probar esta versión y genera un error JS si hay un simple comentario (//) en el JS original. Como no saltos de línea aquí, verificar m y comentario para visualización en http://imgur.com/a/TzM30 – err
Después de un montón de búsqueda y sitios optimizaciones verdaderamente recomiendo utilizar esta secuencia de comandos para 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>
Se comprimir todos los archivos CSS en uno y pasado en html, lo que reduce el número de solicitudes adicionales a cero. También puede crear su propio archivo compressed.css si lo prefiere y pegar estilos en html.
¡es genial si pudieras agregar cómo guardar en compressed.css y cargar eso! si lo hago, actualizaré – danielad
Si bien pegar el CSS en el código HTML efectivamente reduce la cantidad de solicitudes (con 1), también evita que el CSS se almacene en caché. Un buen meganismo de almacenamiento en caché reduce tanto el número de solicitudes como el tamaño de los documentos HTML. – DavidKunz
Por eso siempre debes medir lo que está cambiando. Si está limitando su ruta crítica, hay buenas posibilidades de que vea una reducción en la latencia percibida, aunque no esté almacenada en la memoria caché, especialmente en dispositivos móviles. –
¿Por qué no conservas las dos versiones? ¿Y usar Minified en producción y completo en desarrollo? –
+1 Louskan, la mejor práctica es mantener dos versiones. –
A veces puede tener sentido querer una forma de minimizar sobre la marcha. Por ejemplo, estoy buscando un código que pueda insertar en mi sistema de caché existente, así que solo necesito un script simple para minimizar una cadena de CSS/JS, y mi propio código se encargará del almacenamiento en caché. – orrd