Turbopack — nima, webpack dan farqi, sozlash

~15 daq · Next.js · Ilg'or mavzular

Muammodan boshlaylik

Loyiha katta bo'ldi: 2000 ta modul, o'nlab sahifalar.

• npm run dev — server 40 soniyada ishga tushadi
• Birinchi marta sahifani ochish — yana 10–15 soniya "Compiling..."
• Faylni saqlash — o'zgarish brauzerda 3–5 soniyadan keyin

Kuniga yuzlab marta saqlaysiz — har safar kutish. Bunday sekinlikning asosiy sababi — bundler: webpack JavaScript da yozilgan va katta loyihalarda sekinlashadi.

Turbopack nima?

Turbopack — Vercel tomonidan Rust da yozilgan bundler, webpack ning vorisi.

Next.js 15 da next dev --turbopack barqaror bo'ldi; Next.js 16 da Turbopack dev va build uchun standart bundler ga aylandi.

Hayotiy o'xshatma

Katta lug'atda bitta so'zni tuzatdingiz. Eski bosmaxona (webpack) — butun bobni qaytadan teradi. Yangi bosmaxona (Turbopack) — faqat o'sha bitta sahifani almashtiradi va qaysi sahifalar nimaga bog'liqligini aniq eslab qoladi.

Yoqish

Next.js 15

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

Next.js 15.5 da next build --turbopack beta sifatida qo'shilgan.

Next.js 16

Turbopack — standart, flag shart emas:

{
  "scripts": {
    "dev": "next dev",
    "build": "next build"
  }
}

Webpack ga qaytish kerak bo'lsa (masalan, maxsus webpack plagini tufayli):

"build": "next build --webpack"

Sozlash

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

const nextConfig: NextConfig = {
  turbopack: {
    // .svg fayllarni React komponent sifatida import qilish
    rules: {
      '*.svg': {
        loaders: ['@svgr/webpack'],
        as: '*.js',
      },
    },
    // modul nomlarini almashtirish
    resolveAlias: {
      underscore: 'lodash',
    },
    resolveExtensions: ['.tsx', '.ts', '.jsx', '.js', '.mjs', '.json'],
  },
}

export default nextConfig

[!INFO] Next.js 15.3 dan oldin bu sozlama experimental.turbo nomi ostida edi. Eski maqolalarda shuni ko'rsangiz — yangi versiyalarda turbopack kalitiga o'tkazing.

webpack sozlamasi bilan muammo

// webpack ga xos — Turbopack buni ishlatmaydi
webpack: (config) => {
  config.module.rules.push({ test: /\.svg$/, use: ['@svgr/webpack'] })
  return config
},

webpack() funksiyasi Turbopack da e'tiborsiz qoldiriladi. Loyihada maxsus webpack sozlamasi bo'lsa, Next.js 16 build da ogohlantiradi yoki xato beradi — uni turbopack.rules ga ko'chirish yoki --webpack bilan qolish kerak.

Nimalar qo'llab-quvvatlanadi

Natijani o'lchash

next dev --turbopack

▲ Next.js 15.x (Turbopack)
- Local:   http://localhost:3000
✓ Ready in 1.2s
○ Compiling / ...
✓ Compiled / in 820ms

Webpack dagi bilan solishtiring: ishga tushish vaqti, birinchi sahifa kompilyatsiyasi va faylni saqlagandan keyingi yangilanish. Katta loyihalarda farq bir necha barobar bo'lishi mumkin.

[!TIP] Turbopack ni sinab ko'rishning xavfsiz usuli — avval faqat dev da yoqish. Development dagi tezlik darhol seziladi, production build esa sinalgan webpack bilan qoladi. Hammasi muammosiz ishlasa — build ni ham o'tkazing.

Muammolarni hal qilish

• Modul topilmadi — resolveAlias yoki resolveExtensions ni tekshiring
• Loader ishlamaydi — u faqat JavaScript qaytaradigan oddiy loader bo'lishi kerak; murakkab webpack API ga tayanuvchi loader lar qo'llab-quvvatlanmaydi
• Kesh muammolari — .next papkasini o'chirib, qayta ishga tushirish
• Farqlar — kamdan-kam hollarda webpack va Turbopack natijasi farq qiladi; xatoni Next.js GitHub da qidiring

Tez-tez uchraydigan xatolar

1. webpack() sozlamasi jim ishlamay qolishi

Turbopack ga o'tdingiz — SVG import lari buzildi. turbopack.rules ga ko'chiring.

2. Eski experimental.turbo kaliti

Yangi versiyalarda — turbopack.

3. Webpack plaginiga bog'liq kutubxona

Masalan, ba'zi monitoring yoki PWA plaginlari — ular Turbopack bilan ishlamaydi. Kutubxonaning Turbopack qo'llab-quvvatlashini tekshiring yoki --webpack dan foydalaning.

Xulosa

Turbopack — Rust bundler, inkremental hisoblash, tez dev va HMR
Next.js 15: next dev --turbopack; Next.js 16: standart (dev va build)
Webpack ga qaytish: next build --webpack
Sozlash: next.config → turbopack.rules, resolveAlias, resolveExtensions
webpack() funksiyasi Turbopack da ishlamaydi — rules ga ko'chirish
Loader lar — ko'pi ishlaydi; webpack plaginlari — yo'q
Avval dev da sinab ko'ring

Keyingi dars

73-dars: Draft Mode — CMS bilan preview rejimi

Kontent muharrirlari nashr qilinmagan o'zgarishlarni saytda ko'rishi uchun.