Merhaba arkadaşlar, bugün sizlere projelerimde sıkça kullandığım ve performans açısından bana ciddi kazanç sağlayan bir yöntemden bahsedeceğim. Özellikle Bootstrap gibi büyük bir CSS framework'ünü kullanırken, tüm dosyayı projeye yüklemek hem boyutu şişiriyor hem de kullanmadığınız tonlarca stil tarayıcıya iniyor. Ben de bu sorunu çözmek için sadece ihtiyacım olan component'leri import etme yoluna gittim. İşte nasıl yaptığım...
Neden Tüm Bootstrap Dosyasını Yüklemeyelim?
Bu soruyu ilk duyduğumda "Zaten CDN'den geliyor, ne olacak ki?" diye düşünmüştüm. Ama özellikle mobil kullanıcılar ve düşük internet hızı için her KB çok önemli. Bootstrap 5'in tam minified CSS dosyası yaklaşık 160KB. Oysa ben belki sadece grid sistemini, birkaç butonu ve modal'ı kullanıyorum. Geri kalan 140KB boşuna yükleniyor. Bu da First Contentful Paint (FCP) süresini olumsuz etkiliyor. İşte bu yüzden parçalı import işine girdim.
Bootstrap'ı SCSS ile Parçalara Ayırmak
Eğer projenizde SCSS kullanıyorsanız (ki şiddetle tavsiye ederim), Bootstrap'ı modüler bir şekilde kullanmak inanılmaz kolay. Bootstrap'ın kendi SCSS dosyaları zaten bu mantıkla hazırlanmış. Yapmanız gereken, ana proje SCSS dosyanıza sadece ihtiyacınız olan parçaları import etmek.
İşte benim tipik bir projemdeki `main.scss` dosyasının başlangıcı:
Gördüğünüz gibi, `navbar`, `carousel`, `dropdown` gibi kullanmayacağım onlarca component'in kodunu projeme dahil etmedim. Bu, üretilen CSS dosya boyutunu neredeyse %70 küçülttü.
Pure CSS veya NPM ile Alternatif Yöntem
SCSS kullanmıyorsanız ya da daha hafif bir çözüm istiyorsanız, bir diğer yöntem PurgeCSS gibi araçlar kullanmak. Özellikle React, Vue gibi framework'lerle çalışıyorsanız, build aşamasında kullanılmayan CSS sınıflarını otomatik temizleyebilirsiniz. PostCSS eklentisi olarak kurmak çok kolay.
Bir diğer pratik yol ise, npm üzerinden sadece ihtiyacınız olan Bootstrap modüllerini yüklemek. Örneğin, sadece grid sistemini istiyorsanız:
Sonra da doğrudan JS dosyanızdan veya CSS'inizden import edebilirsiniz:
Bu yöntem, özellikle küçük çaplı projeler veya mevcut bir tasarımın üzerine sadece grid sistemi eklemek istediğinizde birebir.
Sonuç ve Performans Kazanımı
Bu yöntemi uyguladıktan sonra yaptığım testlerde, CSS dosya boyutunun 160KB'tan 45KB'a düştüğünü gördüm. Bu, mobilde ortalama 3G bağlantıda bile hissedilir bir sayfa yükleme hızı artışı demek. Lighthouse skorlarımda, özellikle Performance metriği gözle görülür şekilde yükseldi.
Peki ya siz? Bootstrap veya Tailwind gibi büyük framework'ler kullanırken performans için hangi yöntemleri tercih ediyorsunuz? Hiç tüm dosyayı yükleyip "Acaba gereksiz mi yükleniyor?" diye düşündünüz mü? Ya da benim atladığım daha pratik bir çözümünüz var mı? Yorumlarda deneyimlerinizi paylaşırsanız çok sevinirim!
Bir sonraki yazıda, aynı mantıkla JavaScript component'lerini nasıl tree-shake yapabileceğimizi anlatacağım. Görüşmek üzere!
Neden Tüm Bootstrap Dosyasını Yüklemeyelim?Bu soruyu ilk duyduğumda "Zaten CDN'den geliyor, ne olacak ki?" diye düşünmüştüm. Ama özellikle mobil kullanıcılar ve düşük internet hızı için her KB çok önemli. Bootstrap 5'in tam minified CSS dosyası yaklaşık 160KB. Oysa ben belki sadece grid sistemini, birkaç butonu ve modal'ı kullanıyorum. Geri kalan 140KB boşuna yükleniyor. Bu da First Contentful Paint (FCP) süresini olumsuz etkiliyor. İşte bu yüzden parçalı import işine girdim.
Bootstrap'ı SCSS ile Parçalara AyırmakEğer projenizde SCSS kullanıyorsanız (ki şiddetle tavsiye ederim), Bootstrap'ı modüler bir şekilde kullanmak inanılmaz kolay. Bootstrap'ın kendi SCSS dosyaları zaten bu mantıkla hazırlanmış. Yapmanız gereken, ana proje SCSS dosyanıza sadece ihtiyacınız olan parçaları import etmek.
İşte benim tipik bir projemdeki `main.scss` dosyasının başlangıcı:
SCSS:
// 1. İlk önce gerekli fonksiyon ve değişkenleri yüklüyoruz.
// Bu dosyalar diğer component'ler için zorunlu.
@import "~bootstrap/scss/functions";
@import "~bootstrap/scss/variables";
@import "~bootstrap/scss/mixins";
@import "~bootstrap/scss/utilities";
// 2. İhtiyacım olan utilities (yardımcı sınıflar) map'ini oluşturuyorum.
// Sadece kullanacaklarımı buraya ekliyorum.
$utilities: map-get-multiple(
$utilities,
(
"margin",
"margin-x",
"margin-y",
"padding",
"padding-x",
"padding-y",
"display",
"border"
)
);
// 3. Şimdi sıra ihtiyacım olan component'leri tek tek import etmekte.
// Grid sistemi OLMAZSA OLMAZ.
@import "~bootstrap/scss/root";
@import "~bootstrap/scss/reboot";
@import "~bootstrap/scss/type";
@import "~bootstrap/scss/containers";
@import "~bootstrap/scss/grid";
// 4. Kullanacağım component'ler. Buton ve Alert bu projede var.
@import "~bootstrap/scss/buttons";
@import "~bootstrap/scss/alert";
// 5. En son utilities'i generate edip, projeme özel stilleri yazıyorum.
@import "~bootstrap/scss/utilities/api";
@import "my-custom-styles";Gördüğünüz gibi, `navbar`, `carousel`, `dropdown` gibi kullanmayacağım onlarca component'in kodunu projeme dahil etmedim. Bu, üretilen CSS dosya boyutunu neredeyse %70 küçülttü.
Pure CSS veya NPM ile Alternatif YöntemSCSS kullanmıyorsanız ya da daha hafif bir çözüm istiyorsanız, bir diğer yöntem PurgeCSS gibi araçlar kullanmak. Özellikle React, Vue gibi framework'lerle çalışıyorsanız, build aşamasında kullanılmayan CSS sınıflarını otomatik temizleyebilirsiniz. PostCSS eklentisi olarak kurmak çok kolay.
Bir diğer pratik yol ise, npm üzerinden sadece ihtiyacınız olan Bootstrap modüllerini yüklemek. Örneğin, sadece grid sistemini istiyorsanız:
Bash:
npm install bootstrap-gridSonra da doğrudan JS dosyanızdan veya CSS'inizden import edebilirsiniz:
JavaScript:
// Sadece Bootstrap Grid CSS'ini yükle
import 'bootstrap-grid/dist/css/bootstrap-grid.min.css';Bu yöntem, özellikle küçük çaplı projeler veya mevcut bir tasarımın üzerine sadece grid sistemi eklemek istediğinizde birebir.
Sonuç ve Performans KazanımıBu yöntemi uyguladıktan sonra yaptığım testlerde, CSS dosya boyutunun 160KB'tan 45KB'a düştüğünü gördüm. Bu, mobilde ortalama 3G bağlantıda bile hissedilir bir sayfa yükleme hızı artışı demek. Lighthouse skorlarımda, özellikle Performance metriği gözle görülür şekilde yükseldi.
Peki ya siz? Bootstrap veya Tailwind gibi büyük framework'ler kullanırken performans için hangi yöntemleri tercih ediyorsunuz? Hiç tüm dosyayı yükleyip "Acaba gereksiz mi yükleniyor?" diye düşündünüz mü? Ya da benim atladığım daha pratik bir çözümünüz var mı? Yorumlarda deneyimlerinizi paylaşırsanız çok sevinirim!
Bir sonraki yazıda, aynı mantıkla JavaScript component'lerini nasıl tree-shake yapabileceğimizi anlatacağım. Görüşmek üzere!