renderizado - ¿Cuál es el mejor método para reducir el tamaño de mis archivos Javascript y CSS?
quitar el javascript que bloquea la visualización de contenido wordpress plugin (17)
Daría una prueba de manejo a los nuevos optimizadores de tiempo de ejecución en ASP.Net publicados en http://www.codeplex.com/NCOptimizer
Al trabajar con archivos grandes y / o muchos Javascript y CSS, ¿cuál es la mejor manera de reducir el tamaño de los archivos?
En lugar de modificar sus archivos directamente, recomendaría comprimirlos. La mayoría de los clientes lo admiten.
Creo que encontrarás que esto es más fácil e igual de efectivo.
Para javascript, uso el JavaScript Packer de Dean Edwards . Se ha portado a .NET, perl, php4, php5, WSH, e incluso hay un complemento aptana.
El embalaje Javascript viene en algunos sabores: algunos simplemente eliminan los comentarios y el espacio en blanco, otros cambian los nombres de las variables para ser concisos, y otros, bueno, ni siquiera sé lo que hacen, pero la salida es pequeña. La compresión de gama alta funciona con la función eval (), que impone una carga adicional al cliente, por lo que si sus scripts son particularmente complicados o si está diseñando hardware más lento, téngalo en cuenta. el empaquetador de Javascript le brinda la opción para qué nivel de compresión desea usar.
Para CSS, lo mejor que puede hacer es quitar espacio en blanco y comentarios. Afortunadamente eso significa que puede lograr eso con una función de una línea:
function compressCSS($css) {
return
preg_replace(
array(''@/s/s+@'',''@(/w+:)/s*([/w/s,#]+;?)@''),
array('' '',''$1$2''),
str_replace(
array("/r","/n","/t",'' {'',''} '','';}''),
array('''','''','''',''{'',''}'',''}''),
preg_replace(''@//*[^*]*/*+([^/][^*]*/*+)*/@'', '''', $css)
)
)
;
}
Si bien esa función y el empaquetador de Javascript reducirán el tamaño del archivo de los archivos individuales, para obtener el mejor rendimiento de su sitio, también querrá reducir el número de solicitudes HTTP que realice. Cada archivo Javascript y CSS es una solicitud separada, por lo que combinarlos en un solo archivo será el resultado óptimo. En lugar de tratar de mantener un solo archivo JS bohemio, puede utilizar el programa / técnica que he escrito en mi blog (plug self descarado) en http://spadgos.com/?p=32
El programa básicamente lee un archivo tipo "script de compilación" que simultáneamente combinará y comprimirá múltiples archivos Javascript y CSS en uno (de cada uno) para usted (o más, si lo desea). Hay varias opciones para la salida y visualización de todos los archivos. Hay un informe más grande allí, y la fuente está disponible gratuitamente.
Shrinksafe puede ayudar: http://shrinksafe.dojotoolkit.org/ Lo estamos usando y hace un muy buen trabajo. Lo ejecutamos a partir de una compilación de hormigas para cuando empaquetamos nuestra aplicación web.
Minify parece ser una de las formas más fáciles de reducir Javascript.
Activar zip en el nivel del servidor web también puede ayudar.
Dojo Shrinksafe es un compresor de Javascript que utiliza un intérprete JS real, por lo que no romperá tu código. Los otros pueden funcionar bien, pero Shrinksafe es bueno para usar en un script de compilación, ya que no debería tener que volver a probar el script comprimido.
Ayudando al compresor YUI le da un buen consejo sobre cómo puede modificar sus guiones para lograr ahorros aún mejores.
El compresor YUI tiene mi voto, por la simple razón de que en lugar de simplemente realizar transformaciones de expresiones regulares en el código, realmente construye un árbol de análisis del código, similar a un intérprete de Javascript, y luego lo comprime de esa manera. Por lo general, es muy cuidadoso sobre cómo maneja la compresión de los identificadores.
Además, tiene un modo de compresión CSS, con el que no he jugado tanto.
YUI Compressor hace un muy buen trabajo al comprimir Javascript y CSS.
Google aloja un puñado de archivos de biblioteca de JavaScript precomprimidos que puede incluir en su propio sitio. Google no solo proporciona el ancho de banda para esto, sino que, según la mayoría de los algoritmos de almacenamiento en caché de archivos del navegador, si el usuario ya ha descargado el archivo de Google para otro sitio, no tendrá que volver a hacerlo por el suyo. Una pequeña bonificación para algunas de las más de 90k bibliotecas de JS.
La compresión y la minificación (eliminación del espacio en blanco) son un comienzo.
Adicionalmente:
Combina todo tu JavaScript y CSS incluye en un solo archivo. De esta forma, el navegador puede descargar la fuente en una única solicitud al servidor. Haga esta parte de su proceso de compilación.
Active el almacenamiento en caché en el nivel del servidor web utilizando el encabezado http de control de caché . Establezca el vencimiento en un valor grande (como un año) para que el navegador solo descargue la fuente una vez. Para permitir ediciones futuras, incluya un número de versión en la cadena de consulta, como este:
<script src="my_js_file.js?1.2.0.1" type="text/javascript"></script>
<link rel="stylesheet" type="text/css" href="my_css_file.css?3.1.0.926" />
Estoy sorprendido de que nadie sugiriera gzip de tu código. ¡Una recta ~ 50% de ahorro allí!
Pruebe las herramientas de compresor web de Boryi para comprimir su archivo HTML estándar (sin código JavaScript ni código CSS incrustado, pero puede vincularse o importarse), código JavaScript (terminado correctamente con;) y código CSS.
Encontré que JSCompress es una buena manera no solo de minimizar un JavaScript, sino también de combinar varios scripts. Útil si solo está usando los diversos scripts una vez. Se guardó el 70% antes de la compresión (y algo similar después de la compresión también).
Recuerde volver a agregar en los avisos de derechos de autor después.
Además de utilizar la compresión del lado del servidor, la codificación inteligente es la mejor manera de mantener bajos los costos de ancho de banda. Siempre puede usar herramientas como JavaScript Packer de Dean Edward , pero para CSS, tómese el tiempo para aprender CSS Shorthand . Ej. Uso:
background: #fff url(image.gif) no-repeat top left;
...en lugar de:
background-color: #fff;
background-image: url(image.gif);
background-repeat: no-repeat;
background-position: top left;
Además, usa la naturaleza en cascada de CSS. Por ejemplo, si sabe que su sitio usará una familia de fuentes, defina eso para todos los elementos que están en la etiqueta de cuerpo como este:
body{font-family:arial;}
Otra cosa que puede ayudar es incluir su CSS y JavaScript como archivos en lugar de en línea o al principio de cada página. De esta forma, su servidor solo debe servirles una vez al navegador después de que ese navegador vaya desde el caché.
Incluyendo Javascript
<script type="text/javascript" src="/scripts/loginChecker.js"></script>
Incluyendo CSS
<link rel="stylesheet" href="/css/myStyle.css" type="text/css" media="All" />
Vea la pregunta: El mejor compresor de javascript
Dependiendo de si va a descomprimir o no sus archivos JavaScript, puede cambiar su elección de compresor. (Actualmente Packer no es la mejor opción si también vas a gzip, pero mira la pregunta anterior para obtener la mejor respuesta actual)
CssTidy es el mejor optimizador de CSS del que tengo conocimiento. (De manera configurable) elimina comentarios, elimina espacios en blanco, reescribe para usar las muchas reglas de taquigrafía mencionadas , etc. Compresión del resultado también ayuda, como otros lo han mencionado.
La relación de compresión puede ser bastante dramática y te permite comentar tu CSS extensamente sin preocuparte por el tamaño del archivo.
Desafortunadamente, este nivel de preprocesamiento interactúa con algunos de los populares "ataques de CSS" en formas impredecibles (o predecibles pero no deseadas). Algunos funcionan , otros no, y algunos requieren ajustes de configuración que reducen el nivel de compresión para otras cosas (especialmente comentarios).