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

Michael DiBlasio

İpucu: Bu kod laboratuvarını takip etmek için ikinci bir sekmede bu Glitch demosunu açın.

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

Bu kod laboratuvarı, Ağ yükü verilerini küçültme ve sıkıştırma kod laboratuvarının bir uzantısıdır ve sıkıştırmayla ilgili temel kavramlara aşina olduğunuz varsayılır. 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 (br) 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

Not: Bu uygulamada webpack kullanıldığından kodda yapılan değişiklikler yeni bir derlemeyi tetikler. Bu işlem birkaç saniye sürebilir. İşlem tamamlandığında, değişikliklerinizin uygulamaya yansıtıldığını görürsünüz.

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

1. Projeyi düzenlenebilir hale getirmek için Düzenlemek için Remiks'i tıklayın.
2. Siteyi önizlemek için Uygulamayı Görüntüle'ye, ardından Tam Ekran'a 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 azaltabileceğini keşfedeceksiniz.

Brotli Sıkıştırma

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

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'ten %14 daha küçük
• HTML için gzip'ten% 21 daha küçük
• CSS için gzip'ten %17 daha küçük

Brotli'yi kullanmak için sunucunuzun HTTPS'yi desteklemesi gerekir. Brotli, tüm modern tarayıcılarda desteklenir. Brotli'yi destekleyen tarayıcılar, Accept-Encoding başlıklarına br ifadesini ekler:

Accept-Encoding: gzip, deflate, br

Chrome Geliştirici Araçları Ağ sekmesindeki Content-Encoding alanını kullanarak hangi sıkıştırma algoritmasının kullanıldığını belirleyebilirsiniz (Command+Option+I veya Ctrl+Alt+I):

Brotli'yi etkinleştirme

Brotli ile kodlanmış kaynakları göndermek için bir web sunucusunu nasıl ayarlayacağınız, bunları nasıl kodlamayı planladığınıza bağlıdır. Kaynakları istek sırasında Brotli ile dinamik olarak sıkıştırabilir (dinamik) veya kullanıcı istekte bulunduğunda zaten sıkıştırılmış olacakları şekilde önceden kodlayabilirsiniz (statik).

Dinamik sıkıştırma

Dinamik sıkıştırma, öğelerin tarayıcı tarafından istendiği anda sıkıştırılmasını içerir.

Avantajları

• Öğelerin sıkıştırılmış ve kaydedilmiş sürümlerini oluşturmak ve güncellemek gerekmez.
• Anlık sıkıştırma, özellikle dinamik olarak oluşturulan web sayfalarında iyi sonuç verir.

Dezavantajları

• 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. 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.

Node ve Express ile dinamik sıkıştırma

server.js dosyası, uygulamayı barındıran Node sunucusunu oluşturmaktan sorumludur.

const express = require('express');
const app = express();
app.use(express.static('public'));

const listener = app.listen(process.env.PORT, function() {
  console.log(`Your app is listening on port ${listener.address().port}`);
});

Bunun tek amacı, express dosyasını içe aktarmak ve public/directory içindeki tüm statik HTML, JS ve CSS dosyalarını yüklemek için express.static aracıyı kullanmaktır (bu dosyalar her derlemede webpack tarafından oluşturulur).

Tüm öğelerin istendiğinde her zaman brotli kullanılarak sıkıştırıldığından emin olmak için shrink-ray modülü kullanılabilir. package.json'a devDependency olarak ekleyerek başlayın:

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

Ardından, server.js sunucu dosyasına aktarın:

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

Ardından, express.static monte edilmeden önce ara yazılım olarak ekleyin:

// ...
const 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 brotli'ün Content-Encoding üstbilgisinde bz'ten uygulandığını görebilirsiniz. main.bundle.js, 225 KB'den 53,1 KB'a düşürüldü! Bu, gzip (61,6 KB) ile karşılaştırıldığında yaklaşık %14 daha küçüktür.

Not: Brotli'nin 0 (sıkıştırma yok) ile 9 (maksimum sıkıştırma) arasında on bir kalite seviyesi vardır. 1 kalitesi çok hızlıdır ancak daha az etkilidir. 11 kalitesi ise çok yavaştır ancak dosya boyutunda büyük tasarruf sağlar. Varsayılan olarak 11 kalitesini kullanan standart brotli kitaplığının aksine, shrink-ray'un varsayılan olarak 4 kalitesini kullandığını unutmayın. Bu kalite, genellikle dinamik içerikler için daha uygundur. options parametrelerini shrinkRay([options])'e ileterek brotli algoritmasının parametrelerini ayarlayabilirsiniz.

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.

Avantajları

• Yüksek sıkıştırma seviyelerinden kaynaklanan gecikme artık sorun olmaktan çıktı. Dosyalar artık doğrudan getirilebildiğinden, sıkıştırmak için anında hiçbir işlem yapılması gerekmez.

Dezavantajları

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

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

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. Bu amaçla brotli-webpack-plugin kullanılabilir.

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

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

Diğer tüm webpack eklentileri gibi, bu eklentiyi de yapılandırmalar dosyasına aktarınwebpack.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 öğe 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 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.

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

cd public
ls -lh

Paketin brotli sıkıştırılmış sürümü main.bundle.js.br artık burada da kayıtlı. main.bundle.js.br, main.bundle.js'a kıyasla yaklaşık %76 daha küçük (225 KB ve 53 KB).

Ardından, sunucuya orijinal JS sürümleri istendiğinde bu Brotli sıkıştırılmış dosyaları göndermesini söyleyin. Bu, dosyalar express.static ile yayınlanmadan önce server.js içinde yeni bir rota tanımlayarak yapılabilir.

const express = require('express');
const 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ç noktayla ilgili GET isteğine nasıl yanıt vereceğini bildirmek için kullanılır. Ardından, 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' belirtildiğinde bu, bir JS dosyası almak için tetiklenen her uç nokta için geçerli olur.
• Geri çağırma içinde .br, isteğin URL'sine eklenir ve Content-Encoding yanıt başlığı br olarak ayarlanır.
• MIME türünü belirtmek için Content-Type üstbilgisi application/javascript; charset=UTF-8 olarak ayarlanır.
• Son olarak next(), sıranın bir sonraki geri çağırma işlevine devam etmesini sağlar.

Bazı tarayıcılar brotli sıkıştırmayı desteklemeyebilir. Bu nedenle, brotli sıkıştırılmış dosyayı döndürmeden önce Accept-Encoding istek başlığının br içerdiğini kontrol ederek brotlinin desteklendiğini onaylayın:

const express = require('express');
const 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 tekrar göz atı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. Desteklenen durumlarda brotli, gzip'ten daha güçlü bir sıkıştırma algoritmasıdır.

Uyarı: Manuel olarak uygulamadan önce CDN'nizin brotli'ı destekleyip desteklemediğini kontrol etmeyi unutmayın. brotli'ü manuel olarak uygulamanız gerekiyorsa (bu kod laboratuvarında açıklandığı gibi) ancak gzip gibi diğer sıkıştırma algoritmaları için CDN desteğiniz varsa brotli'ün avantajlarını uygulamak için gereken çabaya karşı tartmak iyi bir fikirdir.