Home-theater-designers
Todos hemos estado allí, aprendiste cómo crear un sitio web increíble , pero una vez que lo publica, es insoportablemente lento.
Minificar su javascript es una forma de acelerar los tiempos de respuesta del sitio web (junto con comprimiendo HTML ) y, afortunadamente para ti, es un proceso sencillo. Hoy te mostraré todo lo que necesitas saber.
¿Qué significa minificar?
El proceso de minificación (o minificando ) es un concepto simple. Cuando escribe código en JavaScript o en cualquier otro idioma, hay muchas características que solo se requieren para que el código sea más fácil de entender para los humanos: a las computadoras no les importa cómo llame a sus variables o cuánto espacio hay entre corchetes, por ejemplo.
Al minimizar el código, puede reducir drásticamente el tamaño de su archivo. Por lo tanto, los usuarios podrán descargar más rápidamente un archivo más pequeño. Si solo está escribiendo una o dos líneas de JavaScript, probablemente no habrá una mejora notable. Sin embargo, si está escribiendo mucho código o utilizando bibliotecas grandes como jQuery, se pueden lograr fácilmente aumentos notables en el rendimiento y tamaños de archivo drásticamente reducidos.
Si carga código desde una CDN externa, como Bibliotecas alojadas en Google , usó código minificado.
cómo conectar alexa a wifi sin aplicación
¿Qué aspecto tiene el código minificado?
Veamos algunos ejemplos. Es difícil ver el impacto de la minificación en bases de código pequeñas, por lo que me disculpo de antemano por su gran extensión.
Aquí hay algunos no minificado JavaScript de nuestra guía para usar JSON con Python y JavaScript:
|_+_|
Aquí está el código minificado:
|_+_|Esta versión reducida del código es 39 por ciento menor. En este ejemplo, los nombres de las variables siguen siendo los mismos, pero se han eliminado todos los espacios en blanco y los comentarios.
Aquí hay otro ejemplo de nuestra guía de jQuery:
|_+_|Aquí está el código minificado:
|_+_|Esta vez solo hubo un 26 por ciento reducción: eso sigue siendo muy bueno para un bloque de código tan pequeño.
Aquí hay un ejemplo final de nuestra guía de Javascript y DOM:
|_+_|Note como hay mucho de comentarios y espacios en blanco. La versión minificada redujo el 52 por ciento :
Windows 10 Update 100 uso del disco|_+_|
Estos son los tamaños de algunas bibliotecas de JavaScript comunes en comparación con sus versiones minimizadas:
- Highcharts: 1 MB> 201 KB
- jQuery: 270 KB> 90 KB
- MooTools: 164 KB> 93 KB
Algunas de estas bibliotecas muestran una reducción de tamaño significativa cuando se comprimen ( ~ 80 por ciento ), mientras que otros no son tan buenos ( ~ 40 por ciento ). Dicho esto, cualquier ahorro hará que su sitio web sea más rápido para sus usuarios y reducirá la tensión en su servidor web.
¿Cómo se minimiza?
Ahora que sabe cómo funciona y cómo se ve, profundicemos en cómo hacerlo. ¡No se preocupe, no es necesario modificar manualmente su código en absoluto! Hay una variedad de herramientas disponibles gratuitamente que manejan el proceso por usted.
Estos funcionan de varias formas. La mayoría de las herramientas en línea le permiten copiar y pegar código, que luego procesarán y le devolverán en la página. Estas herramientas a menudo también le permitirán cargar varios archivos.
Aquí hay un breve resumen de las herramientas en línea. En su mayoría, funcionan de la misma manera, por lo que no necesita preocuparse demasiado por cuál elegir.
JSCompress - Personalmente, uso más este sitio web si es solo un trabajo rápido. Es rápido de ejecutar e incluso le muestran las herramientas que usaron para construirlo.
Minificador de JavaScript - Esta herramienta funciona bien, pero realmente brilla como API. Esto le permite crear su propia integración o servicio sobre su sitio web existente.
JavaScript Minifier: otro sitio web con el mismo nombre, esta herramienta es tan simple como parece. Sin opciones ni menús, solo un botón.
Minificar - Este sitio web se ve increíble y los desarrolladores claramente han prestado atención a los detalles aquí.
Esta lista podría durar para siempre. Hay tantas herramientas en línea para minimizar los sitios web que es difícil equivocarse.
Las herramientas de minimización también existen como herramientas de línea de comandos o complementos para su Editor de JavaScript . Estas herramientas suelen ser mucho más rápidas de usar y 'simplemente funcionan' con su código existente. No es necesario copiar y pegar, y no es necesario que extraiga su JavaScript de ningún HTML o CSS que pueda estar en el mismo archivo.
Si está utilizando Microsoft Visual Studio, el Bundler y Minifier ¡La extensión del mercado tiene más de 600,000 instalaciones! No solo eso, sino que se actualiza periódicamente y disponible en GitHub .
Si eres fan de Texto sublime como yo, entonces el Minificar el paquete es el que quieres. Con más de 61.000 instalaciones, es un paquete muy popular y también disponible en GitHub , si desea contribuir a un proyecto de código abierto.
Finalmente, si eres un PyCharm usuario, puedes configurarlo para integrar directamente con muchas herramientas de compresión comunes como Compresor YUI . Muchas de estas herramientas impulsan directamente las herramientas en línea enumeradas anteriormente.
Advertencias
Allí tiene ser una trampa, ¿verdad? Nada puede ser perfecto. Bueno, sí, hay un problema, pero es bastante menor y se soluciona fácilmente:
El código reducido no se puede restaurar a su estado original.
Cuando minimizas cualquier código, se pierde su forma original. Debe guardar una copia si desea tener alguna esperanza de realizar cambios importantes con facilidad; no es suficiente usar el control de versiones.
Si bien es posible desminificar su código, nunca volverá a ser el mismo. Todos sus valiosos comentarios se pierden, por un lado.
Este no es un gran problema, pero debe tenerlo en cuenta al codificar. Como regla básica, descomprimido > desarrollo y comprimido > producción.
¡Ahora sabes todo lo que hay que saber sobre la minimización de JavaScript! La minimización del código es una de las formas de exprimir el rendimiento de un servidor, y todos los grandes sitios web lo están haciendo.
¿Qué herramientas usas para minimizar tu código? ¿Te molestas siquiera? ¡Háganos saber en los comentarios a continuación!
cómo eliminar un grupo en el hogar de windows 10
Crédito de la imagen: NavinTar a través de Shutterstock
Cuota Cuota Pío Correo electrónico Elimine estos archivos y carpetas de Windows para liberar espacio en disco¿Necesita liberar espacio en el disco de su computadora con Windows? Estos son los archivos y carpetas de Windows que se pueden eliminar de forma segura para liberar espacio en el disco.
Leer siguiente Temas relacionados- Programación
- JavaScript
- Java
- Web Design
Joe es licenciado en Ciencias de la Computación por la Universidad de Lincoln, Reino Unido. Es un desarrollador de software profesional, y cuando no está volando drones o escribiendo música, a menudo se le puede encontrar tomando fotos o produciendo videos.
Más de Joe CoburnSuscríbete a nuestro boletín
¡Únase a nuestro boletín de noticias para obtener consejos técnicos, reseñas, libros electrónicos gratuitos y ofertas exclusivas!
Haga clic aquí para suscribirse