Hace un tiempo sacamos la primer parte de lo que esperamos sea una larga serie de consejos de optimización enfocados a JavaScript. En esa oportunidad repasamos algunos consejos de carácter básico que todo desarrollador debe implementar. Ahora iremos por consejos un poco más específicos, orientado a programadores con cierta experiencia que sepan evaluar cuando y como utilizarlos.
Minificar JavaScript
Es una constante que recomienden la minificación, y está tan automatizada hoy por hoy que parece raro que lo ponga como algo intermedio en lugar de básico. Pero es que una buena minificación no es algo sencillo a priori de implementar, muchos frameworks utilizan la suya, es dificil tener control del todo. Mi consejo es, primero, revisar si el framework que utilizamos tiene algún tipo de minificación en el código (por ejemplo Odoo tiene pero solo para ciertas partes). Luego, fijarse si las librerías a utilizar (como jQuery) están en su versión min, si no lo están es conveniente reemplazarla. Y finalmente, utilizar Nginx con el Gzip activado, eso hará que todo el código JS sea minificado a su mínima expresión. Incluso hoy por hoy hay mejores sistemas de compresión para implementar, como por ejemplo Brotli; y es altamente aconsejable.
Limpieza de Código
Mantener el código limpio es una actividad primordial para evitar huecos en el programa que a la larga terminen haciendo llamados que entorpezcan el flujo natural. Cómo decimos muchas veces "que funcione no quiere decir que esté bien".
Sin embargo es una práctica compleja, que requiere conocer muy bien la arquitectura general del sistema. Por suerte hay buenas herramientas, una de las más utilizadas es Closure Compiler de Google.
Limpiar el HTML
Otro consejo de limpieza, poco habitual, pero como dice el dicho "si tu HTML es la mitad de chico cargará el doble de rápido". Bromas aparte, el HTML es parte de JavaScript en cierta forma (es el sistema de template) y por lo tanto debe mantenerse ligero. Un rápido vistazo a cualquier proyecto te hará notar la abudancia de tag div y span, muchas veces sin sentido. En la mayoría de los frameworks se introducen de más por cuestiones relativas al CMS; pero muchas veces los programadores agregamos tags sin sentido para no utilizar estilos o por error. Como primera medida, suelo recomendar reemplazar los div por su correspondiente tag de HTML (article, section, nav), ya que se encuentran optimizadas también en SEO; solo emplear div en caso de cajas sin jerarquías ni nada. Para el caso de las Apps, los div muchas veces son necesarios, pero fuera de bootstrap y demás ¿cuántos div anidados terminamos empleando? ¿cuántos span dentro de span o dentro de una tag b o i? Mantener el template limpio es fundamental para la carga inicial y el rendimiento posterior.
Refactorización Básica
Algo que distingue un programador que aun se está formando de uno que sa ha curtido un poco en los mares del código suele ser su nivel de refactorización de su propio código. Esto es claramente un punto a tener en cuenta siempre que queramos un código de JS optimizado, y consiste en no dar de alta la misma función dos o más veces cuando necesitamos utilizarla en varias ocaciones. En mi caso personal, soy partidario de tener un archivo llamado "tools" donde ir declarando distintas funciones de uso recurrente, y suele ser lo primero que armo en un proyecto nuevo de Angular (se que Angular funciona con TS y no exactamente con JS, pero llegado el caso este consejo es perfectamente aplicable).
Otro punto importante a refactorizar que muchas veces se pasa por alto son todas esas funciones similares entre sí. Uno tiende a pensar que al no hacer lo mismo, por más que sean similares, no pueden "fusionarse" en una sola función. Y si bien hay casos de todo tipo, suele ser recomendable enfocarse en intentar conseguirlo siempre que sea posible. Una forma muy común es utilizando variables de control y variables opcionales. Por ejemplo, una variable booleana que dependiendo su condición ejecute un fragmento de código en particular, haciendo que la función sea levemente diferente; o una variable string para definir un tipo en específico de comportamiento dependiendo lo que mandemos. A medida que un desarrollador gana experiencia, aprende a identificar repeticiones de código con el objetivo de refactorizarlo, así que si bien es una gran práctica, siempre va de la mano de las horas dedicadas.
