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
Optimizasyon eklemeye başlamadan önce, uygulamanın mevcut durumunu analiz etmek her zaman iyi bir fikirdir.
- Projeyi düzenlenebilir hale getirmek için Düzenlemek için Remiks'i tıklayın.
- 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
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.
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.
- Araçlar düğmesini tıklayın.
- Konsol düğmesini tıklayın.
- 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 veContent-Encoding
yanıt başlığıbr
olarak ayarlanır. - MIME türünü belirtmek için
Content-Type
üstbilgisiapplication/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.