giriiş

Web sitenizin performansını artırmanın iyi yollarından biri HTML, CSS ve JavaScript dosyalarınızı küçültmektir. Bu aynı zamanda web sitenizin yükleme süresini iyileştirmenize de olanak tanır. Bunu yapmak için Webpack, Parcel veya Rollup gibi bir web uygulaması paketleyici kullanmanız gerekir. Bana göre en kolayı Parsel çünkü herhangi bir konfigürasyon gerektirmiyor. Dosyalarınızı üretime sunmadan önce her zaman küçültmeniz gerektiğini unutmayın.

Bu yazıda HTML, CSS ve JavaScript dosyalarımızı küçültmek için Parsel kullanacağız. Hemen konuya girelim.

Paket Yükle

index.htmlHTML dosyası , CSS dosyası style.cssve JavaScript dosyası içeren bir test projesi açtım index.js. srcTüm dosyalar , test projesinde bir kaynak klasörün içindedir .

package.jsonTest projesi klasörünün içinde, aşağıdaki komutu yazarak NPM kullanarak bir dosya eklemek için Git Bash kullanacağım :

npm init -y

Parsel yükleyin:

npm install -D parcel-bundler

Komut Dosyası Ekleme

Dosyanın içinde package.json, komut dosyalarını aşağıdaki gibi değiştirmemiz gerekecek:

"scripts": {
 "dev": "parcel src/index.html",
 "build": "parcel build src/index.html"
}

npm run build

Şimdi sadece bu dist klasörünü almanız ve sunucunuza dağıtmanız gerekecek. Sonuç olarak, web siteniz, dosyalarınız küçültülmediği zamana göre çok daha hızlı olacaktır.

Çözüm

Gördüğünüz gibi Parcel, dosyalarınızı küçültmeyi ve performansı artırmayı çok daha kolay hale getiriyor. Ayrıca yararlanabileceğiniz daha başka kullanışlı özelliklere de sahiptir.

Bu makaleyi okuduğunuz için teşekkür ederiz. Umarım faydalı bulmuşsunuzdur.

Daha Fazla Okuma