Compresores de JavaScript ¿Cómo y por qué minimizar su JS?

Todos hemos estado allí, aprendió a crear un sitio web impresionante Cómo hacer un sitio web: para principiantes Cómo hacer un sitio web: Para principiantes Hoy lo guiaré a través del proceso de creación de un sitio web completo desde cero. No te preocupes si esto suena difícil. Te guiaré en cada paso del camino. Lee más, pero una vez que lo publicas, es insoportablemente lento.

Reducir su javascript es una forma de acelerar los tiempos de respuesta del sitio web (junto con comprimir HTML Cómo funciona el HTML comprimido y por qué puede necesitarlo Cómo funciona el HTML comprimido y por qué puede necesitarlo En este artículo, repasaremos los dos métodos principales para HTML comprimido, por qué los archivos HTML deben reducirse y cómo hacerlo. Más información), y afortunadamente para usted, es un proceso fácil. Hoy te mostraré todo lo que necesitas saber..

¿Qué significa Minify??

El proceso de minificación (o minimizando) es un concepto simple. Cuando escribes código en JavaScript o en cualquier otro idioma, hay muchas características que solo se requieren para hacer que el código sea más fácil de entender para las personas: a las computadoras no les importa lo que llamas tus variables, o la cantidad de espacio que hay entre corchetes, para ejemplo.

Al reducir el código, puede reducir drásticamente el tamaño de su archivo. Por lo tanto, un archivo más pequeño será más rápido para que los usuarios lo descarguen. Si solo estás escribiendo una o dos líneas de JavaScript, probablemente no habrá una mejora notable. Sin embargo, si está escribiendo una gran cantidad de código, o utilizando bibliotecas grandes como jQuery, se pueden lograr aumentos notables en el rendimiento y tamaños de archivos drásticamente reducidos.!

Si carga código desde un CDN externo ¿Qué son los CDN y por qué el almacenamiento ya no es un problema? ¿Qué son los CDN y por qué el almacenamiento ya no es un problema? Los CDN hacen que Internet sea más rápido y accesible a los sitios web, incluso cuando se escala a millones de usuarios. En primer lugar, el ancho de banda cuesta dinero; Aquellos de nosotros con contratos limitados sabemos que muy bien. No solo tú… Leer más, como las bibliotecas alojadas de Google, has usado código minificado.

¿Cómo se ve el código minificado??

Veamos algunos ejemplos. Es difícil ver el impacto de la minificación en bases de código pequeñas, así que me disculpo por adelantado por su larga duración.

Aquí hay algunos no minado JavaScript de nuestra guía para usar JSON con Python y JavaScript:

// configura algunos JSON para usar var cars = ["make": "Porsche", "model": "911S", "make": "Mercedes-Benz", "model": "220SE",  "make": "Jaguar", "model": "Mark VII"]; window.onload = function () // configure el botón haga clic en document.getElementById ("theButton"). onclick = function () doWork ();  function doWork () // ajax el JSON al servidor $ .post ("receptor", cars, function () ); // Detener enlace recargando la página event.preventDefault (); 

Aquí está el código minificado:

función doWork () $. post ("receiver", cars, function () ), event.preventDefault () var cars = [make: "Porsche", model: "911S", make: " Mercedes-Benz ", modelo:" 220SE ", make:" Jaguar ", modelo:" Mark VII "]; window.onload = function () document.getElementById (" theButton "). Onclick = function () hacer trabajo();

Esta versión minificada 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 para jQuery:

// dfd == var. diferida dfd = $ .Deferred (); función doThing () $ .get ('some / slow / url', function () dfd.resolve ();); devolver dfd.promise ();  $ .cuando (doThing ()). then (function () console.log ('YAY, está terminado'););

Aquí está el código minificado:

función doThing () return $ .get ("some / slow / url", function () dfd.resolve ()), dfd.promise () var dfd = $. Deferred (); $. when (doThing ()). then (function () console.log ("YAY, está terminado"));

Esta vez solo hubo una 26 por ciento Reducción: sigue siendo muy bueno para un bloque de código tan pequeño..

Aquí hay un ejemplo final de nuestra guía para Javascript y el DOM:

// declara una nueva variable para contener un nuevo elemento h1 var newHeading = document.createElement ("h1"); // agregar el nodo de texto al documento var h1Text = document.createTextNode ("Heading Level 1"); // convertirlo en un nodo secundario del nuevo encabezado newHeading.appendChild (h1Text); // agregue esto como un elemento secundario del elemento definido como "bt" document.getElementById ("bt"). appendChild (newHeading);

Note como hay mucho de comentarios y espacios en blanco. La versión reducida redujo el tamaño del archivo 52 por ciento :

var newHeading = document.createElement ("h1"), h1Text = document.createTextNode ("Heading Level 1"); newHeading.appendChild (h1Text), document.getElementById ("bt"). appendChild (newHeading);

Estos son los tamaños de algunas bibliotecas de JavaScript comunes en comparación con sus versiones reducidas:

1. Highcharts: 1 MB> 201 KB
2. jQuery: 270 KB> 90 KB
3. 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 sabes cómo funciona y cómo se ve, vamos a profundizar en cómo hacerlo. No se preocupe, ¡no hay necesidad de modificar manualmente su código en absoluto! Hay una variedad de herramientas disponibles gratuitamente que manejan el proceso por usted..

Estos funcionan de varias maneras. La mayoría de las herramientas en línea le permiten copiar y pegar código, que luego procesarán y le devolverán a usted en la página. Estas herramientas a menudo te permitirán subir varios archivos también..

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 este sitio web más si es solo un trabajo rápido. Es rápido de ejecutar e incluso te muestran las herramientas que usaron para construirlo.

Minificador de JavaScript: esta herramienta funciona bien, pero realmente brilla como una API. Esto le permite construir su propia integración o servicio sobre su sitio web existente.

Minificador de JavaScript: otro sitio web con el mismo nombre, esta herramienta es tan simple como viene. Sin opciones ni menús, solo un botón..

Reducir: este sitio web parece increíble, y los desarrolladores han prestado atención a los detalles aquí.

Esta lista podría continuar para siempre. Hay tantas herramientas en línea para minimizar los sitios web que es difícil equivocarse.

También existen herramientas de reducción de tamaño como herramientas de línea de comandos o complementos para su editor de JavaScript Los 5 mejores editores de Javascript para programadores y programadores productivos Los 5 mejores editores de Javascript para programadores y programadores productivos En estos días, solo hay cinco editores que vale la pena considerar al escribir JavaScript. Puedes encontrar docenas de alternativas, pero ninguna de ellas ofrece una vela a estas, así que no pierdas el tiempo. Lee mas . Estas herramientas son a menudo mucho más rápidas de usar, y “solo trabajo” con su código existente. No es necesario copiar y pegar, y no tiene que extraer su JavaScript de ningún HTML o CSS que pueda estar en el mismo archivo.

Si está utilizando Microsoft Visual Studio, ¡la extensión Bundler y Minifier del mercado tiene más de 600,000 instalaciones! No solo eso, sino que se actualiza regularmente y está disponible en GitHub.

Si eres fanático de Sublime Text como I am, entonces el paquete Minify es el que quieres. Con más de 61,000 instalaciones, es un paquete muy popular, y también está disponible en GitHub, si desea contribuir a un proyecto de código abierto.

Finalmente, si es un usuario de PyCharm, puede configurarlo para que se integre directamente con muchas herramientas de compresión comunes, como el compresor YUI. Muchas de estas herramientas potencian directamente las herramientas en línea mencionadas anteriormente.

Advertencias

Ahí tiene ser un derecho de captura? Nada puede ser perfecto. Bueno, sí, hay un problema, pero es bastante pequeño y fácil de solucionar:

El código reducido no se puede restaurar a su estado original.

Cuando minimizas cualquier código, su forma original se pierde. Debe conservar una copia si desea tener alguna esperanza de realizar cambios importantes con facilidad. No es suficiente con el control de versiones. ¿Qué es Git y por qué debería usar el Control de versiones si es un desarrollador? ¿Qué es Git y por qué? Debería usar el control de versiones si es un desarrollador Como desarrolladores web, muchas veces tendemos a trabajar en sitios de desarrollo local y luego simplemente cargamos todo cuando hayamos terminado. Esto está bien cuando solo eres tú y los cambios son pequeños,… Leer más .

Si bien es posible desminificar su código, nunca volverá a ser lo mismo. Todos tus valiosos comentarios se pierden, por un lado..

Esto no es un gran problema, pero debe tenerlo en cuenta al programar. Como regla basica, sin comprimir > en desarrollo y comprimido > producción.

¡Ahora sabes todo lo que hay que saber sobre la reducción de JavaScript! Reducir el código es una de las maneras de exprimir el rendimiento de un servidor, y todos los sitios web grandes lo están haciendo.

¿Qué herramientas utilizas para minimizar tu código? ¿Incluso te molesta? Háganos saber en los comentarios a continuación.!

Crédito de la imagen: NavinTar a través de Shutterstock

Explorar más sobre: ​​Java, JavaScript, diseño web.