Michael Fisher
0 
2266
675
Todos hemos estado allí, aprendiste a crear un sitio web increíble. Cómo crear un sitio web: para principiantes Cómo crear un sitio web: para principiantes Hoy te guiaré a través del proceso para crear un sitio web completo desde cero. No te preocupes si esto suena difícil. Te guiaré a través de cada paso del camino. , pero una vez que lo publica, es insoportablemente lento.
Minimizar su javascript es una forma de acelerar los tiempos de respuesta del sitio web (junto con la compresión de HTML Cómo funciona HTML comprimido y por qué lo puede necesitar Cómo funciona 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), y afortunadamente para usted, es un proceso fácil. 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 lo que llaman sus variables, o cuánto espacio hay entre paréntesis, para ejemplo.
Al minimizar el código, puede reducir drásticamente su tamaño de archivo. Por lo tanto, un archivo más pequeño será más rápido para que los usuarios lo descarguen. Si solo está 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 está utilizando bibliotecas grandes como jQuery, se puede lograr un aumento notable del rendimiento y tamaños de archivo drásticamente reducidos.!
Si carga código de 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 rápido y que los sitios web sean asequibles incluso cuando escala a millones de usuarios. En primer lugar, el ancho de banda cuesta dinero; aquellos de nosotros con contratos limitados lo sabemos muy bien. No solo usted ..., como las bibliotecas alojadas en Google, ha utilizado código minificado.
¿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, así que me disculpo de antemano por su larga duración.
Aquí hay algunos no minificado 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 () // configurar el botón haga clic en document.getElementById ("theButton"). onclick = function () doWork (); function doWork () // ajax el JSON al servidor $ .post ("receptor", cars, function () ); // detener el enlace recargando la página event.preventDefault (); Aquí está el código minificado:
function doWork () $. post ("receptor", cars, function () ), event.preventDefault () var cars = [make: "Porsche", modelo: "911S", make: " Mercedes-Benz ", modelo:" 220SE ", marca:" Jaguar ", modelo:" Mark VII "]; window.onload = function () document.getElementById (" theButton "). Onclick = function () hacer trabajo();Esta versión minimizada 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:
// dfd == diferido var dfd = $ .Deferred (); function doThing () $ .get ('some / slow / url', function () dfd.resolve ();); return dfd.promise (); $ .when (doThing ()). then (function () console.log ('YAY, está terminado'););Aquí está el código minificado:
function 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 un 26 por ciento reducción: eso sigue siendo muy bueno para un bloque de código tan pequeño.
Aquí hay un último ejemplo de nuestra guía de Javascript y DOM:
// declara una nueva variable para contener un nuevo elemento h1 var newHeading = document.createElement ("h1"); // agrega el nodo de texto al documento var h1Text = document.createTextNode ("Encabezado Nivel 1"); // convertirlo en un nodo hijo 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 en 52 por ciento :
var newHeading = document.createElement ("h1"), h1Text = document.createTextNode ("Nivel de título 1"); newHeading.appendChild (h1Text), document.getElementById ("bt"). appendChild (newHeading);Estos son los tamaños de algunas bibliotecas 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 hay necesidad de modificar manualmente su código! 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 en la página. Estas herramientas a menudo también te permitirán subir múltiples 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 debe 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 te muestran las herramientas que usaron para construirlo.
JavaScript Minifier: esta herramienta funciona bien, pero realmente brilla como una 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.
Minify: este sitio web se ve increíble, y los desarrolladores claramente han prestado atención a los detalles aquí.
Esta lista podría continuar para siempre. Hay tantas herramientas en línea para minificar sitios web que es difícil equivocarse.
Las herramientas de reducción también existen como complementos o herramientas de línea de comandos 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. Puede encontrar docenas de alternativas, pero ninguna de ellas le enciende una vela, así que no pierda su tiempo. . 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 yo, entonces el paquete Minify es el que deseas. Con más de 61,000 instalaciones, es un paquete muy popular, y uno que también está disponible en GitHub, si desea contribuir a un proyecto de código abierto.
Finalmente, si eres un usuario de PyCharm, puedes 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 una trampa ¿verdad? Nada puede ser perfecto. Bueno, sí, hay un problema, pero es bastante menor y se soluciona fácilmente:
El código minimizado no se puede restaurar a su estado original.
Cuando minimiza cualquier código, se pierde su forma original. Debe conservar una copia si desea tener la esperanza de realizar cambios importantes con facilidad: no es suficiente usar el control de versiones ¿Qué es Git y por qué? Debe usar el control de versiones si es 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 cargamos todo cuando terminamos. Esto está bien cuando solo eres tú y los cambios son pequeños ... .
Si bien es posible desminificar su código, nunca vuelve a ser lo 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, sin comprimir > desarrollo y comprimido > producción.
¡Ahora ya sabes todo lo que hay que saber sobre minificar JavaScript! Reducir el 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 utilizas para minificar tu código? ¿Te molestas? Háganos saber en los comentarios a continuación!
Crédito de la imagen: NavinTar a través de Shutterstock