Bu codelab, Ağ yüklerini küçültme ve sıkıştırma codelab'inin uzantısıdır ve sıkıştırma ile ilgili temel kavramlara aşina olduğunuzu varsayar. gzip
gibi diğer sıkıştırma algoritmalarıyla karşılaştırıldığında bu codelab'de, Bretli sıkıştırmanın sıkıştırma oranlarını ve uygulamanızın genel boyutunu nasıl daha fazla azaltabileceğini görürsünüz.
Ölçüm
Optimizasyonlar eklemeden önce, uygulamanın mevcut durumunu analiz etmek her zaman iyi bir fikirdir.
- Projeyi düzenlenebilir hale getirmek için Düzenlemek için Remiks'i tıklayın.
- Siteyi önizlemek için Uygulamayı Görüntüle'ye basın. Ardından, Tam ekran düğmesine basın.
Önceki Ağ yüklerini küçült ve sıkıştır codelab'de main.js
boyutunu 225 KB'tan 61,6 KB'a düşürdük. Bu codelab'de, Brotli sıkıştırmasının bu paket boyutunu nasıl daha da küçültebileceğini keşfedeceksiniz.
Brotli Sıkıştırması
Brotli, gzip
ürününden daha da iyi metin sıkıştırma sonuçları sağlayabilen yeni bir sıkıştırma algoritmasıdır. CertSimple'a göre Brotli performansı:
- JavaScript için
gzip
değerinden% 14 daha küçük - HTML için
gzip
boyutundan% 21 daha küçük - CSS için
gzip
değerinden% 17 daha küçük
Brotli'yi kullanmak için sunucunuzun HTTPS'yi desteklemesi gerekir. Brotli, çoğu tarayıcının en son sürümlerinde desteklenir. Brotli'yi destekleyen tarayıcılar, Accept-Encoding
üstbilgilerine br
ekler:
Accept-Encoding: gzip, deflate, br
Chrome Geliştirici Araçları Ağı sekmesindeki (Command+Option+I
veya Ctrl+Alt+I
) Content-Encoding
alanından hangi sıkıştırma algoritmasının kullanıldığını belirleyebilirsiniz:
Brotli'yi etkinleştirme
Dinamik sıkıştırma
Dinamik sıkıştırma, tarayıcı tarafından istenen öğelerin anında sıkıştırılmasını içerir.
Artıları
- Öğelerin kaydedilmiş sıkıştırılmış sürümlerini oluşturma ve güncelleme işleminin tamamlanması gerekmez.
- Anında sıkıştırma özellikle dinamik olarak oluşturulan web sayfaları için iyi sonuç verir.
Eksileri
- Daha iyi sıkıştırma oranları elde etmek için daha yüksek düzeylerde dosyaları sıkıştırmak daha uzun sürer. Kullanıcı, sunucu tarafından gönderilmeden önce öğelerin sıkıştırılmasını beklediği için bu durum bir performans isabetine neden olabilir.
Düğüm/Ekspres ile dinamik sıkıştırma
server.js
dosyası, uygulamayı barındıran Düğüm sunucusunu ayarlamaktan sorumludur.
var express = require('express');
var app = express();
app.use(express.static('public'));
var listener = app.listen(process.env.PORT, function() {
console.log('Your app is listening on port ' + listener.address().port);
});
Şu anda tüm bu işlemler, public/directory
içindeki tüm statik HTML, JS ve CSS dosyalarını yüklemek için express
içe aktarılıp express.static
ara yazılımını kullanmaktır (ve bu dosyalar her derlemeyle web paketi tarafından oluşturulur).
Tüm öğelerin her istendiğinde brotli kullanılarak sıkıştırıldığından emin olmak için shrink-ray
modülü kullanılabilir. package.json
hesabına devDependency
olarak ekleyerek başlayın:
"devDependencies": {
//...
"shrink-ray": "^0.1.3"
},
Ardından, dosyayı server.js
sunucu dosyasına aktarın:
var express = require('express');
var shrinkRay = require('shrink-ray');
express.static
eklenmeden önce dosyayı ara yazılım olarak ekleyin:
//...
var app = express();
// compress all requests
app.use(shrinkRay());
app.use(express.static('public'));
Şimdi uygulamayı yeniden yükleyin ve Ağ panelindeki paket boyutuna göz atın:
Artık bz
öğesinden brotli
öğesinin Content-Encoding
üstbilgisinde uygulandığını görebilirsiniz.
main.bundle.js
, 225 KB'den 53,1 KB'a düşürüldü! Bu boyut, gzip
ürününe (61,6 KB) kıyasla yaklaşık% 14 daha küçüktür.
Statik sıkıştırma
Statik sıkıştırmanın arkasındaki fikir, öğelerin önceden sıkıştırılmasını ve kaydedilmesini sağlamaktır.
Artıları
- Yüksek sıkıştırma seviyeleri nedeniyle yaşanan gecikme artık sorun değil. O anda doğrudan getirilebildiği için dosyaları sıkıştırmak için herhangi bir işlem yapmanız gerekmez.
Eksileri
- Her derlemede öğelerin sıkıştırılması gerekir. Yüksek sıkıştırma seviyeleri kullanılırsa derleme süreleri önemli ölçüde uzayabilir.
Düğüm/Ekspres ve webpack ile statik sıkıştırma
Statik sıkıştırma, dosyaların önceden sıkıştırılmasını gerektirdiğinden web paketi ayarları, derleme adımı kapsamında öğeleri sıkıştıracak şekilde değiştirilebilir. Bunun için brotli-webpack-plugin
kullanılabilir.
package.json
hesabına devDependency
olarak ekleyerek başlayın:
"devDependencies": {
//...
"brotli-webpack-plugin": "^1.1.0"
},
Diğer web paketi eklentilerinde olduğu gibi onu yapılandırma dosyasına aktarın,
webpack.config.js
:
var path = require("path");
//...
var BrotliPlugin = require('brotli-webpack-plugin');
Ve bunu, Plugins dizisine ekleyin:
module.exports = {
// ...
plugins: [
// ...
new BrotliPlugin({
asset: '[file].br',
test: /\.(js)$/
})
]
},
Eklenti dizisi aşağıdaki bağımsız değişkenleri kullanır:
asset
: Hedef öğenin adı.[file]
, orijinal öğenin dosya adıyla değiştirilir.test
: Bu RegExp ile eşleşen tüm öğeler (yani.js
ile biten JavaScript öğeleri) işlenir.
Örneğin, main.js
, main.js.br
olarak yeniden adlandırılır.
Uygulama yeniden yüklendiğinde ve yeniden oluşturulduğunda, artık ana paketin sıkıştırılmış bir sürümü oluşturulur. Düğüm sunucusu tarafından sunulan son public/
dizininin içinde neler olduğuna bakmak için Glitch Console'u açın.
- Araçlar düğmesini tıklayın.
- Konsol düğmesini tıklayın.
public
dizinini değiştirmek ve tüm dosyalarını görmek için konsolda aşağıdaki komutları çalıştırın:
cd public
ls -lh
Paketin (main.bundle.js.br
) brotli sıkıştırılmış sürümü de buraya kaydedildi. Bu sürüm main.bundle.js
'dan yaklaşık% 76 daha küçük (225 KB - 53 KB).
Daha sonra sunucudan, orijinal JS sürümleri istendiğinde bu sıkıştırılmış dosyaları
göndermesini söyleyin. Bu işlem, dosyalar express.static
ile sunulmadan önce server.js
içinde yeni bir rota tanımlayarak yapılabilir.
var express = require('express');
var app = express();
app.get('*.js', (req, res, next) => {
req.url = req.url + '.br';
res.set('Content-Encoding', 'br');
res.set('Content-Type', 'application/javascript; charset=UTF-8');
next();
});
app.use(express.static('public'));
app.get
, sunucuya belirli bir uç nokta için GET
isteğine nasıl yanıt vereceğini bildirmek amacıyla kullanılır. Daha sonra, bu isteğin nasıl işleneceğini tanımlamak için bir geri çağırma işlevi kullanılır. Rota şu şekilde çalışır:
- İlk bağımsız değişken olarak
'*.js'
belirtilmesi, JS dosyasını getirmek üzere tetiklenen her uç nokta için bu işlevin çalışacağı anlamına gelir. - Geri çağırmada isteğin URL'sine
.br
eklenir veContent-Encoding
yanıt başlığıbr
olarak ayarlanır. Content-Type
üst bilgisi, MIME türünü belirtmek içinapplication/javascript; charset=UTF-8
olarak ayarlanır.- Son olarak
next()
, adım sırasının bir sonraki geri çağırmaya devam etmesini sağlar.
Bazı tarayıcılar brotli sıkıştırmayı desteklemeyebileceğinden, Brotli tarafından sıkıştırılmış dosyayı döndürmeden önce Accept-Encoding
istek başlığında br
bulunup bulunmadığını kontrol ederek brotli'nin desteklendiğini onaylayın:
var express = require('express');
var app = express();
app.get('*.js', (req, res, next) => {
if (req.header('Accept-Encoding').includes('br')) {
req.url = req.url + '.br';
console.log(req.header('Accept-Encoding'));
res.set('Content-Encoding', 'br');
res.set('Content-Type', 'application/javascript; charset=UTF-8');
}
next();
});
app.use(express.static('public'));
Uygulama yeniden yüklendikten sonra Ağ paneline bir kez daha bakın.
Başarıyla gerçekleştirildi. Öğelerinizi daha fazla sıkıştırmak için Brotli sıkıştırmasını kullandınız.
Sonuç
Bu codelab'de, brotli
uygulamasının uygulamanızın genel boyutunu nasıl daha da küçültebileceği gösterilmiştir. Desteklendiğinde brotli
, gzip
ürününden daha güçlü bir sıkıştırma algoritmasıdır.