¿Cómo decirle a ReactJS que construya un proyecto en modo Producción?

En el modo de desarrollo, React incluye muchas advertencias para ayudar a encontrar problemas antes de que generen errores. Al hacerlo, aumenta el tamaño del paquete y hace que la aplicación se ejecute más lentamente. La ralentización puede aceptarse mientras se trabaja en la aplicación localmente, pero no podemos permitirnos esto en la implementación.

En el modo de desarrollo, React, internamente, utiliza varias técnicas inteligentes para minimizar la cantidad de costosas operaciones DOM necesarias para actualizar la interfaz de usuario. Sin embargo, hay varias formas en que podemos acelerar nuestra aplicación React, siendo las compilaciones de producción una de ellas. 

¿Qué hará la compilación de producción?

La compilación de producción crea paquetes minimizados, mapas fuente más livianos y activos optimizados. Esto mejora el tiempo de carga. React recomienda usar el modo de producción al implementar la aplicación de reacción. Ahora sabemos que la generación de producción ayuda a optimizar el rendimiento. 

Veamos ahora cómo crear una aplicación de reacción en modo de producción.

Creando la aplicación React usando Create React App:

• Paso 1: abra la terminal y ejecute el siguiente comando para crear la carpeta del proyecto de la aplicación de reacción:

  npx create-react-app myapp

• Paso 2: Mover a la carpeta del proyecto:

  cd myapp

Estructura del proyecto: La estructura inicial del proyecto se verá como la siguiente.

estructura del proyecto

Paso 3: ahora edite el archivo App.js en el proyecto y reemplace el código preexistente con el siguiente código.

import logo from './logo.svg';
import './App.css';
  
function App() {
  return (
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <p>
          This is my React App.
        </p>
  
      </header>
    </div>
  );
}
  
export default App;

Paso para ejecutar la aplicación: Vaya a la raíz de la carpeta del proyecto y ejecute uno de los siguientes comandos:

npm start

Salida: la aplicación se ejecutará en el puerto 3000 y la pantalla de salida se verá así:

Pantalla de salida

Paso 4: ahora cree la compilación de producción de la aplicación. La aplicación React hace que sea bastante simple de construir en producción. Si su proyecto está construido con create-react-app, vaya al directorio raíz del proyecto y ejecute:

npm run build

creación de compilación de producción

Esto creará un directorio de compilación con la compilación de producción de la aplicación. Tus archivos JavaScript y CSS estarán dentro del directorio build/static . Se generan varios archivos .js y se colocan dentro del directorio build/static/js . Estos se llaman fragmentos .

Fragmentos de JS creados después de la compilación de producción

Paso 5: Ejecutar la aplicación en modo de producción. Serviremos la versión de compilación con un servidor estático: en el modo de producción, la aplicación de reacción se ejecutará en el puerto 5000.

serve -s build

Aplicación ejecutándose en modo de producción

Ahora veamos cómo saber si el proceso de compilación se configuró correctamente

1. Usaremos React Developer Tools para Chrome . Cuando esta extensión está instalada y ejecutándose y visitamos un sitio con reacción en modo de producción, el ícono de reacción tendrá un fondo oscuro. 

Modo de producción

2. Si visitas un sitio con React en modo de desarrollo, el ícono tendrá un fondo rojo:

modo de desarrollo