optimizar-css-js-carga-rapida

Mejorando la carga de archivos CSS y JavaScript

Cada aplicación web tiene archivos CSS y JavaScript. Hoy en día, es común que la mayoría de las aplicaciones tengan muchos archivos CSS y JavaScript para que la aplicación sea atractiva e interactiva. Cada archivo CSS y JavaScript necesita un navegador para enviar una solicitud al servidor para obtener el archivo. Entonces, cuantos más archivos CSS y JavaScript tenga, más solicitudes deberá enviar el navegador, lo que afectará su rendimiento. Cada archivo tiene un tamaño de contenido y el navegador tarda en descargarlo. Por ejemplo, si tenemos 10 archivos CSS de 10 KB cada uno y 10 archivos JavaScript de 50 KB cada uno, el tamaño total del contenido de los archivos CSS es de 100 KB, y para JavaScript es de 500 KB a 600 KB para ambos tipos de archivos. Esto es demasiado, y el navegador tardará en descargarlos.

El rendimiento juega un papel vital en las aplicaciones web. Incluso Google cuenta el rendimiento en su indexación. No piense en un archivo que tiene unos pocos KB y tarda 1 ms en descargarse porque, en lo que respecta al rendimiento, se cuenta cada milisegundo. Lo mejor es optimizar, comprimir y almacenar en caché todo.

Optimización de CSS y JavaScript

En esta sección, analizaremos dos formas de optimizar nuestro CSS y JS, que son las siguientes:

  • Merging
  • Minifying

Merging

En el proceso de fusión, podemos fusionar todos los archivos CSS en un solo archivo, y se lleva a cabo el mismo proceso con archivos JavaScript, creando así un único archivo para CSS y JavaScript. Si tenemos 10 archivos para CSS, el navegador envía 10 solicitudes para todos estos archivos. Sin embargo, si los fusionamos en un solo archivo, el navegador enviará solo una solicitud y, por lo tanto, se guardará el tiempo necesario para nueve solicitudes.

Minifying

En el proceso de minifying, todas las líneas vacías, comentarios y espacios adicionales se eliminan de los archivos CSS y JavaScript. De esta manera, el tamaño del archivo se reduce y el archivo se carga rápidamente.

Por ejemplo, supongamos que tiene el siguiente código CSS en un archivo:

.header {
width: 1000px;
height: auto;
padding: 10px
}
/* mover contenedor a la izquierda */
.float-left {
float: left;
}
/* mover contenedor a la derecha */
.float-right {
float: right;
}

Después de minificar el archivo, tendremos un código CSS similar al siguiente:

.header{width:100px;height:auto;padding:10px}.floatleft{float:left}.float-right{float:right}

De manera similar para JavaScript, consideremos que tenemos el siguiente código en un archivo JavaScript:

/* Alert page load */
$(document).ready(function() {
alert("Page is loaded");
});
/* agregar tres numeros */
function addNumbers(a, b, c) {
return a + b + c;
}

Ahora, si el archivo anterior está minimizado, tendremos el siguiente código:

$(document).ready(function(){alert("Page is loaded")}); function addNumbers(a,b,c){return a+b+c;}

Puede observarse en los ejemplos anteriores que se eliminan todos los espacios en blanco innecesarios y las nuevas líneas. Además, coloca el código de archivo completo en una sola línea. Todos los comentarios de código se eliminan. De esta forma, el tamaño del archivo se reduce, lo que ayuda a que el archivo se cargue rápidamente. Además, este archivo consumirá menos ancho de banda, lo cual es útil si los recursos del servidor son limitados.

La mayoría de las aplicaciones de código abierto, como Magento, Drupal y WordPress, brindan soporte integrado o soportan la aplicación mediante complementos / módulos de terceros. Aquí, no cubriremos cómo combinar archivos CSS o JavaScript en estas aplicaciones, pero analizaremos algunas herramientas que pueden combinar archivos CSS y JavaScript.

Minify

Minify es un conjunto de bibliotecas completamente escritas en PHP. Minify admite la fusión y la minificación de archivos CSS y JavaScript. Su código está completamente orientado a objetos y espacio de nombres, por lo que puede integrarse en cualquier marco actual o propietario.

La página de inicio de Minify se encuentra en http://minifier.org. También está alojado en GitHub en https://github.com/matthiasmullie/ minify. Es importante tener en cuenta que la biblioteca Minify usa una biblioteca de convertidor de ruta, que está escrita por el mismo autor. La biblioteca del convertidor de ruta se puede descargar desde https://github.com/ matthiasmullie / path-converter. Descargue esta biblioteca y colóquela en la misma carpeta que las bibliotecas de minify.

Ahora, creemos un pequeño proyecto que usaremos para minificar y fusionar (merging) archivos CSS y JavaScript. La estructura de carpetas del proyecto será como en la siguiente captura de pantalla:

minify-merging-css-js-playmaax Optimización de CSS y JavaScript

En la captura de pantalla anterior, se muestra la estructura completa del proyecto. El nombre del proyecto es minify. La carpeta css tiene todos nuestros archivos CSS, incluidos los minificados o fusionados. Del mismo modo, la carpeta js tiene todos nuestros archivos JavaScript, incluidos los minificados o fusionados. La carpeta libs tiene la biblioteca Minify junto con la biblioteca Converter. Index.php tiene nuestro código principal para minificar y combinar archivos CSS y JavaScript.

La carpeta de datos en el árbol del proyecto está relacionada con la minificación de JavaScript. Como JavaScript tiene palabras clave que requieren un espacio antes y después de ellas, estos archivos .txt se utilizan para identificar estos operadores.

Entonces, comencemos minimizando nuestros archivos CSS y JavaScript usando el siguiente código en index.php:

include('libs/Converter.php');
include('libs/Minify.php');
include('libs/CSS.php');
include('libs/JS.php');
include('libs/Exception.php');
use MatthiasMullie\Minify;
/* Minify CSS */
$cssSourcePath = 'css/styles.css';
$cssOutputPath = 'css/styles.min.css';
$cssMinifier = new Minify\CSS($cssSourcePath);
$cssMinifier->minify($cssOutputPath);
/* Minify JS */
$jsSourcePath = 'js/app.js';
$jsOutputPath = 'js/app.min.js';
$jsMinifier = new Minify\JS($jsSourcePath);
$jsMinifier->minify($jsOutputPath);

El código anterior es simple. Primero, incluimos todas nuestras bibliotecas requeridas. Luego, en el bloque Minify CSS, creamos dos variables de ruta: $cssSourcePath, que tiene la ruta al archivo CSS que necesitamos minificar, y $cssOutputPath, que tiene la ruta al archivo CSS minificado que se generará.

Después de esto, instanciamos un objeto de la clase CSS.php y pasamos el archivo CSS que necesitamos minificar. Finalmente, llamamos al método minify de la clase CSS y pasamos la ruta de salida junto con el nombre de archivo, lo que generará el archivo requerido para nosotros.

La misma explicación se aplica al proceso minificador JS.

Si ejecutamos el código PHP anterior, todos los archivos están en su lugar y todo funciona bien, entonces se crearán dos nuevos nombres de archivo: styles.min.css y app.min.js. Estas son las nuevas versiones minimizadas de sus archivos originales.

Ahora, usemos Minify para fusionar múltiples archivos CSS y JavaScript. Primero, agregue algunos archivos CSS y JavaScript a las carpetas respectivas en el proyecto. Después de esto, solo necesitamos agregar un pequeño código al código actual. En el siguiente código, omitiré incluir todas las bibliotecas, pero estos archivos deben cargarse siempre que necesite usar Minify:

/* Minify CSS */
$cssSourcePath = 'css/styles.css';
$cssOutputPath = 'css/styles.min.merged.css';
$cssMinifier = new Minify\CSS($cssSourcePath);
$cssMinifier->add('css/style.css');
$cssMinifier->add('css/forms.js');
$cssMinifier->minify($cssOutputPath);
/* Minify JS */
$jsSourcePath = 'js/app.js';
$jsOutputPath = 'js/app.min.merged.js';
$jsMinifier = new Minify\JS($jsSourcePath);
$jsMinifier->add('js/checkout.js');
$jsMinifier->minify($jsOutputPath);

Ahora, eche un vistazo al código resaltado. En la parte CSS, guardamos el archivo minificado y fusionado como style.min.merged.css, pero el nombre no es importante; todo depende de nuestra propia elección.

Ahora, simplemente usaremos el método add de los objetos $cssMinifier y $jsMinifier para agregar nuevos archivos y luego llamar a minify. Esto hace que todos los archivos adicionales se fusionen en el archivo inicial y luego se minimicen, generando así un único archivo fusionado y minimizado.

Grunt

Según su sitio web oficial, Grunt es un corredor de tareas de JavaScript. Automatiza ciertas tareas repetitivas para que no tenga que trabajar repetidamente. Es una herramienta increíble y es ampliamente utilizada entre los programadores web.

Instalar Grunt es muy fácil. Aquí, lo instalaremos en MAC OS X, y el mismo método se usa para la mayoría de los sistemas Linux, como Debian y Ubuntu.

Grunt requiere Node.js y npm. La instalación y configuración de Node.js y npm está fuera del alcance de este libro, por lo que para este libro, asumiremos que estas herramientas están instaladas en su máquina o que puede buscarlas y descubrir cómo instalarlas.

Si Node.js y npm están instalados en su máquina, simplemente inicie el siguiente comando en su terminal:

sudo npm install –g grunt

Esto instalará Grunt CLI. Si todo va bien, el siguiente comando le mostrará la versión de Grunt CLI:

grunt –version

La salida del comando anterior es grunt-cli v0.1.13; al momento de escribir este libro, esta versión está disponible.

Grunt le proporciona una línea de comandos, que le permite ejecutar un comando Grunt. Un proyecto Grunt requiere dos archivos en el árbol de archivos del proyecto. Uno es package.json, que es usado por npm y enumera Grunt y los complementos de Grunt que el proyecto necesita como DevDependencies.

El segundo archivo es GruntFile, que se almacena como GruntFile.js o GruntFile.coffee y se usa para configurar y definir tareas de Grunt y cargar plugins de Grunt.

Ahora, utilizaremos el mismo proyecto anterior, pero nuestra estructura de carpetas será la siguiente:

grunt-playmaax Optimización de CSS y JavaScript

Ahora, abra la terminal en la raíz de su proyecto y emita el siguiente comando:

sudo npm init

Esto generará el archivo package.json haciendo algunas preguntas. Ahora, abra el archivo package.json y modifíquelo para que el contenido de los archivos package.json finales tenga un aspecto similar al siguiente:

{
"name" : "grunt" //Name of the project
"version : "1.0.0" //Version of the project
"description" : "Minify and Merge JS and CSS file",
"main" : "index.js",
"DevDependencies" : {
"grunt" : "0.4.1", //Version of Grunt
//Concat plugin version used to merge css and js files
"grunt-contrib-concat" : "0.1.3"
//CSS minifying plugin
"grunt-contrib-cssmin" : "0.6.1",
//Uglify plugin used to minify JS files.
"grunt-contrib-uglify" : "0.2.0"
},
"author" : "Altaf Hussain",
"license" : ""
}

Agregué comentarios a diferentes partes del archivo package.json para que sea fácil de entender. Tenga en cuenta que para el archivo final, eliminaremos los comentarios de este archivo.

Se puede ver que en la sección DevDependencies, agregamos tres complementos Grunt utilizados para diferentes tareas.

El siguiente paso es agregar GruntFile. Creemos un archivo llamado GruntFile.js en nuestra raíz del proyecto similar al archivo package.json. Coloque los siguientes contenidos en GruntFile:

module.exports = function(grunt) {
/*Load the package.json file*/
pkg: grunt.file.readJSON('package.json'),
/*Define Tasks*/
grunt.initConfig({
concat: {
css: {
src: [
'css/*' //Load all files in CSS folder
],
dest: 'dest/combined.css' //Destination of the final combined file.
}, //End of CSS
js: {
src: [
'js/*' //Load all files in js folder
],
dest: 'dest/combined.js' //Destination of the final combined file.
}, //End of js
}, //End of concat
cssmin: {
css: {
src : 'dest/combined.css',
dest : 'dest/combined.min.css'
}
},//End of cssmin
uglify: {
js: {
files: {
'dest/combined.min.js' : ['dest/combined.js'] // destination
Path : [src path]
}
}
} //End of uglify
}); //End of initConfig
grunt.loadNpmTasks('grunt-contrib-concat');
grunt.loadNpmTasks('grunt-contrib-uglify');
grunt.loadNpmTasks('grunt-contrib-cssmin');
grunt.registerTask('default', ['concat:css', 'concat:js',
'cssmin:css', 'uglify:js']);
}; //End of module.exports

El código anterior es simple y se explica por sí mismo, y los comentarios se agregan cuando es necesario. En la parte superior, cargamos nuestro archivo package.json, y después de esto, definimos diferentes tareas junto con sus archivos src y de destino. Recuerde que la sintaxis de src y de destino de cada tarea es diferente y depende del complemento. Después del bloque initConfig, cargamos diferentes complementos y tareas npm y luego los registramos con GRUNT.

Ahora, ejecutemos nuestras tareas.

Primero, combinemos archivos CSS y JavaScript y almacénelos en sus respectivos destinos definidos en nuestra lista de tareas en GruntFile mediante el siguiente comando:

grunt concat

Después de ejecutar el comando anterior en su terminal, si ve un mensaje como Listo, sin errores, entonces la tarea se completa con éxito.

De la misma manera, minimicemos nuestro archivo css usando el siguiente comando:

grunt cssmin

Luego, minimizaremos nuestro archivo JavaScript usando el siguiente comando:

grunt uglify

Ahora, puede parecer mucho trabajo usar Grunt, pero proporciona algo de Otras características que pueden facilitar la vida de un desarrollador. Por ejemplo, ¿qué pasa si necesita cambiar sus archivos JavaScript y CSS? ¿Deberías ejecutar todos los comandos anteriores nuevamente? No, Grunt proporciona un complemento de observación, que activa y ejecuta todos los archivos en las rutas de destino en las tareas, y si se produce algún cambio, ejecuta las tareas automáticamente.

Para un aprendizaje más detallado, eche un vistazo al sitio web oficial de Grunt en http://gruntjs.com/.

0 comentarios

Dejar un comentario

¿Quieres unirte a la conversación?
Siéntete libre de contribuir!

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Este sitio usa Akismet para reducir el spam. Aprende cómo se procesan los datos de tus comentarios.