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

Michael DiBlasio
Michael DiBlasio

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.

Uygulama ekran görüntüsü

Ölçüm

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 tam ekran 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

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):

Ağ paneli. İçerik kodlaması sütunu, gzip ve brotli (br) dahil olmak üzere çeşitli öğeler için kullanılan kodlamaları gösterir.

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:

Dinamik Brotli sıkıştırma ile paket boyutu.

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.

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
Statik Brotli sıkıştırmasıyla paket boyutu

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.

53,1 KB'lık paket boyutu (225 KB'tan)

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.