Turbopack

Turbopack es un empaquetador incremental optimizado para JavaScript y TypeScript, escrito en Rust e integrado en Next.js. Puedes usar Turbopack tanto con el Enrutador de Páginas como con el de Aplicaciones para una experiencia de desarrollo local mucho más rápida.

¿Por qué Turbopack?

Desarrollamos Turbopack para impulsar el rendimiento de Next.js, incluyendo:

• Grafo unificado: Next.js soporta múltiples entornos de salida (ej. cliente y servidor). Gestionar múltiples compiladores y unir paquetes puede ser tedioso. Turbopack usa un grafo único y unificado para todos los entornos.
• Empaquetado vs ESM nativo: Algunas herramientas omiten el empaquetado en desarrollo y dependen del ESM nativo del navegador. Esto funciona bien para aplicaciones pequeñas pero puede ralentizar aplicaciones grandes debido a excesivas solicitudes de red. Turbopack empaqueta en desarrollo, pero de manera optimizada para mantener rápidas las aplicaciones grandes.
• Cálculo incremental: Turbopack paraleliza el trabajo entre núcleos y almacena en caché los resultados hasta el nivel de función. Una vez que un trabajo está hecho, Turbopack no lo repite.
• Empaquetado diferido: Turbopack solo empaqueta lo que realmente solicita el servidor de desarrollo. Este enfoque diferido puede reducir los tiempos de compilación inicial y el uso de memoria.

Comenzar

Para habilitar Turbopack en tu proyecto Next.js, añade el flag --turbopack a los scripts dev y build en tu archivo package.json:

{
  "scripts": {
    "dev": "next dev --turbopack",
    "build": "next build --turbopack",
    "start": "next start"
  }
}

Actualmente, Turbopack para dev es estable, mientras que build está en alpha. Estamos trabajando activamente en el soporte para producción a medida que Turbopack se acerca a la estabilidad.

Características soportadas

Turbopack en Next.js tiene configuración cero para los casos de uso comunes. A continuación se resume lo que está soportado de forma predeterminada, además de algunas referencias sobre cómo puedes configurar Turbopack más adelante si es necesario.

Características de lenguaje

Características del framework y React

CSS y estilos

Recursos

Resolución de módulos

Rendimiento y Fast Refresh

Características no soportadas y no planeadas

Algunas características aún no están implementadas o no están planeadas:

• Características heredadas de CSS Modules
  • Pseudo-clases independientes :local y :global (solo se soporta la variante de función :global(...)).
  • La regla @value (sustituida por variables CSS).
  • Reglas ICSS :import y :export.
  • composes en .module.css componiendo un archivo .css. En webpack esto trataría el archivo .css como un CSS Module, con Turbopack el archivo .css siempre será global. Esto significa que si quieres usar composes en un CSS Module, necesitas cambiar el archivo .css a .module.css.
  • @import en CSS Modules importando .css como CSS Module. En webpack esto trataría el archivo .css como un CSS Module, con Turbopack el archivo .css siempre será global. Esto significa que si quieres usar @import en un CSS Module, necesitas cambiar el archivo .css a .module.css.
• Configuración webpack() en next.config.js Turbopack reemplaza webpack, por lo que las configuraciones webpack() no son reconocidas. Usa la configuración turbopack en su lugar.
• AMP No está planeado el soporte para Turbopack en Next.js.
• Yarn PnP No está planeado el soporte para Turbopack en Next.js.
• experimental.urlImports No está planeado para Turbopack.
• experimental.esmExternals No está planeado. Turbopack no soporta la configuración heredada esmExternals en Next.js.
• Algunas banderas experimentales de Next.js
  • experimental.typedRoutes
  • experimental.nextScriptWorkers
  • experimental.sri.algorithm
  • experimental.fallbackNodePolyfills Planeamos implementarlas en el futuro.

Para un desglose detallado de cada bandera de características y su estado, consulta la Referencia de API de Turbopack.

Configuración

Turbopack puede configurarse mediante next.config.js (o next.config.ts) bajo la clave turbopack. Las opciones de configuración incluyen:

• rules Define loaders de webpack adicionales para transformaciones de archivos.
• resolveAlias Crea alias manuales (como resolve.alias en webpack).
• resolveExtensions Cambia o extiende las extensiones de archivo para la resolución de módulos.
• moduleIds Establece cómo se generan los IDs de módulo ('named' vs 'deterministic').
• treeShaking Habilita o deshabilita el tree shaking en desarrollo y futuras builds de producción.
• memoryLimit Establece un límite de memoria (en bytes) para Turbopack.

module.exports = {
  turbopack: {
    // Ejemplo: añadiendo un alias y una extensión de archivo personalizada
    resolveAlias: {
      underscore: 'lodash',
    },
    resolveExtensions: ['.mdx', '.tsx', '.ts', '.jsx', '.js', '.json'],
  },
}

Para ejemplos de configuración más detallados, consulta la documentación de configuración de Turbopack.

Generación de archivos de traza para depuración de rendimiento

Si encuentras problemas de rendimiento o memoria y quieres ayudar al equipo de Next.js a diagnosticarlos, puedes generar un archivo de traza añadiendo NEXT_TURBOPACK_TRACING=1 a tu comando de desarrollo:

NEXT_TURBOPACK_TRACING=1 next dev --turbopack

Esto producirá un archivo .next/trace-turbopack. Incluye ese archivo al crear un issue en GitHub en el repositorio de Next.js para ayudarnos a investigar.

Resumen

Turbopack es un empaquetador basado en Rust e incremental diseñado para hacer que el desarrollo local y las builds sean rápidos, especialmente para aplicaciones grandes. Está integrado en Next.js, ofreciendo soporte sin configuración para CSS, React y TypeScript.

Mantente atento a más actualizaciones mientras continuamos mejorando Turbopack y añadiendo soporte para builds de producción. Mientras tanto, pruébalo con next dev --turbopack y cuéntanos tus comentarios.

Cambios por versión