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ına kıyasla bu codelab'de, Brotli sıkıştırmanın (br) sıkıştırma oranlarını ve uygulamanızın genel boyutunu nasıl daha da azaltabileceği incelenmektedir.

Ölçüm

Not: Bu uygulamada webpack kullanıldığı için kodda yapılan tüm değişiklikler yeni bir derlemeyi tetikler. Bu işlem birkaç saniye sürebilir. İşlem tamamlandığında, yaptığınız değişikliklerin 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 oluştur'u 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üçültme ve sıkıştırma codelab'inde, main.js boyutunu 225 KB'tan 61,6 KB'ya indirdik. 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'den daha da iyi metin sıkıştırma sonuçları sağlayabilen daha 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ında br içerir:

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. Bu durum, kullanıcı sunucu tarafından gönderilmeden önce öğelerin sıkıştırılmasını beklerken performans düşüşüne 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 bağlanmadan ö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'dan 53,1 KB'ya 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 amacı, öğelerin önceden sıkıştırılıp kaydedilmesidir.

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 webpack'te statik sıkıştırma

Statik sıkıştırma, dosyaları önceden sıkıştırmayı içerdiğinden webpack 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'a 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');

Ardından, eklentiler 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 dosyası adıyla değiştirilir.
• test: Bu normal ifadeyle 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. Node sunucusu tarafından sunulan nihai public/ dizininin içeriğine göz atmak 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ç nokta için GET isteğine nasıl yanıt vereceğini bildirmek amacıyla 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 da sıkıştırmak için Brotli sıkıştırmasını kullandınız.

Sonuç

Bu codelab'de, brotli'ün uygulamanızın genel boyutunu nasıl daha da azaltabileceğ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.