Brotli ile ağ yüklerini küçültün ve sıkıştırın

Michael DiBlasio

Bu codelab'i izlemek için bu Glitch'i ikinci bir sekmede açın.

Not: Bu codelab'de Chrome Geliştirici Araçları kullanılır. Henüz yapmadıysanız Chrome'u indirin.

Bu codelab, Ağ yüklerini küçültme ve sıkıştırma codelab'inin bir uzantısı olup sıkıştırmayla ilgili temel kavramlar hakkında bilgi sahibi olduğunuzu varsayar. gzip gibi diğer sıkıştırma algoritmalarıyla karşılaştırıldığında bu codelab, Bratli sıkıştırmasının sıkıştırma oranlarını ve uygulamanızın genel boyutunu nasıl daha da küçültebileceğini araştırır.

Ölçüm

Not: Bu uygulamada webpack kullanıldığından kodda yapılan değişiklikler birkaç saniye sürebilecek yeni bir derlemeyi tetikler. İşlem tamamlandıktan sonra değişikliklerinizin başvurunuza yansıdığını göreceksiniz.

Optimizasyonlar eklemeye başlamadan önce, uygulamanın mevcut durumunu analiz etmek her zaman iyi bir fikirdir.

1. Projeyi düzenlenebilir hale getirmek için Düzenlenecek remiks'i tıklayın.
2. Siteyi önizlemek için Uygulamayı Göster'e, ardından Tam Ekran'a basın.

Önceki Ağ yüklerini küçültme ve sıkıştırma codelab'inde main.js boyutunu 225 KB'den 61,6 KB'ye indirdik. 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ı

Uyarı: Birçok barındırma platformu, CDN ve ters proxy sunucusu, öğeleri varsayılan olarak sıkıştırarak kodlar veya bunları kolayca yapılandırmanıza olanak tanır. Barındırma platformunuz Brotli'yi destekliyorsa öğelerinizi bu eğiticide açıklandığı gibi Brotli ile sıkıştıracak şekilde sunucunuzu ayarlamanız gerekmeyebilir.

Brotli, gzip yönteminden daha iyi metin sıkıştırma sonuçları sunabilen yeni bir sıkıştırma algoritmasıdır. CertSimple verilerine göre Brotli performansı:

• JavaScript için gzip ile karşılaştırıldığında% 14 daha küçük
• HTML için gzip değerinden% 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 desteklenmektedir. Brotli'yi destekleyen tarayıcılar, Accept-Encoding üst bilgilerine br ifadesini 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şlemlerinin yapılması gerekmez.
• Anında sıkıştırma, özellikle dinamik olarak oluşturulan web sayfalarında iyi sonuç verir.

Eksileri

• Daha iyi sıkıştırma oranları elde etmek için dosyaları daha yüksek düzeylerde sıkıştırmak daha uzun sürer. Bu durum, kullanıcı öğelerin sunucu tarafından gönderilmeden önce sıkıştırılmasını beklerken bir performans isabetine neden olabilir.

Düğüm/Ekspres ile dinamik sıkıştırma

server.js dosyası, uygulamayı barındıran Düğüm sunucusunu kurmaktan 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 bunlar public/directory içindeki tüm statik HTML, JS ve CSS dosyalarını yüklemek için express dosyasını içe aktarmak ve express.static ara katman yazılımını kullanmaktır (ve bu dosyalar her derlemede webpack 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 alanına devDependency olarak ekleyerek başlayın:

"devDependencies": {
  //...
  "shrink-ray": "^0.1.3"
},

Ve bu değeri sunucu dosyasına (server.js) aktarın:

var express = require('express');
var shrinkRay = require('shrink-ray');

Ve express.static eklenmeden önce bunu bir ara katman 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 bakın:

Artık Content-Encoding başlığında brotli öğesinin bz kaynağından uygulandığını görebilirsiniz. main.bundle.js, 225 KB'tan 53,1 KB'ye düşürüldü! Bu boyut, gzip (61,6 KB) ile kıyaslandığında yaklaşık% 14 daha küçüktür.

Not: Brotli, 0 ile (sıkıştırma yok) 9 (maksimum sıkıştırma) aralığında on bir kalite seviyesine sahiptir. 1 kalitesi çok hızlı, ancak daha az etkilidir. Öte yandan, 11 kalite ayarı çok yavaştır ancak dosya boyutundan büyük tasarruf sağlar. Varsayılan kalite 11 olan standart brotli kitaplığından farklı olarak shrink-ray, varsayılan olarak 4 kaliteye ayarlanır. Bu kalite, genellikle dinamik içerik için daha uygundur. Brotli algoritmasının parametrelerini, shrinkRay([options]) parametresine bir options parametresi ileterek ayarlayabilirsiniz.

Statik sıkıştırma

Statik sıkıştırmanın ardındaki fikir, öğelerin önceden sıkıştırılarak kaydedilmesini sağlamaktır.

Artıları

• Yüksek sıkıştırma seviyelerinden kaynaklanan gecikme artık sorun değil. Dosyalar artık doğrudan alınabildiği için anında sıkıştırmak gerekmez.

Eksileri

• Öğelerin her derlemede sıkıştırılması gerekir. Yüksek sıkıştırma seviyeleri kullanılırsa derleme süreleri önemli ölçüde artabilir.

Node/Express ve webpack ile statik sıkıştırma

Statik sıkıştırma, dosyaların önceden sıkıştırılmasını içerdiğinden web paketi ayarları, derleme adımının bir parçası olarak öğeleri sıkıştıracak şekilde değiştirilebilir. Bunun için brotli-webpack-plugin kullanılabilir.

package.json alanına devDependency olarak ekleyerek başlayın:

"devDependencies": {
  //...
 "brotli-webpack-plugin": "^1.1.0"
},

Diğer herhangi bir web paketi eklentisi gibi, onu da yapılandırma dosyasına (webpack.config.js) içe aktarın:

var path = require("path");

//...
var BrotliPlugin = require('brotli-webpack-plugin');

Ve bunu eklenti 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 öğe adı.
• [file], orijinal öğe 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üklenip yeniden oluşturulduğunda ana paketin sıkıştırılmış bir sürümü oluşturulur. Düğüm sunucusu tarafından sunulan son public/ dizininde ne olduğuna bakmak için Glitch Console'u açın.

1. Araçlar düğmesini tıklayın.
2. Konsol düğmesini tıklayın.
3. Konsolda, public dizinine geçmek ve tüm dosyalarını görmek için aşağıdaki komutları çalıştırın:

cd public
ls -lh

Paketin brotli içeren sıkıştırılmış sürümü main.bundle.js.br de artık burada bulunmaktadır ve main.bundle.js ile karşılaştırıldığında yaklaşık% 76 daha küçük boyuttadır (225 KB ve 53 KB).

Daha sonra, sunucuya orijinal JS sürümleri istendiğinde bu brotli 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ımlanarak 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 için 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, bunun bir JS dosyası getirmek üzere tetiklenen her uç nokta için kullanılacağı anlamına gelir.
• Geri çağırmaya .br, isteğin URL'sine eklenmiş ve Content-Encoding yanıt başlığı br olarak ayarlanmıştır.
• Content-Type üstbilgisi, MIME türünü belirtmek için application/javascript; charset=UTF-8 olarak ayarlanır.
• Son olarak next(), sıranın bir sonraki geri çağırmaya devam etmesini sağlar.

Bazı tarayıcılar brotli sıkıştırmasını desteklemeyebileceğinden, Accept-Encoding istek başlığında br öğesini kontrol ederek brotli ile sıkıştırılmış dosyayı döndürmeden önce 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 özelliğinin uygulamanızın genel boyutunu nasıl daha da küçültebileceğini gösterdik. Desteklendiği durumlarda brotli, gzip uygulamasından daha güçlü bir sıkıştırma algoritmasıdır.

Uyarı: Manuel olarak uygulamadan önce CDN'nizin brotli'i destekleyip desteklemediğini kontrol etmeyi unutmayın. brotli özelliğini manuel olarak uygulamanız gerekiyorsa (bu codelab'de açıklandığı gibi) ancak gzip gibi diğer sıkıştırma algoritmaları için CDN desteğine sahipseniz, brotli avantajlarını uygulamak için gereken çabayla kıyaslamak iyi bir fikirdir.