Tindanan Penuh Next.js 15 (Penghala Aplikasi + Tindakan Pelayan) · Pelajaran

Menyelami Konfigurasi Turbopack dan Penyusun

Tala Turbopack, transformasi dan penyusun berasaskan SWC untuk binaan lebih pantas serta output lebih kecil.

Pelajaran 2 daripada 413 langkah

Menyelami Konfigurasi Turbopack dan Penyusun ialah pelajaran Tindanan Penuh Next.js 15 (Penghala Aplikasi + Tindakan Pelayan) percuma di CoddyKit. Ini ialah pelajaran 2 daripada 4. Sebanyak 3 pelajaran dalam laluan pembelajaran ini boleh dibaca sepenuhnya secara percuma — selepas itu, CoddyKit PRO membuka akses kepada semua pelajaran, serta latihan praktikal dengan penyunting kod terbina dalam dan tutor kecerdasan buatan yang tersedia 24/7. Pelajaran ini merupakan sebahagian daripada laluan pembelajaran Tindanan Penuh Next.js 15 (Penghala Aplikasi + Tindakan Pelayan), dan kemajuan anda disegerakkan merentas web serta aplikasi CoddyKit. Kursus Tindanan Penuh Next.js 15 (Penghala Aplikasi + Tindakan Pelayan) merangkumi sejumlah 4 pelajaran.

Sebab Turbopack Diwujudkan

Next.js 15 disertakan dengan Turbopack sebagai pembundel lalai untuk next dev. Ia dibina dalam Rust untuk menggantikan saluran paip Webpack berasaskan JavaScript yang menggerakkan Next.js selama bertahun-tahun.

Masalah utama yang dihadapi Webpack pada skala besar ialah setiap perubahan fail mencetuskan penjelajahan graf dan penilaian semula JavaScript. Dengan 10,000 modul, satu suntingan boleh mengambil masa 8–15 saat sebelum HMR muncul dalam pelayar.

Turbopack menyelesaikan masalah ini melalui tiga keputusan seni bina:

Pengiraan berperingkat — hanya modul yang terjejas oleh perubahan dinilai semula, bukannya keseluruhan graf.
Penyusunan selari — keserentakan Rust yang selamat membolehkan berbilang teras CPU mengubah fail secara serentak.
Pencachean berterusan — hasil transformasi disimpan pada cakera dan kekal selepas proses dimulakan semula.

Hasilnya: masa mula sejuk berkurang kira-kira 50–75% pada aplikasi besar, manakala kependaman HMR menurun kepada satu digit milisaat dalam kebanyakan kes.

Mendayakan Turbopack dalam next.config.ts

Dalam Next.js 15, next dev --turbopack ialah cara yang disyorkan untuk mendayakannya semasa pembangunan. Untuk binaan produksi, Webpack kekal sebagai lalai sehingga Turbopack mencapai kesetaraan penuh, jadi anda mengawal bendera tersebut mengikut arahan dalam package.json.

Anda juga boleh memasukkan pilihan Turbopack terus dalam next.config.ts di bawah kunci experimental.turbo (dinamakan semula kepada turbopack dalam API stabil).

Perkara penting yang perlu diingati:

Kunci turbopack hanya mempengaruhi next dev; binaan produksi masih menggunakan Webpack melainkan anda menghantar --turbopack kepada next build (eksperimen dalam v15).
Pilihan dalam turbopack digabungkan di atas lalai terbina dalam Turbopack — anda tidak perlu menyalin semula keseluruhan konfigurasi.
Fail konfigurasi TypeScript (next.config.ts) memberikan keselamatan jenis penuh untuk pilihan ini melalui jenis NextConfig.

// next.config.ts
import type { NextConfig } from 'next';

const config: NextConfig = {
  turbopack: {
    // Turbopack-specific options go here
    // (rules, resolveAlias, resolveExtensions, etc.)
  },
};

export default config;

Pemuat Turbopack: Menggantikan Peraturan Webpack

Webpack menggunakan module.rules dengan pemuat seperti babel-loader atau raw-loader. Turbopack mempunyai padanan yang dipanggil rules dalam blok konfigurasi turbopack.

Setiap peraturan memetakan glob sambungan fail kepada satu atau lebih pemuat yang serasi dengan Turbopack. Perhatikan bahawa pemuat Webpack tidak serasi secara langsung — Turbopack memerlukan pemuat yang melaksanakan API transformasinya sendiri, walaupun banyak pemuat popular (contohnya @svgr/webpack, @mdx-js/loader) telah menerbitkan versi yang serasi dengan Turbopack.

Anatomi sesuatu peraturan:

test — rentetan glob atau regex yang sepadan dengan laluan fail
use — tatasusunan objek pemuat, setiap satunya mempunyai nama pakej loader dan objek options pilihan

Pemuat dijalankan dari kanan ke kiri, sama seperti dalam Webpack.

// next.config.ts
import type { NextConfig } from 'next';

const config: NextConfig = {
  turbopack: {
    rules: {
      // Transform .svg files into React components
      '*.svg': {
        loaders: ['@svgr/webpack'],
        as: '*.js',
      },
      // Transform raw .txt files into string modules
      '*.txt': {
        loaders: ['raw-loader'],
        as: '*.js',
      },
    },
  },
};

export default config;

Alias Modul dengan resolveAlias

Alias laluan membolehkan anda menulis import { Button } from '@ui/Button' dan bukannya ../../components/ui/Button. Turbopack menyokongnya melalui turbopack.resolveAlias, yang mencerminkan resolve.alias milik Webpack.

Anda juga perlu memastikan paths dalam tsconfig.json anda sentiasa sepadan — penyusun TypeScript menggunakan paths untuk pemeriksaan jenis, manakala Turbopack menggunakan resolveAlias untuk pembentukan bundel. Ketidakpadanan menyebabkan ralat "modul tidak ditemui" semasa binaan walaupun jenis kelihatan betul dalam penyunting anda.

Pola biasa: takrifkan pemetaan kanonik di satu tempat dan terbitkan kedua-dua konfigurasi daripadanya, atau gunakan next/jest yang membaca laluan tsconfig.json secara automatik untuk Jest.

// next.config.ts
import type { NextConfig } from 'next';
import path from 'path';

const config: NextConfig = {
  turbopack: {
    resolveAlias: {
      '@ui': path.resolve(__dirname, 'src/components/ui'),
      '@lib': path.resolve(__dirname, 'src/lib'),
      '@server': path.resolve(__dirname, 'src/server'),
    },
  },
};

export default config;

// tsconfig.json (keep in sync)
// {
//   "compilerOptions": {
//     "paths": {
//       "@ui/*": ["./src/components/ui/*"],
//       "@lib/*": ["./src/lib/*"],
//       "@server/*": ["./src/server/*"]
//     }
//   }
// }

SWC: Penyusun Terbina Dalam Next.js

Seiring dengan Turbopack, Next.js menggunakan SWC (Speedy Web Compiler) sebagai pengubah kod. SWC juga ditulis dalam Rust dan mengendalikan penanggalan TypeScript, transformasi JSX, peminimuman serta transformasi sintaks pilihan.

Perbezaan penting:

Turbopack ialah pembundel — ia membina graf modul, menyelesaikan import dan mengatur pemecahan kod.
SWC ialah pengubah — ia menukar fail individu (TS → JS, JSX → panggilan React.createElement, dan sebagainya).

Kedua-duanya aktif secara lalai dalam Next.js 15. SWC menggantikan Babel untuk kebanyakan projek; jika repositori anda masih mempunyai .babelrc, Next.js akan beralih kembali kepada Babel dan menyahdayakan SWC — ini ialah punca biasa binaan menjadi perlahan dalam projek yang telah dipindahkan.

Untuk mengesahkan SWC aktif, jalankan next build dan cari "SWC minify" dalam output.

Mengkonfigurasi Transformasi SWC dalam next.config.ts

Transformasi SWC dikonfigurasi pada aras teratas NextConfig (bukan di dalam turbopack). Pilihan yang paling kerap dilaraskan ialah:

compiler.styledComponents — mendayakan pemalam SWC untuk styled-components, dengan menambahkan nama paparan dan nama kelas yang pasti.
compiler.emotion — perkara yang sama untuk pustaka CSS-dalam-JS Emotion.
compiler.removeConsole — membuang panggilan console.* daripada binaan produksi. Anda boleh membenarkan kaedah tertentu (contohnya mengekalkan console.error).
compiler.reactRemoveProperties — membuang prop React tersuai (seperti data-testid) daripada output produksi, sekali gus mengurangkan muatan HTML.

Transformasi ini dijalankan pada setiap fail semasa penyusunan, jadi hanya dayakan perkara yang diperlukan supaya masa binaan kekal singkat.

// next.config.ts
import type { NextConfig } from 'next';

const isProd = process.env.NODE_ENV === 'production';

const config: NextConfig = {
  compiler: {
    // Remove console.log but keep console.error in production
    removeConsole: isProd
      ? { exclude: ['error', 'warn'] }
      : false,

    // Strip data-testid attributes from JSX in production
    reactRemoveProperties: isProd
      ? { properties: ['^data-testid$'] }
      : false,

    // Enable styled-components SWC plugin
    styledComponents: true,
  },
};

export default config;

Peminimuman SWC berbanding Terser

Next.js 15 menggunakan SWC untuk peminimuman secara lalai (swcMinify: true kini menjadi lalai tersirat). Ini menggantikan Terser, iaitu peminimum berasaskan JavaScript yang menjadi standard selama bertahun-tahun.

Perbandingan penanda aras pada aplikasi Next.js sederhana (~300 modul):

Terser: ~18 saat untuk peminimuman semasa next build
Peminimum SWC: ~3 saat — kira-kira 6× lebih pantas

Peminimuman SWC juga mengambil kira skop dan melakukan penghapusan kod mati (DCE) pada aras modul. Digabungkan dengan tree-shaking daripada pembundel, ini bermakna eksport yang tidak digunakan dan mungkin dikekalkan oleh Terser boleh dihapuskan.

Jika anda menemui kes luar biasa apabila peminimuman SWC menghasilkan output yang tidak betul (jarang berlaku tetapi mungkin), anda boleh kembali menggunakan Terser:

// next.config.ts — only needed if SWC minifier causes issues
import type { NextConfig } from 'next';

const config: NextConfig = {
  // Explicitly disable SWC minification and fall back to Terser
  swcMinify: false,
};

export default config;

// Alternatively, to tune SWC minification behavior:
// (no direct config exposed yet — SWC minifier config is internal)
// The recommended approach is to leave swcMinify: true (default)
// and report any correctness bugs to the Next.js GitHub repo.

Penganalisis Bundel: Memvisualkan Perkara yang Dihantar

Sebelum mengoptimumkan saiz bundel, anda perlu melihatnya. Pakej @next/bundle-analyzer membalut webpack-bundle-analyzer dan mengintegrasikannya dengan binaan Next.js.

Selepas persediaan, menjalankan ANALYZE=true next build akan membuka treemap interaktif dalam pelayar anda yang menunjukkan setiap modul dan sumbangannya kepada setiap bahagian JS.

Perkara yang perlu dicari:

node_modules yang besar — contohnya moment.js (>70 KB digzipkan) apabila anda hanya memerlukan pemformatan tarikh. Gantikannya dengan date-fns atau Intl.DateTimeFormat natif.
Pakej pendua — dua versi react atau lodash yang muncul dalam treemap menandakan konflik penyelesaian.
Bahagian Pelayan berbanding Klien — kod yang sepatutnya berada pada pelayan bocor ke dalam bundel klien (contohnya klien DB).

Nota: bundle-analyzer pada masa ini berfungsi dengan binaan Webpack (next build tanpa --turbopack). Penganalisis natif Turbopack sedang dirancang.

// next.config.ts
import type { NextConfig } from 'next';
import bundleAnalyzer from '@next/bundle-analyzer';

const withBundleAnalyzer = bundleAnalyzer({
  enabled: process.env.ANALYZE === 'true',
  openAnalyzer: true,
});

const config: NextConfig = {
  // ... your other config
};

export default withBundleAnalyzer(config);

// package.json script:
// "analyze": "ANALYZE=true next build"

Konfigurasi Cache Berterusan Turbopack

Cache berterusan Turbopack menyimpan artifak transformasi dan pembentukan bundel dalam .next/cache/turbopack. Pada pelaksanaan next dev yang kedua (atau dalam CI selepas cache dipulihkan), Turbopack membaca daripada cakera dan bukannya mengira semula — sekali gus mengurangkan masa mula sejuk untuk saluran paip CI dengan ketara.

Kelakuan utama yang perlu difahami:

Cache ini beralamatkan kandungan: kunci cache bagi sesuatu fail ialah cincangan kandungannya bersama kandungan semua kebergantungannya. Anda tidak akan mendapat padanan cache yang lapuk.
Direktori cache boleh menjadi besar dari semasa ke semasa. next dev mempunyai dasar pengusiran LRU terbina dalam, tetapi anda boleh memadamkannya secara manual dengan rm -rf .next/cache/turbopack.
Dalam CI, cache direktori .next/cache antara pelaksanaan. Contoh GitHub Actions:

# .github/workflows/ci.yml (relevant excerpt)
jobs:
  build:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4

      - name: Restore Next.js cache
        uses: actions/cache@v4
        with:
          path: |
            ~/.npm
            ${{ github.workspace }}/.next/cache
          key: ${{ runner.os }}-nextjs-${{ hashFiles('**/package-lock.json') }}-${{ hashFiles('**/*.ts','**/*.tsx') }}
          restore-keys: |
            ${{ runner.os }}-nextjs-${{ hashFiles('**/package-lock.json') }}-

      - run: npm ci
      - run: npm run build

Mengawal Pemecahan Kod dan Strategi Bahagian

Next.js membahagikan kod secara automatik pada peringkat laluan (setiap halaman mendapat cebisan JS sendiri), tetapi Anda boleh mempengaruhi pembahagian ini dengan lebih lanjut menggunakan dua teknik:

1. Import dinamik (next/dynamic) — muatkan komponen berat secara malas supaya komponen tersebut tidak disertakan dalam bundel halaman awal. Ini ialah alat utama untuk mengurangkan JS Muatan Pertama.

2. optimizePackageImports — pilihan konfigurasi Next.js 15 yang memberitahu pengkompil supaya melakukan tree-shaking pada pakej tertentu yang tidak mempunyai eksport ESM yang betul. Pustaka seperti lucide-react, @radix-ui/* dan pek ikon sering mendapat manfaat daripadanya.

Kedua-dua teknik ini berfungsi dengan Turbopack dan Webpack. optimizePackageImports amat berkuasa kerana tidak memerlukan sebarang perubahan pada pernyataan import Anda — ia semata-mata merupakan petunjuk untuk penggabung.

// next.config.ts
import type { NextConfig } from 'next';

const config: NextConfig = {
  // Tell the compiler to tree-shake these packages
  // even if they lack proper ESM export maps
  experimental: {
    optimizePackageImports: [
      'lucide-react',
      '@radix-ui/react-icons',
      'recharts',
      '@heroicons/react',
    ],
  },
};

export default config;

// In your component — no change needed:
// import { ChevronRight, User } from 'lucide-react';
// Only ChevronRight and User are bundled, not the full icon library.

Mengukur Prestasi Binaan dengan next build --profile

Apabila masa binaan meningkat secara tidak dijangka, Next.js menyediakan pemprofilan terbina dalam untuk mengenal pasti punca kelewatan. Dua bendera paling berguna ialah:

next build --profile — menghasilkan jejak pemprofil React dan fail .cpuprofile yang boleh Anda buka dalam Chrome DevTools untuk melihat transformasi atau pemalam yang menggunakan masa paling banyak.
NEXT_TELEMETRY_DEBUG=1 next build — mencetak pecahan masa yang terperinci bagi setiap fasa (penyusunan, pemeriksaan jenis, penjanaan statik dan sebagainya) ke output stdout.

Khusus untuk Turbopack, bendera --turbopack memaparkan masa penyusunan bagi setiap segmen laluan dalam output terminal. Satu laluan yang mengambil masa jauh lebih lama selalunya menunjukkan resolveAlias yang tiada, menyebabkan Turbopack merentasi laluan relatif yang dalam pada setiap kitaran HMR.

Aliran kerja praktikal: jalankan dengan pemprofilan → kenal pasti fasa paling perlahan → gunakan perubahan konfigurasi yang berkaitan → ukur semula. Jangan sekali-kali meneka pengoptimuman pada penggabung yang kompleks.

// scripts/build-perf.ts — a small helper to time build phases
// Run with: npx ts-node scripts/build-perf.ts

import { execSync } from 'child_process';

function timed(label: string, cmd: string): void {
  const start = Date.now();
  console.log(`\n>>> Starting: ${label}`);
  try {
    execSync(cmd, { stdio: 'inherit', env: { ...process.env } });
  } catch {
    console.error(`[FAILED] ${label}`);
    process.exit(1);
  }
  const elapsed = ((Date.now() - start) / 1000).toFixed(2);
  console.log(`<<< Done: ${label} in ${elapsed}s`);
}

timed('Type check', 'npx tsc --noEmit');
timed('Next.js build', 'npx next build');

Semakan Pengetahuan: Pemuat Turbopack berbanding Pemuat Webpack

Uji pemahaman Anda tentang perbezaan utama antara sistem pemuat Turbopack dengan sistem pemuat Webpack dalam Next.js 15.

Jawab dalam pelajaran interaktif

Ulang Kaji Pelajaran: Konfigurasi Turbopack dan Pengkompil

Dalam pelajaran ini, Anda meneroka keseluruhan tindanan konfigurasi pengkompil dan penggabung dalam Next.js 15:

Seni bina Turbopack — pengiraan berperingkat, pekerja Rust selari dan penyimpanan cache cakera berterusan menjadikannya jauh lebih pantas daripada Webpack untuk aliran kerja pembangunan.
blok konfigurasi turbopack — gunakan rules untuk transformasi pada peringkat fail, resolveAlias untuk pintasan laluan modul, dan pastikan laluan tsconfig.json selaras bagi mengelakkan ketidakpadanan jenis/bundel.
SWC sebagai pengubah — berbeza daripada Turbopack (penggabung), SWC mengendalikan pelucutan TS, JSX dan pemampatan. Fail .babelrc dalam projek Anda akan menyahaktifkan SWC secara senyap.
pilihan pengkompil — removeConsole, reactRemoveProperties dan pemalam CSS-in-JS dikonfigurasikan pada kunci peringkat teratas compiler, bukan di dalam turbopack.
Analisis bundel — gunakan @next/bundle-analyzer untuk menggambarkan komposisi cebisan dan mengesan kebergantungan besar atau kod pelayan yang bocor ke dalam bundel klien.
optimizePackageImports — petunjuk tanpa perubahan kod yang membolehkan tree-shaking untuk pakej dengan peta eksport ESM yang kurang baik.
Penyimpanan cache CI — simpan cache .next/cache antara pelaksanaan untuk memanfaatkan cache berterusan Turbopack dan mengurangkan masa binaan CI dengan ketara.

Model mental utama: Turbopack mengurus graf, SWC mengurus fail, dan next.config.ts ialah satah kawalan tunggal untuk kedua-duanya.

Percuma untuk bermula

Pelajari TypeScript dengan tutor kecerdasan buatan — percuma

Tulis dan jalankan kod sebenar dalam pelayar anda, dapatkan bantuan segera daripada tutor kecerdasan buatan yang tersedia 24/7, dan sambung semula dari tempat anda berhenti di web atau dalam aplikasi.

Kursus: 22
Pelajaran: 88

Mula belajar secara percuma Lihat kursus penuh

Soalan Lazim

Adakah pelajaran “Menyelami Konfigurasi Turbopack dan Penyusun” percuma?

Ya — sebanyak 3 pelajaran dalam laluan pembelajaran Tindanan Penuh Next.js 15 (Penghala Aplikasi + Tindakan Pelayan), termasuk “Menyelami Konfigurasi Turbopack dan Penyusun”, boleh dibaca sepenuhnya secara percuma di web ini. Selepas itu, CoddyKit PRO membuka akses kepada semua pelajaran, serta latihan interaktif dengan penyunting kod terbina dalam dan tutor kecerdasan buatan yang tersedia 24/7. Kursus Tindanan Penuh Next.js 15 (Penghala Aplikasi + Tindakan Pelayan) merangkumi sejumlah 4 pelajaran.

Apakah yang akan saya pelajari dalam “Menyelami Konfigurasi Turbopack dan Penyusun”?

Tala Turbopack, transformasi dan penyusun berasaskan SWC untuk binaan lebih pantas serta output lebih kecil. Anda berlatih Tindanan Penuh Next.js 15 (Penghala Aplikasi + Tindakan Pelayan) menggunakan kod praktikal yang dijalankan terus dalam pelayar, manakala tutor kecerdasan buatan 24/7 menjawab soalan anda semasa anda mengikuti pelajaran.

Adakah saya memerlukan pengalaman untuk memulakan Tindanan Penuh Next.js 15 (Penghala Aplikasi + Tindakan Pelayan)?

Tiada pengalaman terdahulu diperlukan. Pembelajaran Tindanan Penuh Next.js 15 (Penghala Aplikasi + Tindakan Pelayan) di CoddyKit disusun untuk pelajar daripada peringkat pemula hingga lanjutan, jadi anda boleh bermula di sini atau dari awal dan belajar mengikut kadar anda sendiri. Ini ialah pelajaran 2 daripada 4.

Berapa lamakah pelajaran “Menyelami Konfigurasi Turbopack dan Penyusun” diambil?

Kebanyakan pelajaran CoddyKit mengambil masa kira-kira 5–10 minit. Setiap pelajaran ringkas dan interaktif, jadi anda boleh membuat kemajuan secara berterusan dan menyambung tepat dari tempat anda berhenti di web atau aplikasi.

Bolehkah saya menulis dan menjalankan kod dalam pelajaran Tindanan Penuh Next.js 15 (Penghala Aplikasi + Tindakan Pelayan) ini?

Ya. Setiap pelajaran Tindanan Penuh Next.js 15 (Penghala Aplikasi + Tindakan Pelayan) menyertakan penyunting kod terbina dalam, jadi anda boleh menulis dan menjalankan kod sebenar terus dalam pelayar serta menerima maklum balas kecerdasan buatan serta-merta — tanpa memerlukan persediaan setempat.

Semua pelajaran dalam kursus ini

Menganalisis dan Mengecilkan Himpunan Klien
Menyelami Konfigurasi Turbopack dan Penyusun
Sempadan Modul dengan server-only dan client-only
Import Dinamik, Pemisahan Kod dan Hidratasi Lambat

← Kembali ke Tindanan Penuh Next.js 15 (Penghala Aplikasi + Tindakan Pelayan)