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ımaktadır. Bunu yapmak için, Webpack, Parcel veya Rollup gibi bir web uygulaması paketleyicisi kullanmanız gerekecektir. Bence en kolayı Parcel çünkü herhangi bir konfigürasyon gerektirmiyor. Dosyalarınızı üretime yayınlamadan önce her zaman küçültmemizi gerektiğini unutmayalım.

Bu yazıda, HTML, CSS ve JavaScript dosyalarımızı küçültmek için Parcel'i kullanacağız. 

Parsel Yükle

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

Yazara göre proje klasörü.

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

npm init -y

Artık Parcel'i komut satırında (Git Bash veya entegre bir terminal) NPM kullanarak geliştirme bağımlılığı olarak kurabiliriz.

Parsel Yükle:

npm yükleme -D paket paketleyici

Komut Dosyaları 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 " 
}

Dosyalarımızı küçültmek için, aşağıdaki gibi komut satırında NPM kullanarak derleme betiğini çalıştırmamız gerekecek:

npm çalıştırma derlemesi

Bu, otomatik olarak distküçültülmüş ve paketlenmiş tüm dosyalarımızı içeren bir klasör oluşturacaktır .

Şimdi sadece bu dist klasörünü alıp sunucunuza dağıtmanız gerekecek. Sonuç olarak, web siteniz dosyalarınız küçültülmediğinde eskisinden çok daha hızlı olacaktır.

Sonuç

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.