Mejorando la Velocidad de la Página Activando el Modo Producción de Vue.js

Después de que la migración de nuestra app principal se completó y Datadog fue configurado en nuestro frontend, empezamos a recibir muchos errores, warnings y mensajes de debug en nuestro dashboard de DD. En algún momento, nuestro CTO preguntó por qué estábamos usando el modo Dev en nuestro entorno de producción.

Cuando nos preguntaron por qué el modo Dev estaba activado en producción, para ser honesto, no estaba al tanto de este comportamiento. Lo que escuché del equipo fue que lo necesitaban así para permitir el debugging de sus entornos locales, lo cual no tenía mucho sentido cuando se hablaba de producción. Después de nuestra conversación, fui puesto a cargo de arreglar el problema, y lo que encontré fue que, por defecto, estaba configurado en modo development y todos los builds estaban usando la misma configuración.

Esta fue una solución bastante fácil. La solución fue crear un script diferente para producción, pasando el modo production como un argumento al comando de webpack:

Este tipo de mala configuración podría no parecer que puede impactar el performance de un website, ya que tendemos a pensar que es solo un mensaje feo en la consola. Sin embargo, en realidad impacta el performance, ya que el modo de build cambia cómo los archivos son compilados. El modo producción produce archivos optimizados y minificados, y la velocidad de carga de la página se incrementa.

Aquí hay una comparación antes y después de que los cambios fueran aplicados.