Cómo eliminar módulos innecesarios de jQuery

jQuery es sin duda la librería de JavaScript más popular, (casi) todos los sitios web de este planeta la utilizan. Es por esto que se podría decir que es como un medicamento de amplio espectro, cuenta con muchas funciones para todo tipo de casos. 

Sin embargo, cuando trabajamos en un sitio web más sencillito, lo suyo es usar solo algunas de estas funciones. Por lo tanto, sería más eficiente si pudiéramos ejecutar solo esa función que necesitamos y no todas las demás funciones que vienen por defecto. Es posible excluir algunos módulos de jQuery que no son necesarios en tu proyecto. Vamos a ver cómo hacer esto... 

Primero, necesitamos instalar ciertas herramientas que nos harán falta para llevar a cabo esto. Estas herramientas son Git, Grunt y Node.js. Si eres de macOS, la forma más fácil de instalar todas estas herramientas es a través de un Administrador de paquetes de macOS llamado Homebrew. 

Instalar Homebrew 

Para ello, abre el Terminal y ejecuta el siguiente comando para instalar Homebrew. Como he comentado antes, Homebrew nos permitirá instalar las demás herramientas más fácilmente. 

ruby -e "$(curl -fsSL https://raw.github.com/mxcl/homebrew/go)"

Instalar Git 

Una vez completada la instalación de Homebrew, ejecuta el siguiente comando para instalar Git. 

brew install git

Instalar Node.js 

Ejecuta la siguiente línea para instalar Node.js 

brew install node

Instalar Grunt 

Por último, necesitamos instalar Grunt. Ejecuta este comando. 

npm install -g grunt-cli 

Si usas Windows, hay un Administrador de paquetes similar llamado Chocolatey que puede utilizar para instalar los paquetes anteriores de manera similar. 

Jquery a medida 

Actualmente, jQuery permite excluir los siguientes módulos. 

Modulos Comando Descripción
Ajax -ajax Esto define la API jQuery AJAX que incluye jQuery.ajax(). jQuery.get() y .load()
CSS -css Esto define las funciones de jQuery CSS Category que incluye .addClass(), .css() y .hasClass ().
Deprecated -deprecated Esto define los módulos o funciones en desuso.
Event Alias -event-alias Esto define las funciones de evento como .click(), .focus() y .hover().
Dimensions -dimesions Esto define las funciones de tamaño de CSS como .height(), .innerHeight(), y .innerWidth().
Effects -effects Esto define las funciones que establecen los efectos de animación, como .slideToggle(), .animate() y .fadeIn()
Offset -offset Esto especifica las funciones que recuperan posiciones. Dichas funciones incluyen .offset() y .position().

Antes de poder personalizar jQuery, necesitamos clonarlo desde el repositorio de Github ejecutando este comando en la Terminal. 

git clone git://github.com/jquery/jquery.git

Luego, debes encontrar una nueva carpeta llamada jquery creada en tu carpeta de usuario. Navega a ese directorio con este comando. 

cd jquery

Luego, necesitamos instalar módulos de Node para ejecutar nuestro proyecto. 

npm install

Luego construimos nuestro jQuery simplemente ejecutando el comando Grunt (y presionamos enter). 

grunt

A continuación, nuestro jQuery se guardará en la carpeta dist /. Este jQuery está, en este punto, configurado con todas las funcionalidades, por ello, el tamaño es bastante grande, 265kb. La versión minificada está a 83kb. 

Eliminar módulos 

Digamos que queremos eliminar los módulos Effect de jQuery; Podemos ejecutar este comando. 

grunt custom:-effects

Si echamos un vistazo al tamaño del archivo, ahora se reduce a 246kb. 

Para excluir varios módulos, separe cada módulo con una coma, por ejemplo: 

grunt custom:-effects,-ajax,-deprecated

Y esto disminuirá el archivo jQuery aún más. En nuestro caso aquí, se reduce a solo 207kb

COMPARTE ESTE ARTÍCULO

ENVIAR A UN AMIGO
COMPARTIR EN FACEBOOK
COMPARTIR EN TWITTER
COMPARTIR EN GOOGLE +
¡SÉ EL PRIMERO EN COMENTAR!
Conéctate o Regístrate para dejar tu comentario.