Saltar al contenido principal

Proyectos y aplicaciones con frameworks

Introducción​

En el caso de proyectos realizados con frameworks como React, Angular, Vue, entre otros, es necesario generar el build para producción.

Generar el build para producción se refiere al proceso de preparar tu aplicación para ser desplegada en un entorno real, es decir, para ser utilizada por los usuarios finales. Durante este proceso, la aplicación pasa por varias optimizaciones y transformaciones que la hacen más eficiente, rápida y ligera.

Pasos y optimización​

Generalmente, al generar el build, se realizan los siguientes pasos para optimizar el proyecto para producción:

  1. Minificación del código: El código fuente es minificado, lo que significa que se eliminan espacios, saltos de línea y comentarios, y se acortan los nombres de las variables para reducir el tamaño del archivo.

  2. Empaquetado y tree shaking: Las dependencias que no se utilizan (dead code) se eliminan mediante una técnica llamada tree shaking. El código se empaqueta en uno o varios archivos optimizados.

  3. Optimización del rendimiento:

    • Se generan versiones optimizadas de JavaScript y CSS.
    • A veces se activan características de caching para mejorar la velocidad de carga.
    • Los assets (como imágenes) se pueden comprimir y optimizar para que carguen más rápido.

  4. Compilación de código: Si utilizas sintaxis avanzada como TypeScript, JSX o ES6+, se compila a versiones más compatibles con navegadores antiguos (normalmente ES5).

  5. Remoción de herramientas de desarrollo: Herramientas de desarrollo como los mapas de fuente (source maps) o mensajes de depuración se eliminan o desactivan en el build de producción, lo que mejora el rendimiento.

Proceso de build​

¿Cómo se hace el proceso de build?

  • En React, generalmente se utiliza el comando npm run build o yarn build
  • En Angular, ng build --prod o ng build --configuration production
  • En Vue, npm run build
  • Nota: El comando puede variar según el framework y las herramientas que estés utilizando. Así que puedes consultar la documentación oficial del framework para encontrar el comando adecuado.

Este proceso crea una carpeta con los archivos que se pueden desplegar en un servidor web. El código generado está optimizado y listo para ser usado en producción.