Performance ve Optimization
Node Modules Nasıl Optimize Ederiz ?
WebApp uygulamalarında node_modules hem projenin CI/CD süresini hemde bundle edilen JS parçacıkların tarayıcıya geç yüklenmesinden dolayı bir takım performans sorunlarına neden olur. Bu yazıda node_modules nasıl görselleştirebileceğimiz üzerinde duracağız.
--
https://onurdayibasi.dev/ dijital bahçe içerisinde bir çok mini proje bulunuyor. Burada her ne kadar dinamik yapıda bir mekanizma oluşturmaya çalışsamda, PoC (Proof Of Concept) bir çok proje deniyorum. Bu denemeler sırasında;
- Deneyip vazgeçtiğim ama node_modules kaldırmadığım kütüphaneler olabiliyor.
- Hızlı şekilde denediğim için boyut olarak çok yer kaplayan fakat alternatifleri olan kütüphaneler olabiliyor.
Yukarıdaki durumu anlayabilmek için öncelikle hangi paketleri kullandığımızı anlamamız gerekiyor. Bunun için package.json görselleştiren, biz geliştiricilerin daha iyi anlamasını sağlayacak bazı araçlardan faydalanabiliriz;
- NPMGraph: Package.json Dependency Grafiğini çıkarmanızı sağlıyor.
- Webpack Bundle Analyzer: Projenizi Webpack üzerinden bundle haline getiriyorsanız, bu Bundle Analyzer sizin modülleri ve npm kütüphaneleri nasıl kullandığınız hakkında bilgi verir,
- Bundlephobia : Bundle hakkında büyüklük, minified olup olmadığı, tahmini indirilme süreleri gibi bilgileri package.json üzerinden çıkarabilen online bir araç.
NPM Graph
NPM Graph amaç paket bağımlılıkları ile birlikte paketler için belli skorlar oluşturarak projenizin kalitesini ve lisanlarını, modülleri hakkında bilgi veriyor.
- Quality Score
- Overall Score
- Popularity Score
NPM paketleri için oluşturduğu bu skorları farklı renklendirerek sizin tüm proje paketleri genel kalite anlamında görebilmenizi sağlıyor.
Webpack Bundle Analyzer
React projeniz var ise ve bunu create-react-app ile oluşturmuşsanız, yapmanız gereken scripts klasörü açıp içerisine aşağıdaki gibi analyze.js dosyasını ekleyip, terminalde aşağıdaki komutu çalıştırmak.
node scripts/analyze.js
BundlePhobia
Package.json üzerinden projenizde yer alan kütüphane bağımlılıklarını ve bunlara ait boyut, versiyon, yüklenme süre bilgilerini çıkarıp listelemenizi sağlayan online bir araçtır.
