Concepto clave

La configuración avanzada y optimización en Expo implica ajustar el proyecto para mejorar rendimiento, reducir tamaño de bundle y habilitar funcionalidades específicas de producción. Piensa en esto como preparar un coche de carreras: no solo necesitas que funcione, sino que sea rápido, eficiente y confiable bajo presión. La configuración de metro.config.js y app.json son los paneles de control donde optimizas el build.

En el mundo real, esto se traduce en decisiones como configurar code splitting para cargar solo lo necesario, optimizar assets con @expo/vector-icons en lugar de imágenes, y usar environment variables para gestionar configuraciones entre entornos. Una analogía útil es una cocina profesional: tienes ingredientes (código) que debes organizar y preparar de manera eficiente para servir platos rápidos (la app) sin desperdiciar recursos.

Cómo funciona en la práctica

Imagina que tienes una app de Expo con múltiples pantallas y bibliotecas pesadas. El proceso paso a paso comienza analizando el bundle con expo build:ios --analyze-bundle para identificar módulos grandes. Luego, en metro.config.js, configuras la resolución de alias para evitar duplicados y habilitas la minificación. Por ejemplo, si usas lodash, puedes reemplazarlo con lodash-es para tree-shaking.

Después, en app.json, defines configuraciones específicas por plataforma bajo ios y android, como deshabilitar fuentes no usadas o ajustar la memoria. Finalmente, pruebas con expo start --no-dev --minify para simular producción. Un flujo típico incluye: 1) Auditoría de dependencias, 2) Configuración de Metro y Babel, 3) Optimización de assets, 4) Pruebas de rendimiento.

Codigo en accion

Antes: Un metro.config.js básico que no optimiza.

// metro.config.js (antes)
module.exports = {
  transformer: {
    getTransformOptions: async () => ({
      transform: {
        experimentalImportSupport: false,
        inlineRequires: false,
      },
    }),
  },
  resolver: {},
};

Despues: Configuración optimizada con alias y minificación.

// metro.config.js (despues)
const { getDefaultConfig } = require('expo/metro-config');
const config = getDefaultConfig(__dirname);

config.transformer.minifierPath = 'metro-minify-terser';
config.transformer.minifierConfig = {
  compress: {
    drop_console: true,
    pure_funcs: ['console.log'],
  },
};

config.resolver.extraNodeModules = {
  'react-native': require.resolve('react-native'),
};

config.resolver.resolveRequest = (context, moduleName, platform) => {
  if (moduleName.startsWith('@myapp/')) {
    return context.resolveRequest(context, moduleName.replace('@myapp/', './src/'), platform);
  }
  return context.resolveRequest(context, moduleName, platform);
};

module.exports = config;

Errores comunes

No configurar environment variables correctamente: Usar valores hardcodeados en app.json en lugar de variables como EXPO_PUBLIC_API_URL. Solución: Usar expo-constants y definir en .env o eas.json.
Ignorar el tree-shaking: Incluir bibliotecas completas como lodash en lugar de importar funciones específicas. Esto aumenta el bundle size. Solución: Usar import { map } from 'lodash-es' y configurar Babel.
No optimizar imágenes y assets: Usar imágenes PNG grandes sin comprimir. Solución: Convertir a WebP, usar react-native-fast-image, y definir sizes en app.json.
Configurar mal los plugins de Babel: Añadir plugins innecesarios que ralentizan el build. Solución: Revisar babel.config.js y mantener solo esenciales como react-native-reanimated/plugin.
Olvidar pruebas en modo producción: Desarrollar solo en dev y encontrar errores en producción. Solución: Usar expo start --no-dev regularmente y pruebas en dispositivos reales.

Checklist de dominio

Configurar metro.config.js para minificación y alias de módulos.
Usar environment variables en eas.json para diferentes entornos (dev, staging, prod).
Implementar code splitting con React.lazy y Suspense para pantallas pesadas.
Optimizar assets: comprimir imágenes, usar iconos vectoriales, y cachear recursos.
Auditar dependencias con npm audit y eliminar bibliotecas no usadas.
Configurar app.json con ajustes específicos por plataforma (ej., ios.requiresFullScreen).
Probar el build de producción localmente con expo start --no-dev --minify.

Optimización de una App Expo Existente

En este ejercicio, tomarás una app Expo básica y aplicarás técnicas de configuración avanzada y optimización para prepararla para producción. Sigue estos pasos:

Clona o crea un proyecto Expo con al menos 3 pantallas y algunas dependencias pesadas (ej., lodash, moment).
Analiza el bundle actual ejecutando expo build:ios --analyze-bundle (simulado con expo export) y documenta los módulos más grandes.
Configura metro.config.js para habilitar minificación con Terser y define un alias para una carpeta src/@components.
Modifica app.json para añadir configuraciones específicas de iOS y Android, como deshabilitar fuentes no usadas y ajustar la memoria.
Implementa environment variables usando expo-constants para gestionar una URL de API entre entornos dev y prod.
Ejecuta una build de prueba con expo start --no-dev --minify y verifica que no haya errores.

Pistas

Usa la documentación de Expo para configurar metro.config.js con getDefaultConfig.
Para environment variables, define EXPO_PUBLIC_API_URL en .env y accede via Constants.manifest.extra.
Prueba con un dispositivo real o emulador para ver los cambios en rendimiento.

Evalua tu comprension

Completa el quiz interactivo de arriba para ganar XP.

Quiz: Evaluación de configuración y optimización

Quiz Interactivo