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

Michael DiBlasio

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

Not: Bu codelab'de Chrome Geliştirici Araçları kullanılır. Bilgisayarınızda yoksa Chrome'u indirin.

Bu codelab, Ağ yüklerini küçült ve sıkıştır codelab ve sıkıştırma ile ilgili temel kavramları bildiğiniz varsayılır. Farklı gzip gibi diğer sıkıştırma algoritmalarıyla karşılaştırıldığında, bu codelab'in Brotli sıkıştırması, sıkıştırma oranlarını ve uygulamanızın genel performansını daha da azaltabilir seçin.

Ölçüm

Not: Bu uygulamada webpack kullanıldığından kodda yapılan değişiklikler yeni bir derleme tetikler. Bu işlem birkaç saniye sürebilir. İşlem tamamlandıktan sonra, yaptığınız değişikliklerin uygulamaya yansıdığını görürsünüz.

Optimizasyonlar eklemeye başlamadan önce, değişiklikleri analiz etmek için uygulamanın mevcut durumu.

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 .

Önceki Ağ yüklerini küçült ve sıkıştır codelab'den main.js boyutunu 225 KB'den 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şfedeceğiz.

Brotli Sıkıştırması

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

Brotli daha da iyi metin sıkıştırması sağlayabilen yeni bir sıkıştırma algoritmasıdır. gzip sonuç daha var. Kaynak: CertSimple, 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'nin desteklendiği ülke çoğu tarayıcının en son sürümlerine göz atın. Tarayıcılar Brotli'yi destekleyenler, Accept-Encoding başlıklarına br ifadesini ekler:

Accept-Encoding: gzip, deflate, br

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

Brotli'yi etkinleştirme

Dinamik sıkıştırma

Dinamik sıkıştırma, öğeler alındıkları anda sıkıştırılır. bu gerekliliklere karşılık gelir.

Artıları

• Öğelerin kaydedilmiş sıkıştırılmış sürümlerini oluşturup güncellemek için tamamlandı.
• Anında sıkıştırmak özellikle otomatik olarak oluşturulur.

Eksileri

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

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

server.js dosyası, ana makineyi barındıran Düğüm sunucusunun kurulumundan sorumludur takip edebilirsiniz.

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 yalnızca express içe aktarılabiliyor ve express.static statik HTML, JS ve CSS dosyalarını yüklemek için ara katman yazılımı public/directory (ve bu dosyalar her derlemede web paketi tarafından oluşturulur).

Oluşturulan tüm öğelerin brotli kullanılarak sıkıştırıldığından shrink-ray modülünü kullanabilirsiniz. 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 yaklaşık% 14 daha küçüktür ile gzip karşılaştırması (61,6 KB).

Not: Brotli'nin 0 (sıkıştırma yok) ile 9 (maksimum sıkıştırma) arasındaki on bir kalite seviyesi vardır. 1 kalitesi çok hızlıdır ancak daha az etkilidir. Buna karşılık, 11 kalite ayarı çok yavaştır ancak dosya boyutunda büyük tasarruf sağlar. Varsayılan olarak 11 kalitesini ayarlayan standart brotli kitaplığından farklı olarak shrink-ray için varsayılan olarak 4 kalitesi kullanılır. Bu kalite genellikle dinamik içerik için daha uygundur. Brotli algoritmasının parametrelerini, shrinkRay([options]) öğesine options parametresi ileterek ayarlayabilirsiniz.

Statik sıkıştırma

Statik sıkıştırmanın arkasındaki fikir, öğelerin sıkıştırılarak önceden kaydedilmesidir. kazanıyor.

Artıları

• Yüksek sıkıştırma seviyeleri nedeniyle yaşanan gecikme artık sorun değil. Hiçbir şey ancak anında getirilebilmesi için dosyaların sıkıştırılması gerekir. doğrudan ekleyebilirsiniz.

Eksileri

• Her derlemede öğelerin sıkıştırılması gerekir. Derleme süreleri uzayabilir çok yüksek sıkıştırma oranı sağlar.

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 webpack ayarları, derleme adımının parçası olarak öğeleri sıkıştırmak için değiştirilebilir. İlgili içeriği oluşturmak için kullanılan 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 da yapılandırma dosyasına içe 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) 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ış sürümü oluşturuldu. Glitch Console'u açarak nihai Düğüm sunucusu tarafından sunulan public/ dizini.

1. Araçlar düğmesini tıklayın.
2. Konsol düğmesini tıklayın.
3. public olarak değiştirmek için konsolda aşağıdaki komutları çalıştırın adresini ziyaret edin ve tüm dosyalarını görüntüleyin:

cd public
ls -lh

Paketin (main.bundle.js.br) brotli sıkıştırılmış sürümü kaydedildi ve boyut olarak ~% 76 daha küçük (225 KB - 53 KB) main.bundle.js.

Daha sonra, sunucudan bu sıkıştırılmış dosyaları orijinal JS sürümleri isteniyor. Bu, yeni bir dosyalar express.static ile sunulmadan önce server.js içindeki rotayı belirleyin.

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 bir GET isteğine nasıl yanıt vereceğini bildirmek için kullanılır görebilirsiniz. Ardından bir geri çağırma işlevi, bu yapılandırmanın nasıl ele alınacağını tanımlamak için isteğinde bulunabilirsiniz. Rota şu şekilde çalışır:

• İlk bağımsız değişken olarak '*.js' belirtilmesi, bunun her uç nokta ile aynıdır.
• Geri çağırmada isteğin URL'sine .br eklenir. Content-Encoding yanıt başlığı br olarak ayarlandı.
• Content-Type başlığı application/javascript; charset=UTF-8 olarak ayarlandı ve MIME türünü belirtin.
• Son olarak next(), dizinin gerçekleşebilecek olası bir geri çağırmaya devam etmesini sağlar. bir sonraki.

Bazı tarayıcılar brotli sıkıştırmasını desteklemeyebileceğinden, brotli'nin zip dosyasını döndürmeden önce Accept-Encoding istek başlığı br içeriyor:

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 da sıkıştırmak için Brotli sıkıştırmasını kullandınız.

Sonuç

Bu codelab, brotli uygulamasının genel olarak uygulamanızın genel performansını nasıl daha da küçültebileceğini göstermiştir seçin. brotli, desteklendiğinde şuna kıyasla daha güçlü bir sıkıştırma algoritmasıdır: gzip.

Uyarı: Manuel olarak uygulamadan önce, CDN'nizin brotli hizmetini destekleyip desteklemediğini kontrol etmeyi unutmayın. brotli öğesini 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ğiniz varsa brotli ürününün avantajlarını uygulama çabasıyla karşılaştırmak iyi bir fikirdir.