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:

• Gráfico unificado: Next.js admite múltiples entornos de salida (por ejemplo, cliente y servidor). Gestionar múltiples compiladores y unir paquetes puede ser tedioso. Turbopack utiliza un gráfico ú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 se completa una parte del trabajo, Turbopack no lo repetirá.
• 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.

Comenzando

Para habilitar Turbopack en tu proyecto Next.js, agrega 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 fase alfa. 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 a fondo cuando sea 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.
• 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 completo y detallado de cada bandera de característica 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 compilaciones de producción.
• memoryLimit Establece un límite de memoria (en bytes) para Turbopack.

module.exports = {
  turbopack: {
    // Ejemplo: agregando 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 deseas ayudar al equipo de Next.js a diagnosticarlos, puedes generar un archivo de traza agregando 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 compilaciones 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 agregando soporte para compilaciones de producción. Mientras tanto, pruébalo con next dev --turbopack y cuéntanos tus comentarios.

Cambios por versión