Fusionar y comprimir archivos JS y CSS del lado del servidor

Autor：Eve Cole Fecha de actualización：2010-06-14 18:58:46

2Fusionar y comprimir archivos JavaScript y CSS en el lado del servidor

Una de las mejores prácticas más importantes para la optimización del rendimiento web es reducir las solicitudes HTTP y también es la regla más importante en YSlow. Las soluciones para reducir las solicitudes HTTP incluyen la combinación de archivos JavaScript y CSS, Sprites CSS, mapas de imágenes y el uso de URI de datos para codificar imágenes. Los Sprites CSS y el mapeo de imágenes ahora están ampliamente disponibles, pero debido a que IE6 e IE7 no admiten URI de datos y tienen problemas de rendimiento, esta tecnología no se ha utilizado ampliamente. En la actualidad, la cantidad de archivos JavaScript y CSS en la mayoría de las páginas web es la misma que cuando se desarrollaron. Una pequeña cantidad de páginas web se fusionarán localmente de acuerdo con la situación real. Muchas de estas fusiones se realizan de forma selectiva y manual. Cada nueva fusión debe realizarse localmente nuevamente. Completar y cargar en el servidor es relativamente casual y engorroso, y la compresión del mismo archivo tiene una situación similar. Al utilizar la combinación y compresión del lado del servidor, podemos hacer que la granularidad del archivo sea lo más pequeña posible de acuerdo con la lógica de desarrollo y usar las reglas de URL en la página web para fusionar y comprimir archivos automáticamente, lo que será bastante flexible y eficiente.

Controlador combinado YUI

En julio de 2008, YUI Team anunció que proporcionaría el servicio Combo Handler para los componentes YUI JavaScript en YAHOO! Combo Handler es un módulo de Apache desarrollado por Yahoo!, que permite a los desarrolladores combinar de manera simple y conveniente archivos JavaScript y CSS a través de URL, reduciendo así en gran medida la cantidad de solicitudes de archivos. Por ejemplo, usar el componente Editor de texto enriquecido de YUI2 en una página requiere introducir múltiples archivos JavaScript. Los métodos comunes son los siguientes:

Después de utilizar el servicio Combo Handler, el código anterior se puede escribir como:

Además de reducir ligeramente la legibilidad del código, el uso del servicio Combo Handler reduce en gran medida la cantidad de solicitudes HTTP y también reduce la cantidad de código URL, lo cual es crucial para la optimización del rendimiento web. Por lo tanto, a partir de YUI 2.6.0, su componente principal, YUI Loader, tiene una función de manejo combinado incorporada. Es decir, cuando se usa YUI Loader, al configurar el atributo de combinación, se pueden cargar múltiples archivos JavaScript o CSS en el archivo. forma de utilizar el servicio Combo Handler Combined, siempre que el servidor de archivos estático admita Combo Handler. En YUI, cuando combine está configurado en verdadero, la CDN utiliza de forma predeterminada Yahoo! CDN ( http://yui.yahooapis.com ), por lo que no hay problema. Esta es una de las partes más encantadoras de YUI.

Desafortunadamente, la velocidad de http://yui.yahooapis.com en China no es muy buena. Originalmente, Yahoo China proporcionaba http://cn.yui.yahooapis.com/ , pero aún no proporciona el servicio Combo Handler. Al mismo tiempo, debido a varias razones, sus actualizaciones se han detenido desde YUI 2.7.0. Lo peor es que, aunque se informa que el módulo Apache desarrollado por Yahoo! para admitir Combo Handler es de código abierto, sigue siendo una tecnología privada, al menos por ahora. Para usarlo, debe implementar funciones similares usted mismo, por lo que existen. No hay muchas aplicaciones de tecnologías similares en China.