1. Lazy Loading ve Dinamik İçe Aktarımlar: Daha Hızlı Sayfalar, Daha İyi Deneyimler
İlk adım, sayfanızda gereksiz yüklemeleri engellemek olmalıdır. Lazy loading, sayfa içeriğinin yalnızca ihtiyaç duyulduğunda yüklenmesini sağlar. Bu, özellikle medya dosyaları ve uzun listelerde mükemmel bir tekniktir.
```javascript
if (IntersectionObserver) {
const observer = new IntersectionObserver((entries) => {
entries.forEach(entry => {
if (entry.isIntersecting) {
const lazyImage = entry.target;
lazyImage.src = lazyImage.dataset.src;
observer.unobserve(lazyImage);
}
});
});
document.querySelectorAll('img.lazy').forEach(image => {
observer.observe(image);
});
}
```
Bu teknikle, yalnızca görsel olarak görünen öğeler yüklenir ve sayfa hızı önemli ölçüde artırılır.
2. Code Splitting: Modülleri Ayırarak Yüklemeyi Hızlandırın
Web uygulamanız büyüdükçe, tüm JavaScript dosyalarını birleştirmek, sayfanın daha uzun sürede yüklenmesine neden olabilir. Code splitting, uygulamanızdaki kodu daha küçük parçalara ayırarak yalnızca gerekli dosyaların yüklenmesini sağlar.
```javascript
// webpack.config.js
module.exports = {
entry: {
app: './src/app.js',
vendor: './src/vendor.js'
},
optimization: {
splitChunks: {
chunks: 'all'
}
}
};
```
Bu yöntem, sayfa yükleme hızını büyük ölçüde iyileştirir ve kullanıcıların sadece etkileşimde bulundukları bölüme özel kaynakları almasını sağlar.
3. Tree Shaking: Gereksiz Koddan Kurtulun
JavaScript, bazen kullanılmayan kodlarla dolu olabilir. Bu, sayfanın gereksiz yere büyük olmasına yol açar ve yükleme sürelerini artırır. Tree shaking, yalnızca kullanılan kodu bırakır ve geri kalanı eler.
```javascript
import { neededFunction } from 'large-library';
// unusedFunction kodu otomatik olarak dışlanır
```
Webpack ve Rollup gibi araçlar, tree shaking özellikleriyle bu işlemi oldukça verimli bir şekilde yapar.
4. Service Worker Kullanımı: Çalışma Zamanı Performansı ve Hızlı Yüklemeler
Service Worker'lar, sayfa yüklenmeden önce JavaScript'i önceden çalıştırmanıza imkan verir. Bu sayede sayfa yükleme süreleri oldukça kısalır ve uygulamanız çevrimdışı bile çalışabilir.
```javascript
if ('serviceWorker' in navigator) {
navigator.serviceWorker.register('/service-worker.js').then(function(registration) {
console.log('Service Worker registered with scope:', registration.scope);
}).catch(function(error) {
console.log('Service Worker registration failed:', error);
});
}
```
Bu küçük kod parçası, Service Worker'ı aktif hale getirir ve sitenizin daha hızlı bir hale gelmesini sağlar.
5. WebAssembly ve JavaScript Kombinasyonu: Daha Hızlı Uygulamalar İçin Yeni Bir Dönem
WebAssembly, JavaScript'ten daha hızlı çalışan düşük seviyeli bir dil sunar. WebAssembly’yi JavaScript ile birleştirerek, performans açısından kritik olan bölümlerde daha hızlı işlemler gerçekleştirebilirsiniz.
```javascript
// WebAssembly örneği
fetch('module.wasm')
.then(response => response.arrayBuffer())
.then(buffer => WebAssembly.instantiate(buffer))
.then(module => {
// WebAssembly modülünden bir fonksiyon çağırma
console.log(module.instance.exports.add(5, 3));
});
```
WebAssembly ile kritik bölümleri hızlandırarak, JavaScript ile etkileşimli ve hızlı bir uygulama oluşturabilirsiniz.
