Turbopack

Turbopack est un bundler incrémental optimisé pour JavaScript et TypeScript, écrit en Rust et intégré à Next.js. Vous pouvez utiliser Turbopack avec les routeurs Pages et App pour une expérience de développement locale beaucoup plus rapide.

Pourquoi Turbopack ?

Nous avons créé Turbopack pour améliorer les performances de Next.js, notamment grâce à :

• Graphe unifié : Next.js prend en charge plusieurs environnements de sortie (par exemple, client et serveur). Gérer plusieurs compilateurs et assembler les bundles peut être fastidieux. Turbopack utilise un graphe unique et unifié pour tous les environnements.
• Bundling vs ESM natif : Certains outils évitent le bundling en développement et s'appuient sur l'ESM natif du navigateur. Cela fonctionne bien pour les petites applications mais peut ralentir les grandes applications en raison d'un nombre excessif de requêtes réseau. Turbopack effectue le bundling en développement, mais de manière optimisée pour maintenir les grandes applications rapides.
• Calcul incrémental : Turbopack parallélise le travail sur plusieurs cœurs et met en cache les résultats jusqu'au niveau de la fonction. Une fois qu'une tâche est terminée, Turbopack ne la répète pas.
• Bundling paresseux : Turbopack ne bundle que ce qui est réellement demandé par le serveur de développement. Cette approche paresseuse peut réduire les temps de compilation initiaux et l'utilisation de la mémoire.

Premiers pas

Pour activer Turbopack dans votre projet Next.js, ajoutez le flag --turbopack aux scripts dev et build dans votre fichier package.json :

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

Actuellement, Turbopack pour dev est stable, tandis que build est en alpha. Nous travaillons activement à la prise en charge de la production alors que Turbopack se rapproche de la stabilité.

Fonctionnalités prises en charge

Turbopack dans Next.js est zéro-configuration pour les cas d'utilisation courants. Voici un résumé de ce qui est pris en charge dès le départ, ainsi que quelques références sur la façon de configurer Turbopack plus en détail si nécessaire.

Fonctionnalités linguistiques

Fonctionnalités du framework et de React

CSS et styles

Ressources

Résolution de modules

Performances et Fast Refresh

Fonctionnalités non prises en charge et non prévues

Certaines fonctionnalités ne sont pas encore implémentées ou ne sont pas prévues :

• Fonctionnalités héritées des CSS Modules
  • Les pseudo-classes autonomes :local et :global (seule la variante fonction :global(...) est prise en charge).
  • La règle @value (remplacée par les variables CSS).
  • Les règles ICSS :import et :export.
• Configuration webpack() dans next.config.js Turbopack remplace webpack, donc les configurations webpack() ne sont pas reconnues. Utilisez plutôt la configuration turbopack.
• AMP Non prévu pour Turbopack dans Next.js.
• Yarn PnP Non prévu pour Turbopack dans Next.js.
• experimental.urlImports Non prévu pour Turbopack.
• experimental.esmExternals Non prévu. Turbopack ne prend pas en charge la configuration héritée esmExternals dans Next.js.
• Certains drapeaux expérimentaux de Next.js
  • experimental.typedRoutes
  • experimental.nextScriptWorkers
  • experimental.sri.algorithm
  • experimental.fallbackNodePolyfills Nous prévoyons de les implémenter à l'avenir.

Pour une analyse détaillée de chaque drapeau de fonctionnalité et de son statut, consultez la Référence API de Turbopack.

Configuration

Turbopack peut être configuré via next.config.js (ou next.config.ts) sous la clé turbopack. Les options de configuration incluent :

• rules Définissez des loaders webpack supplémentaires pour les transformations de fichiers.
• resolveAlias Créez des alias manuels (comme resolve.alias dans webpack).
• resolveExtensions Modifiez ou étendez les extensions de fichiers pour la résolution de modules.
• moduleIds Définissez comment les ID de modules sont générés ('named' vs 'deterministic').
• treeShaking Activez ou désactivez le tree shaking en développement et dans les futures builds de production.
• memoryLimit Définissez une limite de mémoire (en octets) pour Turbopack.

module.exports = {
  turbopack: {
    // Exemple : ajout d'un alias et d'une extension de fichier personnalisée
    resolveAlias: {
      underscore: 'lodash',
    },
    resolveExtensions: ['.mdx', '.tsx', '.ts', '.jsx', '.js', '.json'],
  },
}

Pour des exemples de configuration plus approfondis, consultez la documentation de configuration de Turbopack.

Génération de fichiers de trace pour le débogage des performances

Si vous rencontrez des problèmes de performances ou de mémoire et souhaitez aider l'équipe Next.js à les diagnostiquer, vous pouvez générer un fichier de trace en ajoutant NEXT_TURBOPACK_TRACING=1 à votre commande dev :

NEXT_TURBOPACK_TRACING=1 next dev --turbopack

Cela produira un fichier .next/trace-turbopack. Incluez ce fichier lorsque vous créez une issue GitHub sur le dépôt Next.js pour nous aider à enquêter.

Résumé

Turbopack est un bundler basé sur Rust et incrémental conçu pour rendre le développement local et les builds rapides, en particulier pour les grandes applications. Il est intégré à Next.js, offrant une prise en charge zéro-configuration du CSS, React et TypeScript.

Restez à l'écoute pour plus de mises à jour alors que nous continuons à améliorer Turbopack et à ajouter la prise en charge des builds de production. En attendant, essayez-le avec next dev --turbopack et faites-nous part de vos retours.

Changements de version