Vai al contenuto

Turbopack Cheatsheet

__HTML_TAG_69_Turbopack - The Incremental Bundler__HTML_TAG_70_ __HTML_TAG_71_ Turbopack è un bundler incrementale ottimizzato per JavaScript e TypeScript, scritto in Rust. Creato da Vercel, è progettato per essere il successore di Webpack con 10x aggiornamenti più veloci di Vite e 700x più veloce di Webpack. Traduzione: __HTML_TAG_73_ __HTML_TAG_74_ __HTML_TAG_79_ __HTML_TAG_80_ ## Tavola dei contenuti - [Introduzione](#introduzione) - [Installazione](#installazione) [Getting Started](#getting-started) [Next.js Integration](#nextjs-integration) - [Configurazione](#configurazione) - [Server di sviluppo](#server di sviluppo) - [Processo di costruzione](#build-process) - [Asset Handling](#asset-handling) - [CSS Support](#css-support) - [TypeScript Support](#typescript-support) - [variabili ambientali](#variabili ambientali) [Plugins](#plugins) - [Performance](#performance) - (Migrazione) - [Troubleshooting](#troubleshooting) [Le migliori pratiche](#best-practices) ## Introduzione # Cos'è Turbopack? Turbopack è un bundler incrementale ottimizzato per JavaScript e TypeScript, scritto in Rust dai creatori di Webpack e Next.js. Rappresenta un cambiamento fondamentale nel funzionamento dei bundlers, concentrandosi sul calcolo incrementale per raggiungere velocità senza precedenti. # Caratteristiche chiave - ** Computazione ambientale ** Solo i processi che sono cambiati - **Rust Performance**: Costruito in ruggine per la massima velocità - **Hot Module Sostituzione**: Aggiornamenti istantanei durante lo sviluppo - **Framework Agnostic**: Funziona con qualsiasi framework JavaScript - **Next.js Integrazione ** Supporto di prima classe per le applicazioni Next.js - **TypeScript Native**: Supporto TypeScript integrato senza configurazione ### Performance Benchmarks 
# Turbopack vs other bundlers (startup time)
Turbopack: ~1.8s
Vite: ~11.4s
Webpack: ~16.5s

# Hot updates
Turbopack: ~6ms
Vite: ~30ms
Webpack: ~612ms
## Installazione ### Next.js Integration (Consigliato) Traduzione: ### Existing Next.js Project Traduzione: ### Installazione standalone (Alpha) Traduzione: ## Verifica l'installazione Traduzione: # ### Basic Next.js Setup con Turbopack Traduzione: ### Struttura del progetto Traduzione: # Configurazione di base Traduzione: ### First Component Traduzione: ## Next.js Integrazione ### App Router with Turbopack Traduzione: 
// app/page.tsx
import Counter from './components/Counter'
import Link from 'next/link'

export default function Home() {
  return (
    <div className="space-y-8">
      <h1 className="text-4xl font-bold text-center">
        Welcome to Turbopack
      </h1>

      <div className="grid grid-cols-1 md:grid-cols-2 gap-8">
        <div className="space-y-4">
          <h2 className="text-2xl font-semibold">Features</h2>
          <ul className="list-disc list-inside space-y-2">
            <li>⚡ Lightning fast HMR</li>
            <li>🦀 Built in Rust</li>
            <li>📦 Incremental bundling</li>
            <li>🔥 Hot module replacement</li>
          </ul>
        </div>

        <Counter />
      </div>

      <div className="text-center">
        <Link 
          href="/about" 
          className="text-blue-500 hover:text-blue-700 underline"
        >
          Learn more about Turbopack
        </Link>
      </div>
    </div>
  )
}
## Pages Router with Turbopack Traduzione: 
// pages/index.tsx
import { useState } from 'react'
import Head from 'next/head'

export default function Home() {
  const [message, setMessage] = useState('Hello Turbopack!')

  return (
    <>
      <Head>
        <title>Turbopack Demo</title>
        <meta name="description" content="Turbopack demonstration" />
      </Head>

      <div className="container mx-auto px-4 py-8">
        <h1 className="text-4xl font-bold mb-8">{message}</h1>

        <button
          onClick={() => setMessage('Turbopack is fast!')}
          className="px-6 py-3 bg-green-500 text-white rounded-lg hover:bg-green-600"
        >
          Update Message
        </button>
      </div>
    </>
  )
}
### API Routes Traduzione: 
// pages/api/hello.ts (Pages Router)
import type { NextApiRequest, NextApiResponse } from 'next'

type Data = {
  message: string
  timestamp: string
}

export default function handler(
  req: NextApiRequest,
  res: NextApiResponse<Data>
) {
  res.status(200).json({ 
    message: 'Hello from Turbopack API!',
    timestamp: new Date().toISOString()
  })
}
## Configurazione # Configurazione Turbopack di base Traduzione: ### Configurazione avanzata Traduzione: ### Configurazione script Traduzione: ## Development Server ## Start Development Server Traduzione: ### Opzioni del server di sviluppo Traduzione: ### sostituzione del modulo caldo Traduzione: ### Development Debugging Traduzione: ## Processo di costruzione ### Production Build Traduzione: ## # Configurazione di compilazione Traduzione: ## # Build Analysis Traduzione: ### Custom Build Scripts Traduzione: ## Asset Handling ### Asset statici Traduzione: ### SVG Manipolazione Traduzione: 
// components/IconComponent.tsx
import { ReactComponent as Icon } from '../assets/icon.svg'

export default function IconComponent() {
  return (
    <div className="flex items-center space-x-2">
      <Icon className="w-6 h-6 text-blue-500" />
      <span>SVG Icon</span>
    </div>
  )
}
### Font Caricamento Traduzione: ### Importazioni dinamiche Traduzione: ## CSS Support ## Tailwind CSS Traduzione: 
// tailwind.config.js
/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    './pages/**/*.{js,ts,jsx,tsx,mdx}',
    './components/**/*.{js,ts,jsx,tsx,mdx}',
    './app/**/*.{js,ts,jsx,tsx,mdx}',
  ],
  theme: {
    extend: {
      colors: {
        primary: '#3b82f6',
        secondary: '#64748b',
      },
    },
  },
  plugins: [],
}

/* app/globals.css */
@tailwind base;
@tailwind components;
@tailwind utilities;

@layer components {
  .btn-primary {
    @apply px-4 py-2 bg-primary text-white rounded-lg hover:bg-blue-600 transition-colors;
  }
}
### Modulo CSS # 
// components/Button.tsx
import styles from './Button.module.css'
import { ReactNode } from 'react'

interface ButtonProps {
  children: ReactNode
  variant?: 'primary' | 'secondary'
  onClick?: () => void
}

export default function Button({ 
  children, 
  variant = 'primary', 
  onClick 
}: ButtonProps) {
  return (
    <button 
      className={`${styles.button} ${styles[variant]}`}
      onClick={onClick}
    >
      {children}
    </button>
  )
}
### Styled Components Traduzione: 
// components/StyledButton.tsx
'use client'

import styled from 'styled-components'

const StyledButton = styled.button<{ variant: 'primary' | 'secondary' }>`
  padding: 0.5rem 1rem;
  border: none;
  border-radius: 0.375rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s;

  background-color: ${props => 
    props.variant === 'primary' ? '#3b82f6' : '#64748b'
  };
  color: white;

  &:hover {
    background-color: ${props => 
      props.variant === 'primary' ? '#2563eb' : '#475569'
    };
  }
`

export default function Button({ 
  children, 
  variant = 'primary',
  ...props 
}: {
  children: React.ReactNode
  variant?: 'primary' | 'secondary'
  onClick?: () => void
}) {
  return (
    <StyledButton variant={variant} {...props}>
      {children}
    </StyledButton>
  )
}
### Sass/SCSS Supporto Traduzione: 
// styles/components.scss
$primary-color: #3b82f6;
$secondary-color: #64748b;
$border-radius: 0.375rem;

@mixin button-base {
  padding: 0.5rem 1rem;
  border: none;
  border-radius: $border-radius;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s;
}

.btn {
  @include button-base;

  &--primary {
    background-color: $primary-color;
    color: white;

    &:hover {
      background-color: darken($primary-color, 10%);
    }
  }

  &--secondary {
    background-color: $secondary-color;
    color: white;

    &:hover {
      background-color: darken($secondary-color, 10%);
    }
  }
}
## Supporto TypeScript ### Configurazione script Traduzione: ### Tipo Definizioni Traduzione: ### Componenti digitati Traduzione: ### Ganci personalizzati con TypeScript Traduzione: ## Variabili dell'ambiente ### Configurazione dell'ambiente Traduzione: 
# .env.production
NEXT_PUBLIC_API_URL=https://api.production.com
NEXT_PUBLIC_APP_NAME=Production App
DATABASE_URL=postgresql://user:password@prod-db:5432/mydb
SECRET_KEY=production-secret-key
#### Utilizzo delle variabili ambientali Traduzione: 
// components/ApiExample.tsx
'use client'

import { config } from '@/lib/config'
import { useEffect, useState } from 'react'

export default function ApiExample() {
  const [data, setData] = useState(null)

  useEffect(() => {
    fetch(`${config.apiUrl}/hello`)
      .then(res => res.json())
      .then(setData)
  }, [])

  return (
    <div className="p-4 border rounded-lg">
      <h3 className="font-semibold mb-2">API Response</h3>
      <p className="text-sm text-gray-600 mb-2">
        API URL: {config.apiUrl}
      </p>
      <pre className="text-xs bg-gray-100 p-2 rounded">
        {JSON.stringify(data, null, 2)}
      </pre>
    </div>
  )
}
### Configurazione runtime Traduzione: # Plugin # ### Supporto Plugin corrente Traduzione: ### Webpack Plugins (Fallback) Traduzione: ## # Future Plugin System Traduzione: ## Performance ### Performance Benchmarks Traduzione: ### Performance Monitoring Traduzione: ### Analisi Bundle __________ 
// next.config.js
const withBundleAnalyzer = require('@next/bundle-analyzer')({
  enabled: process.env.ANALYZE === 'true',
})

const nextConfig = {
  experimental: {
    turbo: {
      // Turbopack configuration
    },
  },
}

module.exports = withBundleAnalyzer(nextConfig)
# Migrazione # ### Da Webpack a Turbopack Traduzione: ### Migration Checklist [ ] Aggiornamento Next.js alla versione 13.5+ - Cosa? Aggiungi `--turbo` flag to dev script - Cosa? Testare tutte le caratteristiche nello sviluppo - Cosa? Aggiornamento configurazione webpack personalizzata - Cosa? Verificare che tutti i caricatori funzionino correttamente - Cosa? Prova sostituzione del modulo caldo - Cosa? Verificare la compatibilità del processo ### Problemi comuni di migrazione Traduzione: ### Migrazione graduale Traduzione: ## Risoluzione dei problemi ### Questioni comuni ##### Turbopack Not Start Traduzione: #### Problema di risoluzione del modulo Traduzione: #### Hot Reload Not Working Traduzione: #### Costruire errori Traduzione: ## Debug Configuration Traduzione: # Migliori Pratiche ### Struttura del progetto Traduzione: ## Performance Best Practices - ** Utilizzare Turbopack per lo sviluppo** per ottenere i massimi vantaggi di velocità - **Implementare un codice corretto di divisione** con importazioni dinamiche - **Ottimizzare le immagini** con il componente Next.js Image - **Utilizzare TypeScript** per una migliore esperienza di sviluppo - ** Dimensione del fascio del motorino** con l'analizzatore del fascio ### Migliori pratiche di sviluppo - **Start with `--turbo`___ flag** per lo sviluppo - ** Utilizzare le importazioni assolute ** con gli alias del percorso - **Attuazione dei limiti di errore appropriati* * # Usare DevTools # # per il debug # -**Test hot reload** funzionalità regolarmente ### Le migliori pratiche di produzione - **Test costruisce ** prima della distribuzione - * Performance motoria** metriche - ** Utilizzare variabili di ambiente** per la configurazione - **Implementa le strategie corrette di caching** - ** Dimensione del fascio del motorino** e prestazioni --- ## Sommario Turbopack rappresenta il futuro del bundling JavaScript con il suo approccio incrementale e le prestazioni potenziate da Rust. Le caratteristiche principali includono: - "Incremental Bundling" Solo i processi cambiati file per la massima velocità - **Rust Performance**: Costruito in ruggine per aggiornamenti 10x più veloci di Vite - **Next.js Integrazione ** Supporto di prima classe per le applicazioni Next.js - **Hot Module Sostituzione**: Aggiornamenti istantanei durante lo sviluppo - **TypeScript Native**: Supporto TypeScript integrato senza configurazione - **Framework Agnostic**: Funziona con qualsiasi framework JavaScript - **Future-Proof**: Progettato per sostituire Webpack come bundle standard Con l'adozione di Turbopack, è possibile migliorare significativamente la vostra esperienza di sviluppo con build più veloci, reload caldi istantanei, e un flusso di lavoro di sviluppo più reattivo. __HTML_TAG_81_ copia funzioneToClipboard() {} const commands = document.querySelectorAll('code'); tutti i Comandi = ''; comandi. per ogni(cmd => AllCommands += cmd.textContent + '\n'); navigatore.clipboard.writeText(tutti iComandi); alert('Tutti i comandi copiati a clipboard!'); # funzione generaPDF() { finestra.print(); # Traduzione: