Merhaba arkadaşlar, bugün sizlere projelerimizdeki performans canavarı haline gelen CSS ve JS dosyalarını, deployment sürecimizin bir parçası haline getirerek nasıl otomatik hale dönüştürdüğümü anlatacağım. Bu hatayı ilk gördüğümde kafayı yemiştim: Canlıya aldığımız bir projede, 20'den fazla ayrı CSS dosyası ve onlarca JS modülü vardı. Sayfa açılış hızı berbattı ve Lighthouse skorları kırmızı alarm veriyordu. Manuel minify işlemi yapmak da her seferinde zaman kaybettiriyordu. İşte benim kullandığım en temiz çözüm: Bu işlemleri CI/CD pipeline'ıma entegre etmek.
Sorun: Dağınık Dosyalar ve Yavaş Sayfalar
Projemiz büyüdükçe, geliştirme aşamasında kullandığımız ayrı ayrı, okunabilir dosyalar production ortamı için bir yük haline geliyordu. Her bir HTTP isteği, sayfa açılışını yavaşlatıyordu. Manuel olarak bu dosyaları birleştirip (concatenate) küçültmek (minify) hem hataya açıktı hem de her deployment'da tekrarlanması gereken sıkıcı bir işti. Amacım, geliştiricilerin hala rahatça kod yazabildiği ayrı dosyalarla çalışmaya devam etmesi, ancak bu dosyaların production'a gitmeden otomatik olarak optimize edilmesiydi.
Çözüm: Pipeline'a Build Adımı Eklemek
Kullandığımız CI/CD aracı (GitLab CI, GitHub Actions, Jenkins vb.) fark etmeksizin, mantık aynı: Kod repoya push edildiğinde veya merge edildiğinde tetiklenen bir işlem tanımlamak. Ben örnek olarak basit bir GitHub Actions workflow'u göstereceğim. Temel adımlar şunlar:
1. Projeyi build ortamına al.
2. Gerekli Node.js modüllerini yükle.
3. CSS ve JS dosyalarını işleyecek script'leri çalıştır.
4. Oluşan minify/concatenate edilmiş dosyaları, deployment'ın yapılacağı ortama aktar.
Araç Seçimi: Neden Gulp?
Bu iş için Webpack, Parcel veya esbuild gibi birçok araç var. Benim tercihim, yapılandırması nispeten daha basit ve sadece bu iş için odaklanmış Gulp oldu. Gulp ile dosyaları izlemek, birleştirmek, minify etmek ve hepsini bir pipe (boru hattı) içinde yönetmek çok kolay.
İlk olarak projeye gulp ve ihtiyacımız olan plugin'leri ekliyoruz:
Gulpfile.js Örneğim
İşte benim basit ve etkili `gulpfile.js` dosyam. Bu dosya, `src` klasöründeki kaynak dosyalarımı alıp `dist` klasöründe optimize edilmiş hallerini oluşturacak.
GitHub Actions Workflow Entegrasyonu
Şimdi sıra, bu Gulp görevini her master/main branch'ine push attığımızda otomatik çalıştırmakta. `.github/workflows/build.yml` dosyamız şöyle:
`package.json` dosyasında da script kısmına şunu eklemeyi unutmayın:
Artık her kod gönderiminde, pipeline'ım `dist/` klasöründe `app.bundle.min.js` ve `styles.bundle.min.css` dosyalarını otomatik oluşturacak. Deployment script'inizi de sadece bu `dist/` klasöründeki minify edilmiş dosyaları sunucuya atayacak şekilde güncelleyebilirsiniz.
Sonuç olarak, geliştirme sırasında modüler ve düzenli kod yazmaya devam ediyoruz, ancak kullanıcılarımız tek bir, küçültülmüş CSS ve JS dosyası ile süper hızlı bir site deneyimi yaşıyor. Bu yöntemle Lighthouse performans skorlarımız ciddi anlamda yükseldi.
Siz bu optimizasyon işlemini pipeline'larınızda nasıl yapıyorsunuz? Webpack gibi daha kapsamlı bir araç mı tercih ediyorsunuz yoksa farklı bir yaklaşımınız var mı? Yorumlarda deneyimlerinizi paylaşın!
Sorun: Dağınık Dosyalar ve Yavaş SayfalarProjemiz büyüdükçe, geliştirme aşamasında kullandığımız ayrı ayrı, okunabilir dosyalar production ortamı için bir yük haline geliyordu. Her bir HTTP isteği, sayfa açılışını yavaşlatıyordu. Manuel olarak bu dosyaları birleştirip (concatenate) küçültmek (minify) hem hataya açıktı hem de her deployment'da tekrarlanması gereken sıkıcı bir işti. Amacım, geliştiricilerin hala rahatça kod yazabildiği ayrı dosyalarla çalışmaya devam etmesi, ancak bu dosyaların production'a gitmeden otomatik olarak optimize edilmesiydi.
Çözüm: Pipeline'a Build Adımı EklemekKullandığımız CI/CD aracı (GitLab CI, GitHub Actions, Jenkins vb.) fark etmeksizin, mantık aynı: Kod repoya push edildiğinde veya merge edildiğinde tetiklenen bir işlem tanımlamak. Ben örnek olarak basit bir GitHub Actions workflow'u göstereceğim. Temel adımlar şunlar:
1. Projeyi build ortamına al.
2. Gerekli Node.js modüllerini yükle.
3. CSS ve JS dosyalarını işleyecek script'leri çalıştır.
4. Oluşan minify/concatenate edilmiş dosyaları, deployment'ın yapılacağı ortama aktar.
Araç Seçimi: Neden Gulp?Bu iş için Webpack, Parcel veya esbuild gibi birçok araç var. Benim tercihim, yapılandırması nispeten daha basit ve sadece bu iş için odaklanmış Gulp oldu. Gulp ile dosyaları izlemek, birleştirmek, minify etmek ve hepsini bir pipe (boru hattı) içinde yönetmek çok kolay.
İlk olarak projeye gulp ve ihtiyacımız olan plugin'leri ekliyoruz:
JavaScript:
npm install --save-dev gulp gulp-concat gulp-uglify gulp-clean-css gulp-renameİşte benim basit ve etkili `gulpfile.js` dosyam. Bu dosya, `src` klasöründeki kaynak dosyalarımı alıp `dist` klasöründe optimize edilmiş hallerini oluşturacak.
JavaScript:
const gulp = require('gulp');
const concat = require('gulp-concat');
const uglify = require('gulp-uglify');
const cleanCSS = require('gulp-clean-css');
const rename = require('gulp-rename');
// JS dosyalarını birleştir ve minify et
function scripts() {
return gulp.src([
'./src/js//.js' // Tüm JS dosyalarını al
])
.pipe(concat('app.bundle.js')) // Hepsinibundle.js'de birleştir
.pipe(gulp.dest('./dist/js')) // Önce normal halini kaydet
.pipe(rename({ suffix: '.min' })) // .min ekle
.pipe(uglify()) // Minify et
.pipe(gulp.dest('./dist/js')); // Minify edilmiş halini kaydet
}
// CSS dosyalarını birleştir ve minify et
function styles() {
return gulp.src([
'./src/css//.css' // Tüm CSS dosyalarını al
])
.pipe(concat('styles.bundle.css')) // Hepsinistyles.css'te birleştir
.pipe(gulp.dest('./dist/css'))
.pipe(rename({ suffix: '.min' }))
.pipe(cleanCSS({ compatibility: 'ie8' })) // Minify et
.pipe(gulp.dest('./dist/css'));
}
// Varsayılan görev: Her ikisini de çalıştır
exports.default = gulp.parallel(scripts, styles);Şimdi sıra, bu Gulp görevini her master/main branch'ine push attığımızda otomatik çalıştırmakta. `.github/workflows/build.yml` dosyamız şöyle:
YAML:
name: Build and Optimize Assets
on:
push:
branches: [ main ]
jobs:
build:
runs-on: ubuntu-latest
steps:
- name: Checkout kodu al
uses: actions/checkout@v3
- name: Node.js kur
uses: actions/setup-node@v3
with:
node-version: '18'
- name: Bağımlılıkları yükle
run: npm ci
- name: CSS/JS Asset'lerini Build et (Minify & Concatenate)
run: npm run build # package.json'da "build": "gulp" tanımlı
- name: Build edilmiş dosyaları artifact olarak kaydet (Opsiyonel)
uses: actions/upload-artifact@v3
with:
name: optimized-assets
path: dist/`package.json` dosyasında da script kısmına şunu eklemeyi unutmayın:
JSON:
"scripts": {
"build": "gulp"
}Artık her kod gönderiminde, pipeline'ım `dist/` klasöründe `app.bundle.min.js` ve `styles.bundle.min.css` dosyalarını otomatik oluşturacak. Deployment script'inizi de sadece bu `dist/` klasöründeki minify edilmiş dosyaları sunucuya atayacak şekilde güncelleyebilirsiniz.
Sonuç olarak, geliştirme sırasında modüler ve düzenli kod yazmaya devam ediyoruz, ancak kullanıcılarımız tek bir, küçültülmüş CSS ve JS dosyası ile süper hızlı bir site deneyimi yaşıyor. Bu yöntemle Lighthouse performans skorlarımız ciddi anlamda yükseldi.
Siz bu optimizasyon işlemini pipeline'larınızda nasıl yapıyorsunuz? Webpack gibi daha kapsamlı bir araç mı tercih ediyorsunuz yoksa farklı bir yaklaşımınız var mı? Yorumlarda deneyimlerinizi paylaşın!