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