#Javascript #calidad del código #actuación #principiantes
Reducir el uso de JavaScript es muy importante cuando se crean sitios web modernos. Es fundamental para que las páginas funcionen bien y sean más eficientes en general.
A medida que la tecnología en el campo del software sigue avanzando, todos quieren que los sitios web sean más rápidos y funcionen mejor, con menos JavaScript ocupando espacio. Si tienes JavaScript adicional que no estás usando, tus aplicaciones web solo se vuelven más grandes y más lentas.
Este artículo le mostrará algunos trucos y consejos para deshacerse de este JavaScript adicional, para que pueda ahorrar tiempo, hacer que su sitio web funcione más rápido y que las cosas funcionen con mayor fluidez.
¿Qué es JavaScript no utilizado?
En pocas palabras, el código JavaScript no utilizado, al que a menudo se denomina «código inactivo», es cualquier código de su aplicación web que la aplicación no utiliza ni requiere, pero que sigue estando presente en el paquete de JavaScript enviado al navegador. Este código inactivo simplemente permanece, lo que hace que el paquete de JavaScript sea más grande y eso puede afectar el rendimiento de su sitio web.
Hay algunas razones por las que podría tener código sin utilizar en su paquete de JavaScript.
Una razón común es que agregaste código durante el desarrollo, pero a medida que avanzaba tu proyecto, terminaste sin necesitarlo más. Lamentablemente, es posible que olvides quitarlo cuando envíes el paquete final al navegador. Este código no utilizado podría ser funciones, clases o variables que simplemente están ahí, sin hacer nada en tu aplicación.
Otra razón podría ser la existencia de dependencias no utilizadas. Esto significa que estás utilizando código JavaScript externo en tu proyecto que no necesitas. Lo que es peor, estos fragmentos de código externos pueden tener su propio código JavaScript no utilizado, lo que añade aún más elementos innecesarios a tu proyecto. Es como tener un equipaje extra que tu sitio web no necesita y puede ralentizar las cosas.
Eliminar código no utilizado:
Puedes deshacerte del código JavaScript no utilizado en tus aplicaciones web con algunos métodos. Estos consejos y trucos te ayudarán a enviar paquetes de JavaScript más sólidos y que funcionen de manera más eficiente en la web, ya sea que uses JavaScript básico o bibliotecas o marcos específicos como React, SolidJS o Vue.js.
División de código:
Dividir el código es como dividir el código JavaScript en partes más pequeñas y manejables. Luego, puedes cargar estas partes cuando las necesites o todas a la vez, de modo que no tengas que cargar todo el paquete JavaScript cada vez, sino solo lo que necesitas.
Imagínese tener un solo paquete de JavaScript que se parece a esto:
<script src="main.js"></script> // 100kb file
Puedes dividirlo en fragmentos más pequeños que se pueden descargar solo cuando sea necesario:
<script async defer src="chunk1.js"></script> // 30 kb file
<script async defer src="chunk2.js"></script> // 30 kb file
<script async defer src="chunk3.js"></script> // 30 kb file
Este enfoque reduce la carga general de la red en el hilo principal, que está a cargo de iniciar y recuperar scripts de JavaScript:
Si está trabajando con una biblioteca o un marco de JavaScript como Next.js o Vue, no tiene que hacerlo usted mismo: muchos marcos de JavaScript modernos se encargan automáticamente de la división del código.
Sin embargo, puedes asignar ciertos componentes para que los use solo el lado del servidor. Esto ayuda al marco a dividir de manera inteligente el código JavaScript en partes aún más pequeñas que no necesitan agruparse con fragmentos de código JavaScript del lado del cliente.
Muchas organizaciones utilizan esta estrategia en situaciones del mundo real, lo que demuestra lo eficaz que es. Veamos cómo funciona la división de código en el sitio web de React como ejemplo:
Sacudiendo el árbol:
El método tree shaker consiste en deshacerse del código inútil, lo que significa eliminar el código JavaScript que tu aplicación no utiliza. Cuando estás juntando los fragmentos de código JavaScript para enviarlos al navegador, un grupo de empaquetadores populares como Webpack, Rollup o Vite utilizan una técnica de tree shaker para asegurarse de que solo lo necesario llegue a la mezcla.
Para asegurarse de que la función tree shaker funcione en su paquete, utilice la sintaxis ES6 moderna en sus componentes JavaScript. Esto significa utilizar la sintaxis import y export.
// default import
import Header from 'Components'
// named import
import { Header } from 'Components'
// default export
export default Header
// named export
export { Header }
La sintaxis moderna de ES6 ayuda a su empaquetador a detectar código inactivo, de forma similar a cómo ESLint señala si hay un componente importado que no se usa en ningún lugar.
Modificación de JavaScript:
Tener menos JavaScript en el paquete se traduce en una descarga más rápida para el navegador. Para mantener el archivo JavaScript lo más compacto posible, asegúrese de minimizarlo antes de enviarlo.
La minimización de JavaScript implica eliminar elementos innecesarios como espacios en blanco, resaltado de sintaxis, comentarios y otras partes del código que no son esenciales para la compilación de producción final. Estos elementos adicionales pueden sobrecargar el paquete con código no utilizado.
Incluso el código JavaScript aparentemente sencillo se puede condensar y modificar. Observa este ejemplo de código JavaScript básico antes del proceso de minimización:
// multiply function
const multiply = (a, b) => {
return a * b
}
// call multiply function
multiply(3, 4)
Así es como se ve este código después de la minimización:
const multiply = (a, b) => a * b;
multiply(3, 4);
¡Piense en el impacto que podría tener la minimización de JavaScript en paquetes extensos!
Minificar JavaScript es más sencillo de lo que imaginas. Existen varias herramientas en línea para la minificación de JavaScript, como Terser, Uglify, babel-minify y otras entre las que puedes elegir.
Cargar JavaScript de forma asincrónica:
Aquí tienes un consejo útil que puede ahorrarte mucho tiempo en ancho de banda de red: carga siempre tu JavaScript de forma asincrónica.
Puedes lograr esto agregando «async» y «defer» a tus scripts de JavaScript. Esto garantiza que la descarga de JavaScript no retrasará ni impedirá que tu HTML se analice o muestre mientras se carga el JavaScript.
Tanto «async» como «defer» gestionan la descarga y ejecución de scripts de JavaScript, pero lo hacen en un orden ligeramente diferente. Puedes elegir lo que funcione mejor para tu proyecto.
Un script JavaScript asincrónico funciona como se muestra en esta imagen:
Mientras tanto, un script de JavaScript defer funciona así:
En muchas situaciones, usar tanto «async» como «defer» funciona bien. Aquí tienes un ejemplo de cómo puedes escribir esto:
<script async defer src="main.js"></script>
Importaciones dinámicas
Ahora, con los módulos ES6 en JavaScript simple, puedes realizar importaciones dinámicas. Estas resultan útiles cuando necesitas cargar módulos o scripts de JavaScript en función de ciertas condiciones. Así es como escribirías importaciones dinámicas:
import('./helper.js')
.then((module) => {
// use helper code here
})
.catch((error) => {
// catch errors
});
Este enfoque nos permite solicitar un paquete de JavaScript una vez que se cumplen condiciones específicas, en lugar de importar cada componente de JavaScript al principio del archivo. Vea este fragmento de código donde el módulo se carga solo después de que se adjunta el detector de eventos:
document.getElementById('dashboard').addEventListener('click', () => {
import('./helper.js')
.then((module) => {
// Use helper module APIs
module.callSomeFunction();
})
// catch unexpected error here
.catch((error) => {
console.error("Oops! An error has occurred");
});
});
Técnica de carga diferida
La carga diferida en JavaScript es una técnica sencilla pero muy práctica. Si se realiza correctamente, puede ahorrar ancho de banda de la red. La idea básica es cargar únicamente los módulos de JavaScript que necesitas en ese momento.
Un truco inteligente es cargar JavaScript en función de la altura de la ventana gráfica. Supongamos que tienes una lista de usuarios muy larga. No tendría sentido cargar los detalles de, digamos, el usuario número 430 cuando esa información no está visible en la pantalla actual.
Algunas bibliotecas interesantes se encargan de esto. Se aseguran de que los módulos de JavaScript solo se carguen cuando un usuario específico, como el número 430, aparece en la pantalla.
¿Y adivina qué? La carga diferida no es solo para listas. También funciona para otras cosas, como imágenes, videos, un montón de nodos y más. Por ejemplo, puedes mostrar primero un marcador de posición y luego el navegador descarga la imagen real y su código JavaScript relacionado.
Estos trucos no solo ayudan a enviar menos código JavaScript sino que también hacen que la experiencia del usuario sea mucho mejor.
Conclusión
En este artículo, cubrimos seis técnicas para enviar menos JavaScript y mejorar el rendimiento de su proyecto.
Recuerde que cada proyecto es único, con su arquitectura y sus patrones. Si bien muchos de los consejos que mencionamos pueden resultar útiles, es posible que no todos se adapten a su situación específica.
Confía en tus instintos para descubrir qué es lo que mejor se adapta a ti y a tu proyecto. De esta manera, puedes mejorar tus sitios web y aplicaciones con confianza.
Soy Oscar Torrez, ingeniero de software en Torrez infor, puedes comunicarte conmigo en LinkedIn y seguir mi trabajo en GitHub .