Rspack 2026: Webpackten 10x Hızlı Rust Tabanlı JavaScript Bundler Rehberi

Rspack Nedir? (What is Rspack?)

Rspack, ByteDance (TikTok'un ana şirketi) tarafından Rust programlama dili ile sıfırdan yazılmış yüksek performanslı bir JavaScript bundler'dır. Adını "Rust" ve "Webpack" kelimelerinin birleşiminden alır. Peki neden böyle bir araca ihtiyaç duyuldu?

Webpack yıllardır JavaScript ekosisteminin bel kemiği. Ancak projeler büyüdükçe build süreleri dakikalara, hatta büyük monorepo'larda 10 dakikanın üzerine çıkabiliyor. Geliştirici deneyimi (developer experience) ciddi şekilde zarar görüyor. İşte Rspack bu sorunu çözmek için doğdu.

Alesta Web olarak müşteri projelerimizde Webpack kullanıyorduk. Ancak büyüyen kod tabanlarımızda build süreleri artık kabul edilemez seviyelere ulaşmıştı. Rspack'i keşfettiğimizde adeta bir devrim yaşadık. Bu Rust-based bundler, Webpack'in API ve konfigürasyon yapısıyla tam uyumlu çalışıyor. Yani mevcut webpack.config.js dosyanızı neredeyse hiç değiştirmeden Rspack'e geçebilirsiniz. Buna "drop-in replacement" deniyor.

Neden Rspack? (Why Rspack?)

JavaScript dünyasında bundler seçenekleri artık oldukça fazla: Vite, esbuild, Turbopack, Parcel... Peki Rspack neden öne çıkıyor?

1. Webpack Uyumluluğu: Vite ve esbuild harika araçlar ama mevcut Webpack projelerinizi onlara taşımak ciddi efor gerektiriyor. Rspack ise Webpack API uyumlu olduğu için geçiş çok daha kolay. Konfigürasyon dosyanız neredeyse aynı kalıyor.

2. Rust Performansı: JavaScript single-threaded bir dil. Webpack tüm işlemi tek bir thread üzerinde yapıyor. Rspack ise Rust'ın sağladığı multi-threading ve memory safety avantajlarını kullanarak build işlemlerini paralel olarak gerçekleştiriyor. Bu, özellikle büyük projelerde dramatik hız artışı sağlıyor.

3. SWC Transpiler Entegrasyonu: Rspack, Babel yerine SWC (Speedy Web Compiler) kullanıyor. SWC de Rust ile yazılmış bir transpiler ve Babel'den 20-70x daha hızlı çalışıyor. TypeScript, JSX dönüşümleri, polyfill'ler... hepsi SWC ile yapılıyor. Bu da build pipeline'ının tamamının Rust hızında çalışması anlamına geliyor.

4. Olgun Ekosistem: ByteDance, kendi 1000'den fazla dahili projesinde Rspack kullanıyor. Bu kadar büyük ölçekte test edilmiş bir araç, production ortamları için güvenilir.

Alesta Web ekibi olarak bu avantajları bizzat deneyimledik. Özellikle CI/CD pipeline'larında build sürelerinin düşmesi, deployment hızımızı inanılmaz artırdı.

Benchmark Karşılaştırması (Performance Benchmarks)

Rakamlar konuşsun. Aşağıdaki tablo, 1000 React component içeren bir projenin build sürelerini karşılaştırıyor:

Bu rakamlar gerçekten etkileyici. 6.5 saniyeden 282 milisaniyeye... Yani Rspack, Webpack'ten 23 kat daha hızlı. Ama asıl etkileyici olan gerçek dünya sonuçları.

Mews Monorepo Vakası: Mews şirketi, devasa monorepo projelerinde Webpack'ten Rspack'e geçtiğinde build süreleri 3 dakikadan 10 saniyeye düştü. Bu %80'lik bir azalma! Düşünün, her git push'ta 3 dakika beklemek yerine 10 saniye bekliyorsunuz. Günde 50 push yapan bir ekip için bu, saatlerce kazanılmış zaman demek.

Kurulum ve Başlangıç (Installation & Setup)

Rspack ile yeni bir proje başlatmak son derece kolay. İki farklı yol var:

Yol 1: Rspack ile Doğrudan Başlangıç

# Yeni proje oluştur
npm create rspack@latest

# Veya yarn ile
yarn create rspack

# Veya pnpm ile
pnpm create rspack

Bu komut size interaktif bir kurulum sihirbazı sunar. React, Vue, Svelte veya vanilla JavaScript şablonları arasında seçim yapabilirsiniz.

Yol 2: Rsbuild ile Başlangıç (Önerilen)

# Rsbuild projesi oluştur (üst seviye build aracı)
npm create rsbuild@latest

# Proje dizinine gir
cd my-project

# Bağımlılıkları kur
npm install

# Geliştirme sunucusunu başlat
npm run dev

Alesta Web olarak yeni projelerimizde Rsbuild kullanmayı tercih ediyoruz. Rsbuild, Rspack üzerine inşa edilmiş daha yüksek seviyeli bir build aracı. Vite veya Create React App'in alternatifi olarak düşünebilirsiniz. Sensible defaults ile geliyor, yani çoğu konfigürasyonu sizin yerinize yapıyor.

Mevcut Projeye Rspack Ekleme

# Rspack core paketlerini kur
npm install --save-dev @rspack/core @rspack/cli

# package.json'daki script'leri güncelle
# "build": "rspack build"
# "dev": "rspack dev"
# "preview": "rspack preview"

Konfigürasyon (Configuration)

Rspack'in en güzel yanlarından biri, konfigürasyon dosyasının Webpack ile neredeyse birebir aynı olmasıdır. rspack.config.js dosyası, webpack.config.js ile aynı yapıyı kullanır.

// rspack.config.js
const path = require('path');

module.exports = {
  entry: './src/index.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: '[name].[contenthash].js',
    clean: true,
  },
  module: {
    rules: [
      {
        test: /\.(js|jsx|ts|tsx)$/,
        use: {
          loader: 'builtin:swc-loader',
          options: {
            jsc: {
              parser: {
                syntax: 'typescript',
                tsx: true,
              },
              transform: {
                react: {
                  runtime: 'automatic',
                },
              },
            },
          },
        },
        type: 'javascript/auto',
      },
      {
        test: /\.css$/,
        type: 'css',
      },
      {
        test: /\.(png|jpg|gif|svg)$/,
        type: 'asset',
      },
    ],
  },
  resolve: {
    extensions: ['.ts', '.tsx', '.js', '.jsx'],
  },
  devServer: {
    port: 3000,
    hot: true,
  },
};

Dikkat ederseniz, en önemli fark builtin:swc-loader kullanımı. Webpack'te babel-loader kullanırken, Rspack'te bunu builtin:swc-loader ile değiştiriyorsunuz. Bu loader Rspack'in içinde yerleşik olarak geliyor, yani ayrıca kurmaya gerek yok. Ve tabii ki SWC'nin o muazzam hızından faydalanıyorsunuz.

// ❌ Webpack (babel-loader)
{
  test: /\.(js|jsx)$/,
  use: {
    loader: 'babel-loader',
    options: {
      presets: ['@babel/preset-env', '@babel/preset-react'],
    },
  },
}

// ✅ Rspack (builtin:swc-loader)
{
  test: /\.(js|jsx)$/,
  use: {
    loader: 'builtin:swc-loader',
    options: {
      jsc: {
        parser: { syntax: 'ecmascript', jsx: true },
        transform: { react: { runtime: 'automatic' } },
      },
    },
  },
}

Alesta Web projelerinde bu basit loader değişikliği bile tek başına build sürelerinde %60-70 iyileşme sağladı. Çünkü Babel JavaScript ile yazılmış bir transpiler, SWC ise Rust ile. Aradaki performans farkı devasa.

Webpack'ten Göç (Migration from Webpack)

Mevcut bir Webpack projesini Rspack'e taşımak düşündüğünüzden çok daha kolay. İşte adım adım süreç:

# Webpack paketlerini kaldır
npm uninstall webpack webpack-cli webpack-dev-server

# Rspack paketlerini kur
npm install --save-dev @rspack/core @rspack/cli

# webpack.config.js dosyasını kopyala
cp webpack.config.js rspack.config.js

# Gerekli değişiklikleri yap:
# 1. babel-loader → builtin:swc-loader
# 2. HtmlWebpackPlugin → builtins.html veya @rspack/plugin-html
# 3. MiniCssExtractPlugin → builtins veya rspack css desteği

{
  "scripts": {
    "dev": "rspack dev",
    "build": "rspack build",
    "preview": "rspack preview"
  }
}

Migration sırasında dikkat edilecek bazı noktalar:

• babel-loader → builtin:swc-loader: En kritik değişiklik bu. Babel config dosyanızı SWC formatına çevirmeniz gerekiyor.
• css-loader / style-loader: Rspack CSS'i native olarak destekliyor. type: 'css' tanımlaması yeterli.
• file-loader / url-loader: Asset modules ile değiştirildi. type: 'asset' kullanın.
• Custom plugin'ler: Webpack plugin API'si büyük ölçüde destekleniyor ama bazı edge case'lerde uyarlama gerekebilir.

Alesta Web ekibi olarak orta ölçekli bir React projesini Webpack'ten Rspack'e yaklaşık 2 saatte taşıdık. Büyük bir monorepo için bu süre 1-2 güne uzayabilir ama sonuç kesinlikle buna değer.

Temel Özellikler (Core Features)

Rspack sadece hızlı bir bundler değil, modern bir JavaScript build tool'undan beklenen tüm özelliklere sahip:

? HMR (Hot Module Replacement)

Rspack'in HMR desteği inanılmaz hızlı. Webpack'te 2-5 saniye süren HMR güncellemeleri, Rspack'te 50-200 milisaniye aralığına düşüyor. Kod değişikliğini kaydedip tarayıcıda neredeyse anında görüyorsunuz. Bu, geliştirme deneyimi (developer experience) açısından oyun değiştirici bir fark.

? Tree Shaking

Kullanılmayan kodları otomatik olarak tespit edip build'den çıkarır. ESM import/export analizi yaparak dead code elimination gerçekleştirir. Sonuç olarak daha küçük bundle boyutları elde edersiniz.

✂️ Code Splitting

Rspack, Webpack'in tüm code splitting stratejilerini destekliyor. Dynamic import'lar, entry point'ler ve optimization.splitChunks konfigürasyonu Webpack ile aynı şekilde çalışıyor. Lazy loading ile sayfalarınızın ilk yükleme süresini minimize edebilirsiniz.

// Dynamic import ile lazy loading
const Dashboard = React.lazy(() => import('./pages/Dashboard'));
const Settings = React.lazy(() => import('./pages/Settings'));

// Rspack otomatik olarak ayrı chunk'lar oluşturur
// dashboard.[hash].js
// settings.[hash].js

? Module Federation

Mikro frontend mimarileri için kritik olan Module Federation, Rspack'te birinci sınıf vatandaş olarak destekleniyor. Farklı uygulamalar arasında runtime'da modül paylaşımı yapabilirsiniz. ByteDance'ın kendi dahili projelerinde Module Federation'ı yoğun olarak kullandığını düşünürsek, bu desteğin ne kadar olgun olduğunu anlayabilirsiniz.

⚡ SWC Transpiler (Built-in)

SWC (Speedy Web Compiler) Rspack'e entegre olarak gelir. TypeScript, JSX, dekoratörler ve en son ECMAScript özelliklerinin tamamını destekler. Babel'e kıyasla 20-70x daha hızlı çalışır çünkü o da Rust ile yazılmıştır.

Rsbuild ve Rslib Ekosistemi (The Rspack Ecosystem)

Rspack tek başına güçlü bir bundler ama etrafında oluşan ekosistem onu daha da değerli kılıyor.

Rsbuild: Üst Seviye Build Aracı

Rsbuild, Rspack üzerine inşa edilmiş bir üst seviye build aracıdır. Vite veya Create React App (CRA) yerine kullanabilirsiniz. Rspack'in ham gücünü, sensible defaults ve kolay konfigürasyon ile birleştiriyor. Yeni bir React, Vue veya Svelte projesi başlatırken doğrudan Rsbuild kullanmanızı öneriyoruz.

# Rsbuild React projesi oluştur
npm create rsbuild@latest -- --template react-ts

cd my-react-app
npm install
npm run dev

# Build al
npm run build

Rsbuild'in avantajları:

• Sıfır konfigürasyonla çalışır (zero-config)
• TypeScript, CSS Modules, Sass, PostCSS kutudan çıktığı gibi hazır
• Optimize edilmiş production build'ler
• Plugin ekosistemi ile genişletilebilir
• Rspack'in tüm performans avantajları

Rslib: Kütüphane Geliştirme Aracı

Kendi npm paketinizi veya JavaScript kütüphanenizi geliştiriyorsanız, Rslib tam size göre. Rspack tabanlı bu araç, kütüphane build'leri için optimize edilmiş. ESM, CJS ve UMD formatlarında çıktı üretebilir, TypeScript declaration dosyaları oluşturabilir ve tree-shakeable bundle'lar sağlar.

Alesta Web ekibi olarak dahili kütüphanelerimizi artık Rslib ile build ediyoruz. Daha önce Rollup kullandığımız bu süreçte hem hız kazandık hem de tek bir ekosistemde kalmayı başardık.

Rspack 1.7 ve 2.0 Yenilikleri (Latest Releases)

Rspack aktif olarak geliştirilmeye devam ediyor. 2026 başında gelen güncellemeler büyük yenilikler getirdi.

Rspack 1.7 (Ocak 2026)

Bu sürümün en önemli yeniliği lazy compilation'ın varsayılan olarak etkinleştirilmesi. Lazy compilation ne demek? Dev server başlatıldığında tüm projeyi derlemek yerine, sadece tarayıcıda açılan sayfanın ihtiyaç duyduğu modülleri derliyor. Bu, büyük projelerde dev server başlatma süresini dramatik şekilde düşürüyor. 500+ route'a sahip bir uygulamada dev server'ınız artık saniyeler içinde hazır.

Rspack 2.0 Preview (Şubat 2026)

Rspack 2.0 preview sürümü Şubat 2026'da duyuruldu ve çok heyecan verici özellikler getiriyor:

• RSC (React Server Components) Desteği: Next.js'in App Router'ında kullanılan React Server Components artık Rspack ile de destekleniyor. Bu, framework geliştiricileri için büyük bir adım. Server ve client component'lerin otomatik olarak ayrıştırılması ve bundle'lanması Rspack 2.0 ile mümkün.
• ESM Çıktı (ES Module Output): Production build'lerde artık native ESM formatında çıktı üretebiliyorsunuz. Modern tarayıcılar ESM'i native olarak desteklediği için bu, daha küçük bundle boyutları ve daha hızlı sayfa yüklemeleri anlamına geliyor.
• Persistent Cache: Build sonuçları disk üzerinde kalıcı olarak cache'leniyor. İlk build'den sonraki build'ler, sadece değişen dosyaları yeniden derliyor. Bu, CI/CD ortamlarında build sürelerini daha da düşürüyor.

Gerçek Dünya Deneyimleri (Real World Results)

Alesta Web olarak Rspack'i birden fazla müşteri projemizde kullandık ve sonuçlar tutarlı bir şekilde etkileyici oldu. İşte bazı gerçek dünya senaryoları:

Senaryo 1: E-Ticaret Platformu

React + TypeScript ile geliştirilmiş, 200+ component içeren bir e-ticaret platformu. Webpack ile production build 4 dakika 20 saniye sürüyordu. Rspack'e geçtikten sonra bu süre 25 saniyeye düştü. HMR güncellemeleri artık göz açıp kapayıncaya kadar oluyor.

Senaryo 2: Kurumsal Dashboard

Module Federation kullanan mikro frontend mimarisi ile kurulmuş bir dashboard uygulaması. 5 farklı mikro frontend'in tamamı Rspack'e taşındı. Toplam build süresi 12 dakikadan 1.5 dakikaya düştü. Ayrıca Module Federation konfigürasyonu Webpack ile birebir aynı kaldığı için geçiş çok smooth oldu.

Senaryo 3: Monorepo Yapısı

15 paketten oluşan bir monorepo. Her paketin ayrı ayrı build edilmesi gerekiyordu. Webpack ile tüm paketlerin build süresi toplam 8 dakikaydı. Rspack ile bu süre 50 saniyeye indi. CI/CD pipeline'ında günde ortalama 30 build çalıştırıldığını düşünürsek, günlük 3.5 saat tasarruf ediliyor.

Bu sonuçlar, Rspack'in resmi benchmark'larıyla tutarlı. Gerçek projelerde ortalama 8-23x hız artışı görmek mümkün. Proje büyüdükçe bu fark daha da açılıyor çünkü Rspack'in multi-threaded Rust mimarisi ölçeklenebilirlik konusunda JavaScript tabanlı bundler'lara karşı büyük avantaja sahip.

Topluluk Geri Bildirimleri

Rspack'i benimseyen topluluktan gelen geri bildirimler oldukça pozitif. GitHub'da 10.000'den fazla yıldıza sahip olan proje, aktif olarak geliştirilmeye devam ediyor. ByteDance'ın arkasında durması, projenin uzun vadeli sürdürülebilirliği konusunda güven veriyor. Discord ve GitHub Discussions üzerinde aktif bir topluluk var ve sorunlarınıza hızlı yanıt alabiliyorsunuz.