Acelerando tu fase de compilación

Traducción Beta No Oficial

Esta página fue traducida por PageTurner AI (beta). No está respaldada oficialmente por el proyecto. ¿Encontraste un error? Reportar problema →

Compilar tu aplicación de React Native puede ser costoso y tomar varios minutos del tiempo de los desarrolladores. Esto puede volverse problemático a medida que tu proyecto crece, especialmente en organizaciones grandes con múltiples desarrolladores de React Native.

Para mitigar este impacto en el rendimiento, esta página comparte sugerencias sobre cómo mejorar tu tiempo de compilación.

información

Ten en cuenta que estas sugerencias son características avanzadas que requieren cierto entendimiento sobre cómo funcionan las herramientas de compilación nativas.

Compilar solo una ABI durante el desarrollo (solo Android)

Al compilar tu aplicación de Android localmente, por defecto construyes las 4 Application Binary Interfaces (ABIs): armeabi-v7a, arm64-v8a, x86 y x86_64.

Sin embargo, probablemente no necesites compilar todas si estás trabajando localmente y probando en tu emulador o en un dispositivo físico.

Esto debería reducir tu tiempo de compilación nativa en un factor aproximado del 75%.

Si usas la CLI de React Native, puedes añadir el flag --active-arch-only al comando run-android. Este flag asegura que se seleccione la ABI correcta del emulador en ejecución o del teléfono conectado. Para confirmar que funciona, verás un mensaje como info Detected architectures arm64-v8a en la consola.

$ yarn react-native run-android --active-arch-only

[ ... ]
info Running jetifier to migrate libraries to AndroidX. You can disable it using "--no-jetifier" flag.
Jetifier found 1037 file(s) to forward-jetify. Using 32 workers...
info JS server already running.
info Detected architectures arm64-v8a
info Installing the app...

Este mecanismo depende de la propiedad Gradle reactNativeArchitectures.

Por lo tanto, si compilas directamente con Gradle desde la línea de comandos sin la CLI, puedes especificar la ABI que deseas construir así:

$ ./gradlew :app:assembleDebug -PreactNativeArchitectures=x86,x86_64

Esto es útil si quieres compilar tu aplicación Android en un CI usando una matriz para paralelizar la construcción de diferentes arquitecturas.

Si prefieres, también puedes sobrescribir este valor localmente usando el archivo gradle.properties en la carpeta principal de tu proyecto:

# Use this property to specify which architecture you want to build.
# You can also override it from the CLI using
# ./gradlew <task> -PreactNativeArchitectures=x86_64
reactNativeArchitectures=armeabi-v7a,arm64-v8a,x86,x86_64

Al construir una versión de lanzamiento de tu app, recuerda eliminar estos flags para generar un apk/paquete que funcione para todas las ABIs, no solo para la que usas en tu flujo de desarrollo diario.

Habilitar almacenamiento en caché de configuración (solo Android)

Desde React Native 0.79, también puedes activar el Configuration Caching de Gradle.

Cuando ejecutas una compilación Android con yarn android, estás realizando un build de Gradle con dos fases (fuente):

• Fase de configuración: se evalúan todos los archivos .gradle.

• Fase de ejecución: se ejecutan las tareas, compilando el código Java/Kotlin, etc.

Al habilitar Configuration Caching, podrás saltarte la fase de configuración en builds posteriores.

Esto es beneficioso al realizar cambios frecuentes en código nativo, ya que mejora los tiempos de compilación.

Por ejemplo, aquí puedes ver cuánto más rápido se reconstruye RN-Tester tras un cambio en el código nativo:

Habilita Configuration Caching añadiendo esta línea en tu archivo android/gradle.properties:

org.gradle.configuration-cache=true

Consulta la documentación oficial de Gradle para más recursos sobre Configuration Caching.

Usar un mirror de Maven (solo Android)

Al crear aplicaciones para Android, tus compilaciones de Gradle necesitarán descargar las dependencias necesarias desde Maven Central y otros repositorios de Internet.

Si tu organización utiliza un repositorio espejo de Maven, deberías considerarlo ya que acelerará tus compilaciones al descargar los artefactos desde el espejo en lugar de Internet.

Puedes configurar un espejo especificando la propiedad exclusiveEnterpriseRepository en tu archivo android/gradle.properties:

diff

# Use this property to enable or disable the Hermes JS engine.
# If set to false, you will be using JSC instead.
hermesEnabled=true

# Use this property to configure a Maven enterprise repository
# that will be used exclusively to fetch all of your dependencies.
+exclusiveEnterpriseRepository=https://my.internal.proxy.net/

Al establecer esta propiedad, tu compilación obtendrá dependencias exclusivamente desde el repositorio especificado y no de otros.

Usar una caché de compilación

Si ejecutas compilaciones nativas frecuentes (ya sea C++ u Objective-C), podrías beneficiarte de usar una caché de compilación.

Específicamente puedes usar dos tipos de cachés: cachés de compilación locales y distribuidas.

Cachés locales

información

Las siguientes instrucciones funcionarán tanto para Android como para iOS. Si solo compilas aplicaciones Android, deberías estar listo. Si también compilas aplicaciones iOS, sigue las instrucciones en la sección Configuración específica para Xcode más abajo.

Sugerimos usar ccache para almacenar en caché la compilación de tus builds nativos. Ccache funciona envolviendo los compiladores de C++, almacenando los resultados de compilación y omitiendo la compilación si un resultado intermedio ya estaba almacenado.

Ccache está disponible en el gestor de paquetes para la mayoría de sistemas operativos. En macOS podemos instalar ccache con brew install ccache. O puedes seguir las instrucciones oficiales de instalación para instalarlo desde el código fuente.

Luego puedes realizar dos compilaciones limpias (ej. en Android primero ejecuta yarn react-native run-android, elimina la carpeta android/app/build y ejecuta el primer comando nuevamente). Notarás que la segunda compilación fue mucho más rápida que la primera (debería tomar segundos en lugar de minutos). Durante la compilación puedes verificar que ccache funciona correctamente y revisar la tasa de aciertos/fallos de caché con ccache -s.

$ ccache -s
Summary:
  Hits:             196 /  3068 (6.39 %)
    Direct:           0 /  3068 (0.00 %)
    Preprocessed:   196 /  3068 (6.39 %)
  Misses:          2872
    Direct:        3068
    Preprocessed:  2872
  Uncacheable:        1
Primary storage:
  Hits:             196 /  6136 (3.19 %)
  Misses:          5940
  Cache size (GB): 0.60 / 20.00 (3.00 %)

Nota que ccache agrega estadísticas de todas las compilaciones. Puedes usar ccache --zero-stats para reiniciarlas antes de una compilación y verificar la tasa de aciertos.

Si necesitas borrar tu caché, hazlo con ccache --clear.

Configuración específica para Xcode

Para asegurar que ccache funcione correctamente con iOS y Xcode, necesitas habilitar el soporte de React Native para ccache en ios/Podfile.

Abre ios/Podfile en tu editor y descomenta la línea ccache_enabled.

ruby

  post_install do |installer|
    # https://github.com/facebook/react-native/blob/main/packages/react-native/scripts/react_native_pods.rb#L197-L202
    react_native_post_install(
      installer,
      config[:reactNativePath],
      :mac_catalyst_enabled => false,
      # TODO: Uncomment the line below
      :ccache_enabled => true
    )
  end

Usar este enfoque en CI

Ccache usa la carpeta /Users/$USER/Library/Caches/ccache en macOS para almacenar la caché. Por lo tanto podrías guardar y restaurar esta carpeta también en CI para acelerar tus compilaciones.

Sin embargo, hay un par de consideraciones:

1. En CI recomendamos hacer compilaciones limpias completas para evitar problemas de caché envenenada. Si sigues el enfoque mencionado en el párrafo anterior, deberías poder paralelizar la compilación nativa en 4 ABIs diferentes y probablemente no necesitarás ccache en CI.

2. ccache depende de marcas de tiempo para calcular un acierto de caché. Esto no funciona bien en CI ya que los archivos se redescargan en cada ejecución. Para superar esto necesitarás usar la opción compiler_check content que en su lugar se basa en hashing del contenido del archivo.

Cachés distribuidas

Similar a las cachés locales, podrías considerar usar una caché distribuida para tus compilaciones nativas. Esto podría ser especialmente útil en organizaciones grandes que realizan compilaciones nativas frecuentes.

Recomendamos usar sccache para lograr esto. Para instrucciones sobre cómo configurar y usar esta herramienta, consulta la guía de inicio rápido de compilación distribuida de sccache.