Angular’da CSS Temizleme: PurgeCSS ve Tailwind Kullanım Rehberi
Angular projelerinde kullanılmayan CSS sınıflarını temizlemek (“purge” işlemi), özellikle Tailwind veya Bootstrap gibi büyük CSS framework’leri kullanıyorsanız, uygulamanızın performansını ve SEO’sunu ciddi şekilde artırır. Bu rehberde, Angular’da CSS temizleme işlemini adım adım anlatıyoruz.
1. Angular’da CSS Temizleme için Temel Yöntemler
A) Tailwind CSS Kullanıyorsanız
Tailwind CSS projelerinde temizleme (purge) işlemi otomatik olarak yapılır. tailwind.config.js dosyanızda aşağıdaki ayarı doğrulayın:
module.exports = {
content: ["./src/**/*.{html,ts}"],
theme: { /* ... */ },
plugins: [],
};Bu ayar ile sadece production build sırasında gereksiz CSS’ler temizlenir.
B) Klasik CSS veya Bootstrap için: PurgeCSS ile Manuel Temizlik
Tailwind dışındaki projelerde, örneğin Bootstrap veya kendi yazdığınız CSS’leri temizlemek için PurgeCSS kullanabilirsiniz. Bu işlemi postcss ile kolayca entegre edebilirsiniz.
Adım Adım Angular’da PurgeCSS Kullanımı
-
Gerekli Paketleri Yükleyin:
npm install @fullhuman/postcss-purgecss --save-dev npm install postcss --save-dev -
Proje köküne
postcss.config.jsoluşturun:module.exports = { plugins: [ require('@fullhuman/postcss-purgecss')({ content: [ './src/**/*.html', './src/**/*.ts' ], defaultExtractor: content => content.match(/[\\w-/:]+(?<!:)/g) || [] }) ] }; -
Angular CLI ile Entegrasyon:
Angular 12 ve üzeri sürümlerde,
postcss.config.jsdosyası otomatik olarak algılanır. -
Production Build’da Çalıştırın:
ng build --configuration production
Önemli İpuçları
-
Dinamik Sınıflar için
safelistKullanımı: JavaScript veya Angular ile dinamik eklenen class’lar PurgeCSS tarafından temizlenebilir. Bunu önlemek içinsafelistekleyin:require('@fullhuman/postcss-purgecss')({ // ... diğer ayarlar safelist: ['my-dynamic-class', /^modal-/], });