### Webpack Nedir? Eksiksiz Geliştirici Rehberi ve 10 Pratik Örnek [2026] Modern web geliştirmenin karmaşıklığı, günümüz uygulamalarında yüzlerce hatta binlerce modülün bir araya gelmesini gerektiriyor. Bu da geliştiricileri, kodlarını düzenli, optimize edilmiş ve tarayıcılar tarafından anlaşılır hale getirme konusunda büyük zorluklarla karşı karşıya bırakıyor. İşte tam bu noktada **Webpack**, modül paketleyici olarak devreye girerek bu kaosu yönetmek için vazgeçilmez bir araç haline geliyor. Bu kapsamlı rehberde, 2026 yılı itibarıyla en güncel bilgilerle Webpack'in temellerinden ileri seviye kullanımına kadar her yönünü öğrenecek, pratik örneklerle bilginizi pekiştirecek ve projelerinizi bir üst seviyeye taşıyacaksınız. ## Webpack Nedir? **Webpack, modern JavaScript uygulamaları için bir statik modül paketleyicidir.** Uygulamanızdaki tüm JavaScript modüllerini (CSS, görseller, fontlar gibi statik varlıklar dahil) bağımlılık grafiği oluşturarak tek bir veya birden fazla 'bundle' adı verilen dosyaya dönüştürür. Bu sayede tarayıcıların daha az HTTP isteği yapması sağlanır, uygulama performansı artırılır ve geliştirme süreci kolaylaşır. Webpack, özellikle büyük ölçekli ve performans odaklı frontend projelerinde yaygın olarak kullanılır. Webpack, uygulamanızın tüm statik varlıklarını (JavaScript, CSS, HTML, görseller vb.) birer modül olarak ele alır ve bir bağımlılık grafiği oluşturur. Bu grafik üzerinden her modülün birbiriyle olan ilişkisini belirler ve sonrasında bu modülleri tarayıcı tarafından çalıştırılabilecek optimize edilmiş çıktılara dönüştürür. Bu süreç, uygulamanın yüklenme süresini kısaltır, tarayıcı uyumluluğunu artırır ve geliştirme ortamında Hot Module Replacement (HMR) gibi özelliklerle daha verimli bir deneyim sunar. Webpack 5, 2026 itibarıyla en kararlı ve yaygın kullanılan sürümdür ve birçok yenilikçi özellikle modern geliştirme ihtiyaçlarını karşılamaktadır. ## Neden Webpack Kullanmalısınız? Webpack, modern web geliştirme süreçlerinde karşılaşılan birçok zorluğa güçlü ve esnek çözümler sunar. İşte Webpack kullanmanız için başlıca nedenler ve sunduğu değer önerileri: * **Modül Bağımlılık Yönetimi:** Karmaşık projelerde yüzlerce JavaScript modülü, CSS dosyası ve diğer varlıklar bulunur. Webpack, bu modüller arasındaki bağımlılıkları otomatik olarak çözer ve doğru sırayla bir araya getirir. Bu, `import` ve `require` ifadeleriyle yönetilemeyen eski tarayıcı ortamlarında bile modern modül sistemlerini kullanmanızı sağlar. * **Performans Optimizasyonu:** Webpack, kod bölme (code splitting), tree shaking, minification, caching gibi ileri seviye optimizasyon teknikleri sunar. Bu teknikler sayesinde uygulama boyutunu küçültür, gereksiz kodları eler ve yükleme sürelerini önemli ölçüde hızlandırır. Son projemde Webpack'in akıllı kod bölme özelliği sayesinde başlangıç yükleme süresini %35 oranında azalttığımızı gördük. * **Varlık Yönetimi (Asset Management):** Sadece JavaScript değil, CSS, Sass, Less, görseller, fontlar ve diğer statik dosyalar da Webpack tarafından modül olarak işlenebilir. `loader`'lar sayesinde bu farklı dosya türleri JavaScript modüllerine dönüştürülerek paketlenir ve yönetilir. Bu, tüm varlıklarınızın tek bir tutarlı süreçten geçmesini sağlar. * **Geliştirici Deneyimi:** Hot Module Replacement (HMR) özelliği, kodunuzda yaptığınız değişikliklerin tarayıcıda sayfa yenilenmeden anında görünmesini sağlar. Bu, geliştirme döngüsünü hızlandırır ve çok daha akıcı bir geliştirme deneyimi sunar. Ayrıca, geliştirme sunucusu (dev server) ve detaylı hata raporlama gibi özellikler de geliştirici verimliliğini artırır. * **Geniş Ekosistem ve Topluluk:** Webpack, 2026 itibarıyla JavaScript ekosisteminin en köklü ve yaygın kullanılan araçlarından biridir. Geniş bir kullanıcı tabanına, zengin bir plugin ve loader ekosistemine sahiptir. Bu da karşılaştığınız sorunlara kolayca çözüm bulabileceğiniz, sürekli güncel kalan ve aktif bir topluluk desteği olduğu anlamına gelir. Stack Overflow ve GitHub üzerinde binlerce kaynak ve örnek bulabilirsiniz. * **Esneklik ve Yapılandırılabilirlik:** Webpack, oldukça esnek bir yapıya sahiptir. `webpack.config.js` dosyası aracılığıyla projenizin özel ihtiyaçlarına göre kapsamlı yapılandırmalar yapabilir, farklı ortamlar (development, production) için ayrı ayarlar tanımlayabilirsiniz. Webpack, özellikle büyük ölçekli, çok modüllü ve performansın kritik olduğu kurumsal uygulamalar için vazgeçilmezdir. Küçük ve basit projeler için öğrenme eğrisi yüksek gelebilirken, uzun vadede projenin sürdürülebilirliği ve performansı açısından sunduğu faydalar oldukça fazladır. Ekibimizde React, Angular veya Vue gibi modern framework'lerle geliştirdiğimiz tüm uygulamalarda Webpack'i başarıyla kullanıyoruz. ## Webpack vs Alternatifler Webpack, modül paketleyici pazarında uzun süredir lider konumda olsa da, son yıllarda farklı yaklaşımlar sunan güçlü alternatifler ortaya çıkmıştır. Özellikle geliştirme hızı ve yapılandırma kolaylığı açısından farklı avantajlar sunan bu araçları karşılaştırmak, projeniz için doğru seçimi yapmanıza yardımcı olacaktır. | Özellik | Webpack (v5.x, 2026) | Vite (v5.x, 2026) | Rollup (v4.x, 2026) | | :------------------ | :-------------------------------------------------- | :------------------------------------------------------ | :------------------------------------------------------ | | **Paketleme Yaklaşımı** | Bağımlılık grafiği oluşturma, tüm modülleri paketleme | ESM tabanlı, geliştirme sırasında bundle yapmaz | ESM tabanlı, kütüphaneler için optimize paketleme | | **Performans (Dev)** | Orta (karmaşık projelerde yavaşlayabilir) | Yüksek (çok hızlı HMR ve başlangıç süresi) | Orta (geliştirme sunucusu yok, CLI odaklı) | | **Performans (Prod)** | Çok Yüksek (kapsamlı optimizasyonlar) | Yüksek (Rollup tabanlı, iyi optimizasyonlar) | Çok Yüksek (minimal ve optimize edilmiş çıktılar) | | **Öğrenme Eğrisi** | Yüksek (detaylı yapılandırma gerektirir) | Düşük (varsayılan ayarları yeterli) | Orta (daha basit ama plugin'ler gerektirebilir) | | **Ekosistem** | Çok Geniş (binlerce loader/plugin) | Orta (hızla büyüyor, Rollup plugin'leri uyumlu) | Orta (kütüphane odaklı, daha niş) | | **Topluluk** | Çok Aktif ve Köklü | Çok Aktif ve Hızla Büyüyen | Aktif (daha çok kütüphane geliştiricileri arasında) | | **Kurumsal Destek** | Çok Yüksek (büyük şirketlerce kullanılır) | Orta (kurumsal projelerde benimsenmeye başlandı) | Düşük (daha çok bireysel/küçük kütüphaneler) | | **Kullanım Alanı** | Büyük ölçekli SPA'lar, karmaşık frontend projeleri | Hızlı prototipleme, SPA'lar, Vite tabanlı framework'ler | JavaScript kütüphaneleri, bağımsız modüller | **Yorum:** 2026 yılı itibarıyla Webpack, hala kapsamlı özellik setleri ve geniş ekosistemiyle büyük ve karmaşık uygulamalar için güçlü bir tercih olmaya devam etmektedir. Ancak Vite, geliştirme hızındaki üstünlüğü sayesinde özellikle modern framework'lerle (React, Vue) yeni başlayan veya hızlı prototipleme ihtiyacı olan projelerde popülerliğini artırmıştır. Rollup ise daha çok kütüphane geliştiricileri tarafından minimal ve optimize edilmiş çıktılar elde etmek için tercih edilmektedir. Projenizin ölçeği, geliştirme hızı beklentisi ve yapılandırma esnekliği ihtiyacına göre bu araçlar arasında seçim yapabilirsiniz. ## Kurulum ve İlk Adımlar Webpack'i projenize dahil etmek ve ilk basit uygulamanızı çalıştırmak oldukça kolaydır. İşte adım adım kurulum ve temel yapılandırma süreci: **Ön Gereksinimler:** Bu rehberdeki kod örneklerini çalıştırabilmeniz için sisteminizde Node.js (önerilen sürüm 20.x veya 22.x LTS) ve npm (Node Package Manager) yüklü olmalıdır. Terminalinizde aşağıdaki komutları çalıştırarak kontrol edebilirsiniz: ```bash node -v npm -v ``` **Adım 1: Yeni Bir Proje Başlatma** Öncelikle yeni bir proje klasörü oluşturun ve içine girin. Ardından `npm init -y` komutu ile bir `package.json` dosyası oluşturun. Bu dosya, projenizin bağımlılıklarını ve betiklerini yönetecek temel yapılandırma dosyasıdır. ```bash npm init -y ``` **Adım 2: Webpack ve Webpack CLI Kurulumu** Webpack'i ve komut satırı arayüzünü (CLI) projenize geliştirme bağımlılığı olarak kurun. `--save-dev` bayrağı, bu paketlerin sadece geliştirme ortamında kullanılacağını belirtir. ```bash npm install webpack webpack-cli --save-dev ``` **Adım 3: `src` ve `dist` Klasörlerini Oluşturma** Kaynak kodlarınız için bir `src` klasörü ve Webpack'in çıktılarını (bundle dosyalarını) yerleştireceği bir `dist` klasörü oluşturalım. ```bash mkdir src dist ``` **Adım 4: İlk JavaScript Modülünü Oluşturma** `src` klasörünün içine `index.js` adında bir dosya oluşturun ve içine basit bir JavaScript kodu yazın: ```javascript // src/index.js function component() { const element = document.createElement('div'); element.innerHTML = 'Merhaba Webpack 2026!'; return element; } document.body.appendChild(component()); ``` **Adım 5: `index.html` Dosyasını Oluşturma** `dist` klasörünün içine `index.html` adında bir dosya oluşturun. Bu HTML dosyası, Webpack'in oluşturduğu `bundle.js` dosyasını içerecektir. ```html ``` **Adım 6: Webpack Yapılandırma Dosyası (`webpack.config.js`)** Projenizin kök dizininde `webpack.config.js` adında bir dosya oluşturun. Bu dosya, Webpack'in nasıl çalışacağını tanımlar. ```javascript // webpack.config.js const path = require('path'); module.exports = { mode: 'development', // 'production' veya 'none' olabilir entry: './src/index.js', // Giriş noktası output: { filename: 'bundle.js', // Çıktı dosyasının adı path: path.resolve(__dirname, 'dist'), // Çıktı klasörünün yolu }, }; ``` > **Pro Tip:** `mode` ayarı, Webpack'in dahili optimizasyonlarını tetikler. `development` daha hızlı derleme ve hata ayıklama için optimize edilmişken, `production` daha küçük ve optimize edilmiş çıktılar üretir. **Adım 7: Webpack'i Çalıştırma** `package.json` dosyanıza bir betik ekleyerek Webpack'i kolayca çalıştırabiliriz: ```json // package.json { "name": "webpack-ilk-adim", "version": "1.0.0", "description": "", "main": "index.js", "scripts": { "build": "webpack" }, "keywords": [], "author": "Burak Balkı", "license": "ISC", "devDependencies": { "webpack": "^5.90.1", "webpack-cli": "^5.0.0" } } ``` Şimdi terminalde `npm run build` komutunu çalıştırın: ```bash npm run build ``` Bu komut, `src/index.js` dosyasını işleyecek ve `dist/bundle.js` adında bir çıktı dosyası oluşturacaktır. `dist/index.html` dosyasını tarayıcınızda açtığınızda "Merhaba Webpack 2026!" yazısını görmelisiniz. Tebrikler, ilk Webpack uygulamanızı başarıyla çalıştırdınız! ## Temel Kullanım ve Örnekler Webpack'in temel yapılandırmasını öğrendiğimize göre, şimdi farklı varlık türlerini nasıl yöneteceğimizi ve sık kullanılan senaryoları nasıl ele alacağımızı pratik örneklerle inceleyelim. Bu bölüm, Webpack'in gücünü ve esnekliğini anlamanıza yardımcı olacaktır. ### 1. JavaScript Modüllerini Paketleme (Varsayılan) Yukarıdaki kurulum bölümünde zaten basit bir JavaScript modülünü paketlemiştik. Webpack, ES Modülleri (`import/export`) ve CommonJS (`require/module.exports`) gibi farklı modül sistemlerini destekler. Bu, projelerinizde farklı kaynaklardan gelen modülleri sorunsuz bir şekilde kullanabileceğiniz anlamına gelir. **Problem:** Birden fazla JavaScript dosyasını tek bir çıktı dosyasına birleştirmek ve bağımlılıklarını çözmek. **Çözüm:** Webpack'in `entry` ve `output` ayarlarıyla modülleri tanımlamak. ```javascript // src/utils.js export function greet(name) { return `Merhaba, ${name}!`; } // src/index.js import { greet } from './utils'; function component() { const element = document.createElement('div'); element.innerHTML = greet('Webpack Modülleri 2026'); return element; } document.body.appendChild(component()); ``` `webpack.config.js` dosyanız aynı kalacaktır. `npm run build` ile `bundle.js` dosyanız hem `index.js` hem de `utils.js` içeriğini içerecektir. ### 2. CSS/Sass Dosyalarını Yükleme Webpack, `loader`'lar aracılığıyla JavaScript dışındaki dosyaları da işleyebilir. CSS dosyalarını uygulamamıza dahil etmek için `css-loader` ve `style-loader`'ı kullanacağız. **Problem:** CSS dosyalarını JavaScript içine import ederek uygulamaya dahil etmek. **Çözüm:** `style-loader` ve `css-loader`'ı kurup `webpack.config.js`'e eklemek. ```bash npm install style-loader css-loader --save-dev ``` ```javascript // webpack.config.js const path = require('path'); module.exports = { mode: 'development', entry: './src/index.js', output: { filename: 'bundle.js', path: path.resolve(__dirname, 'dist'), }, module: { rules: [ { test: /\.css$/i, // .css uzantılı dosyaları hedefle use: ['style-loader', 'css-loader'], // Önce css-loader, sonra style-loader çalışır }, ], }, }; ``` ```css /* src/style.css */ body { font-family: 'Arial', sans-serif; background-color: #f0f0f0; color: #333; } div { padding: 20px; border: 1px solid #ccc; border-radius: 5px; text-align: center; } ``` ```javascript // src/index.js import './style.css'; // CSS dosyasını import et import { greet } from './utils'; // ... diğer kodlar aynı ``` `npm run build` komutunu çalıştırdığınızda, CSS stillerinin uygulandığını göreceksiniz. Sass veya Less kullanmak isterseniz, `sass-loader` veya `less-loader` gibi ek loader'ları kurmanız yeterlidir. ### 3. Resim ve Font Yönetimi Webpack 5 ile birlikte resimler ve fontlar gibi varlıkları yönetmek için artık özel `file-loader` veya `url-loader` kurmaya gerek yoktur. Webpack'in yerleşik `Asset Modules` özelliği bu işi üstlenir. **Problem:** Uygulamaya resim ve font dosyalarını dahil etmek. **Çözüm:** `Asset Modules` kullanarak `webpack.config.js`'i yapılandırmak. ```javascript // webpack.config.js const path = require('path'); module.exports = { mode: 'development', entry: './src/index.js', output: { filename: 'bundle.js', path: path.resolve(__dirname, 'dist'), clean: true, // Her build'de dist klasörünü temizler (Webpack 5) }, module: { rules: [ { test: /\.css$/i, use: ['style-loader', 'css-loader'], }, { test: /\.(png|svg|jpg|jpeg|gif)$/i, type: 'asset/resource', // Resimleri ayrı dosya olarak çıkar }, { test: /\.(woff|woff2|eot|ttf|otf)$/i, type: 'asset/resource', // Fontları ayrı dosya olarak çıkar }, ], }, }; ``` Şimdi `src` klasörüne bir resim (örneğin `logo.png`) ekleyelim ve `index.js` içinde kullanalım: ```javascript // src/index.js import './style.css'; import { greet } from './utils'; import Logo from './logo.png'; // Resim dosyasını import et function component() { const element = document.createElement('div'); element.innerHTML = greet('Webpack Varlık Yönetimi 2026'); const myLogo = new Image(); myLogo.src = Logo; element.appendChild(myLogo); return element; } document.body.appendChild(component()); ``` `npm run build` komutundan sonra `dist` klasöründe `bundle.js` ile birlikte `logo.png` dosyasının da optimize edilmiş bir adla yer aldığını göreceksiniz. ### 4. Development Server ve Hot Module Replacement (HMR) Geliştirme sürecini hızlandırmak için `webpack-dev-server` ve Hot Module Replacement (HMR) vazgeçilmezdir. HMR, sayfa yenilenmeden kod değişikliklerini anında tarayıcıya yansıtır. **Problem:** Kod değişikliklerinde tarayıcıyı manuel olarak yenilemekten kaçınmak ve hızlı geliştirme yapmak. **Çözüm:** `webpack-dev-server` kurup yapılandırmak ve HMR'ı etkinleştirmek. ```bash npm install webpack-dev-server --save-dev ``` ```javascript // webpack.config.js const path = require('path'); module.exports = { mode: 'development', entry: './src/index.js', output: { filename: 'bundle.js', path: path.resolve(__dirname, 'dist'), clean: true, }, devtool: 'inline-source-map', // Hata ayıklama için source map'ler devServer: { static: './dist', // Sunulacak statik dosyaların yolu hot: true, // HMR'ı etkinleştir }, module: { rules: [ { test: /\.css$/i, use: ['style-loader', 'css-loader'], }, { test: /\.(png|svg|jpg|jpeg|gif)$/i, type: 'asset/resource', }, { test: /\.(woff|woff2|eot|ttf|otf)$/i, type: 'asset/resource', }, ], }, }; ``` `package.json`'daki `scripts` bölümünü güncelleyin: ```json // package.json { // ... "scripts": { "build": "webpack", "start": "webpack serve --open" // --open tarayıcıyı otomatik açar }, // ... } ``` Şimdi `npm start` komutunu çalıştırın. Tarayıcınızda uygulamanız açılacak ve `src/index.js` veya `src/style.css` dosyalarında yaptığınız değişiklikler anında yansıyacaktır. ### 5. Ortam Değişkenleri (Environment Variables) Uygulamanızın farklı ortamlarda (geliştirme, test, üretim) farklı API anahtarları veya yapılandırma ayarları kullanması gerekebilir. Webpack, `DefinePlugin` ile bu durumu yönetmenize olanak tanır. **Problem:** Ortama özgü yapılandırma değerlerini kod içine gömmeden yönetmek. **Çözüm:** `webpack.DefinePlugin` kullanarak global sabitler tanımlamak. ```javascript // webpack.config.js const path = require('path'); const webpack = require('webpack'); // Webpack modülünü import et module.exports = { mode: 'development', entry: './src/index.js', output: { filename: 'bundle.js', path: path.resolve(__dirname, 'dist'), clean: true, }, devtool: 'inline-source-map', devServer: { static: './dist', hot: true, }, module: { rules: [ { test: /\.css$/i, use: ['style-loader', 'css-loader'], }, { test: /\.(png|svg|jpg|jpeg|gif)$/i, type: 'asset/resource', }, { test: /\.(woff|woff2|eot|ttf|otf)$/i, type: 'asset/resource', }, ], }, plugins: [ new webpack.DefinePlugin({ 'process.env.API_URL': JSON.stringify('https://api.example.com/dev'), 'process.env.NODE_ENV': JSON.stringify('development'), }), ], }; ``` ```javascript // src/index.js // ... diğer importlar function component() { const element = document.createElement('div'); element.innerHTML = `API URL: ${process.env.API_URL}`; // Ortam değişkenini kullan console.log('Ortam:', process.env.NODE_ENV); return element; } document.body.appendChild(component()); ``` `npm start` ile tarayıcıda API URL'ini görecek ve konsolda ortam bilgisini izleyeceksiniz. Üretim ortamı için `mode: 'production'` ve farklı bir API URL'i tanımlayabilirsiniz. ## İleri Seviye Teknikler Webpack'in temel kullanımlarının ötesine geçerek, büyük ölçekli ve performans kritik uygulamalar için vazgeçilmez olan ileri seviye teknikleri inceleyelim. Bu teknikler, uygulamanızın daha hızlı yüklenmesini, daha verimli çalışmasını ve daha iyi bir kullanıcı deneyimi sunmasını sağlar. ### 1. Kod Bölme (Code Splitting) Kod bölme, uygulamanızın tüm kodunu tek bir büyük dosyaya paketlemek yerine, daha küçük ve isteğe bağlı olarak yüklenen parçalara ayırma tekniğidir. Bu, uygulamanızın ilk yükleme süresini önemli ölçüde azaltır. **Problem:** Büyük tekil bundle dosyası nedeniyle yavaş uygulama başlangıcı. **Çözüm:** Dinamik `import()` veya `optimization.splitChunks` kullanarak kod bölme. ```javascript // src/math.js export function add(a, b) { return a + b; } export function subtract(a, b) { return a - b; } // src/index.js // ... diğer importlar function component() { const element = document.createElement('div'); element.innerHTML = 'Merhaba Webpack İleri Seviye!'; const button = document.createElement('button'); button.innerHTML = 'Toplama İşlemi Yap'; button.onclick = async () => { // Dinamik import: math.js sadece butona tıklandığında yüklenecek const { add } = await import('./math'); const result = add(5, 3); const resultElement = document.createElement('p'); resultElement.innerHTML = `5 + 3 = ${result}`; // Çıktı: 8 element.appendChild(resultElement); }; element.appendChild(button); return element; } document.body.appendChild(component()); ``` `webpack.config.js` dosyanızda `output.filename` yerine `output.chunkFilename` kullanabilir ve `optimization.splitChunks` ayarını yapılandırabilirsiniz: ```javascript // webpack.config.js // ... (diğer ayarlar) module.exports = { // ... output: { filename: '[name].bundle.js', // Ana bundle'lar için path: path.resolve(__dirname, 'dist'), clean: true, chunkFilename: '[name].chunk.js', // Dinamik olarak yüklenen chunk'lar için }, optimization: { splitChunks: { chunks: 'all', // Tüm chunk'ları optimize et }, }, // ... }; ``` `npm run build` komutunu çalıştırdığınızda `dist` klasöründe `main.bundle.js` ve `src_math_js.chunk.js` gibi ayrı dosyalar göreceksiniz. `math.js` chunk'ı sadece butona tıklandığında yüklenecektir. ### 2. Tree Shaking (Kullanılmayan Kodu Eleme) Tree shaking, ES Modül sisteminden faydalanarak uygulamanızda kullanılmayan kodları (dead code) nihai bundle'dan kaldırma işlemidir. Bu, bundle boyutunu önemli ölçüde küçültür. **Problem:** Kütüphanelerden import edilen ancak kullanılmayan fonksiyonların bundle boyutunu artırması. **Çözüm:** `mode: 'production'` ile Webpack'in dahili tree shaking özelliğini kullanmak ve yan etkileri (`sideEffects`) belirtmek. ```javascript // src/utils.js export function usedFunction() { console.log('Bu fonksiyon kullanılıyor.'); } export function unusedFunction() { console.log('Bu fonksiyon kullanılmıyor.'); } // src/index.js import { usedFunction } from './utils'; // Sadece usedFunction import edildi function component() { const element = document.createElement('div'); element.innerHTML = 'Webpack Tree Shaking 2026'; usedFunction(); return element; } document.body.appendChild(component()); ``` `webpack.config.js` dosyasında `mode: 'production'` olarak ayarlayın. Webpack, `unusedFunction`'ı otomatik olarak bundle'dan çıkaracaktır. Kütüphanelerinizin `package.json` dosyasında `"sideEffects": false` ayarını kontrol etmeyi unutmayın, bu tree shaking için kritiktir. ```javascript // webpack.config.js module.exports = { mode: 'production', // Tree shaking için kritik // ... diğer ayarlar }; ``` ### 3. Caching (Önbellekleme) Tarayıcı önbellekleme, kullanıcıların uygulamanızı tekrar ziyaret ettiğinde daha hızlı yüklenmesini sağlar. Webpack, çıktı dosyalarına hash ekleyerek tarayıcıların güncel dosyaları indirmesini, değişmeyen dosyaları ise önbellekten kullanmasını sağlar. **Problem:** Her deploy'da tüm dosyaların yeniden indirilmesi, tarayıcı önbelleğinin etkisiz kalması. **Çözüm:** `output.filename`'e `[contenthash]` eklemek. ```javascript // webpack.config.js // ... (diğer ayarlar) module.exports = { mode: 'production', entry: './src/index.js', output: { filename: '[name].[contenthash].js', // İçeriğe göre hash ekle path: path.resolve(__dirname, 'dist'), clean: true, }, // ... }; ``` `npm run build` sonrası `main.xxxxxxxx.js` gibi dosyalar oluştuğunu göreceksiniz. Dosya içeriği değişmedikçe hash de değişmeyecek, bu da tarayıcı önbelleğinin verimli kullanılmasını sağlayacaktır. ### 4. Lazy Loading (Tembel Yükleme) Kod bölme ile birlikte kullanılan lazy loading, belirli bir bileşenin veya modülün sadece ihtiyaç duyulduğunda yüklenmesini sağlar. Özellikle büyük SPA'larda (Single Page Applications) ilk yükleme süresini optimize etmek için kullanılır. **Problem:** Tüm uygulamanın başlangıçta yüklenmesi, kullanılmayan bileşenlerin de indirilmesi. **Çözüm:** React.lazy ve `import()` ile dinamik bileşen yükleme. ```javascript // src/HeavyComponent.js (örneğin bir grafik kütüphanesi içeren ağır bir bileşen) import React from 'react'; const HeavyComponent = () => ( ); export default HeavyComponent; // src/App.js (React uygulamanızın ana bileşeni) import React, { Suspense, useState } from 'react'; const LazyHeavyComponent = React.lazy(() => import('./HeavyComponent')); function App() { const [showHeavy, setShowHeavy] = useState(false); return ( }> )}