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

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.

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

1. Araçlar düğmesini tıklayın.
2. Konsol düğmesini tıklayın.
3. 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 ve Content-Encoding yanıt başlığı br olarak ayarlanır.
• Content-Type üst bilgisi, MIME türünü belirtmek için application/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.