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

Houssein Djirdeh

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'de JavaScript kodu küçültme ve sıkıştırma aşağıdaki uygulama için paket, uygulamanın istek boyutunu belirtir.

Ölçüm

Not: Bu uygulamada webpack kullanıldığından, kodda yapılan değişiklikler yeni bir derlemeyi 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.

• Siteyi önizlemek için Uygulamayı Görüntüle'ye basın. Ardından, Tam ekran .

Bu uygulama, "Kullanılmayan uygulamaları kaldırma ' codelab'i kullanarak favoriniz için oyunuzu kedi yavrusu. 🐈

Şimdi bu uygulamanın ne kadar büyük olduğuna bakalım:

1. Geliştirici Araçları'nı açmak için "Control+Üst Karakter+J" (veya Mac'te "Command+Option+J") tuşlarına basın.
2. Ağ sekmesini tıklayın.
3. Önbelleği devre dışı bırak onay kutusunu seçin.
4. Uygulamayı yeniden yükleyin.

"Kullanılmayan kodları kaldırma" konusunda epey ilerleme kaydedilmiş olsa da codelab'i kullanarak bu paket boyutunu küçültün. 225 KB hâlâ oldukça büyüktür.

Küçültme

Aşağıdaki kod bloğunu ele alalım.

function soNice() {
  let counter = 0;

  while (counter < 100) {
    console.log('nice');
    counter++;
  }
}

Bu işlev kendi dosyasına kaydedilirse, dosya boyutu yaklaşık 112 B (bayt).

Tüm boşluklar kaldırılırsa elde edilen kod aşağıdaki gibi görünür:

function soNice(){let counter=0;while(counter<100){console.log("nice");counter++;}}

Şimdi dosya boyutu 83 B civarında olur. Resim küçültülerek daha da bozulursa ve bazı ifadeleri değiştirdiğinizde nihai kod, sonuç şöyle görünür:

function soNice(){for(let i=0;i<100;)console.log("nice"),i++}

Dosya boyutu artık 62 B'ye ulaşıyor.

Her adımla birlikte kodun okunması zorlaşıyor. Ancak tarayıcının JavaScript motoru bunların her birini tam olarak aynı şekilde yorumlar. İlgili içeriği oluşturmak için kullanılan kodu karartmanın faydası, daha küçük boyutlu dosya seçin. 112 B, başlangıçta pek bir şey değildi ancak yine de %50 küçültüldü!

Bu uygulamada webpack 4.0 sürümü modül paketleyicidir. İlgili sürümü package.json sayfasında görebilirsiniz.

"devDependencies": {
  //...
  "webpack": "^4.16.4",
  //...
}

Sürüm 4, üretim modunda paketi varsayılan olarak küçültmektedir. Google TerserWebpackPlugin Terser için bir eklentidir. Terser, JavaScript kodunu sıkıştırmak için kullanılan popüler bir araçtır.

Küçültülmüş kodun nasıl göründüğü hakkında fikir edinmek için devam edin ve Geliştirici Araçları Ağ panelindeyken main.bundle.js. Şimdi Yanıt sekmesi.

Son hali olan kod küçültülmüş ve karıştırılmış, yanıt gövdesinde gösterilir. Paketin küçültülmemiş olması durumunda ne kadar büyük olabileceğini öğrenmek için webpack.config.js ve mode yapılandırmasını güncelleyin.

module.exports = {
  mode: 'production',
  mode: 'none',
  //...

Uygulamayı yeniden yükleyin ve şuradan paket boyutuna tekrar göz atın: Geliştirici Araçları Ağ paneli

Bu oldukça büyük bir fark. 😅

Devam etmeden önce buradaki değişiklikleri geri aldığınızdan emin olun.

module.exports = {
  mode: 'production',
  mode: 'none',
  //...

Uygulamanıza kodu küçültme işlemi eklemek, kullandığınız araçlara bağlıdır kullanın:

• Web paketi v4 veya üzeri bir sürüm kullanılıyorsa ek işlem yapılması gerekmez Çünkü kod, üretim modunda varsayılan olarak küçültülmüştür. 👍
• Web paketinin daha eski bir sürümü kullanılıyorsa TerserWebpackPlugin uygulamasını yükleyin ve ekleyin web paketi oluşturma sürecine dahil eder. Belgeler ayrıntılı bir şekilde açıklıyor.
• Başka küçültme eklentileri de mevcuttur ve bunlar yerine kullanılabilir. BabelMinifyWebpackPlugin gibi ve ClosureCompilerPlugin.
• Bir modül paketleyici hiç kullanmıyorsanız Terser'ı kullanın CLI aracı olarak kullanabilir veya doğrudan bir bağımlılık olarak dahil edebilirsiniz.

Sıkıştırma

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. Bu, sunucunuzu bu eğiticinin sıkıştırma bölümünde yaptığınız gibi ayarlamanız gerekmeyeceği anlamına gelir. Sıkıştırma işleminin nasıl çalıştığını öğrenmek istiyorsanız bu makaleyi okumaya devam edebilirsiniz.

"Sıkıştırma" terimi, bazen kodun nasıl çalıştığını açıklamak için küçültme işlemi sırasında küçültülürse, aslında tam anlamıyla kastediyorum.

Sıkıştırma genellikle bir veri kullanılarak değiştirilmiş kod anlamına gelir algoritmasını kullanabilirsiniz. Sadeleştirmeden farklı olarak mükemmel sonuç veren Sıkıştırılmış kodun kullanılmadan önce sıkıştırması gerekir.

Her HTTP isteği ve yanıtıyla tarayıcılar ve web sunucuları, dahil edilecek başlıklar getirilmekte veya alınan öğe hakkında ek bilgiler sağlar. Bu özellik, Geliştirici Araçları Ağı panelindeki Headers sekmesinde, üç tür şunlar gösterilir:

• Genel, istek-yanıtın tamamıyla alakalı genel başlıkları temsil eder bahsedeceğim.
• Yanıt Başlıkları, gerçek yanıta özgü üstbilgilerin listesini gösterir sunucudan kaldıracak.
• İstek Başlıkları, gerekir.

Request Headers içindeki accept-encoding başlığına göz atın.

accept-encoding, tarayıcı tarafından hangi içeriği belirtmek için kullanılır? veya sıkıştırma algoritmaları gibi yazılımlar içerebilir. Pek çok algoritmaları vardır ancak bunlardan yalnızca üç tanesi HTTP ağ isteklerinin sıkıştırılması (ve sıkıştırılmış) için burada desteklenir:

• Gzip (gzip): En yaygın kullanılan sıkıştırma reklam biçimleridir. Daha iyi bir destek deneyimi için algoritmasından yararlanır ve tüm mevcut tarayıcılarda desteklenir.
• Söndür (deflate): Yaygın olarak kullanılmaz.
• Brotli (br): Daha yeni bir sıkıştırma bir algoritma çalıştırıyor. Bu da sıkıştırma oranlarını daha da iyileştiriyor. Bu da çok daha hızlı yüklenir. Desteklendiği içerik çoğu tarayıcının en son sürümlerine göz atın.

Bu eğitimdeki örnek uygulama, şurada tamamlanan uygulamayla aynıdır: "Kullanılmayan kodu kaldırın" codelab'i, Ekspres artık bir sunucu çerçevesi olarak kullanılıyor. Sonraki hem statik hem de dinamik sıkıştırma incelenir.

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 daha yüksek düzeylerde dosyaları sıkıştırma daha uzun sürer. 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.

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);
});

Ş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/ dizini (ve bu dosyalar her derlemede webpack tarafından oluşturulur).

Tüm öğelerin her istendiğinde sıkıştırıldığından emin olmak için sıkıştırma ara katman yazılımı kitaplığı emin olmanız gerekir. package.json hesabına devDependency olarak ekleyerek başlayın:

"devDependencies": {
  //...
  "compression": "^1.7.3"
},

Ardından, dosyayı server.js sunucu dosyasına aktarın:

const express = require('express');
const compression = require('compression');

express.static eklenmeden önce bunu bir ara katman yazılımı olarak ekleyin:

//...

const app = express();

app.use(compression());

app.use(express.static('public'));

//...

Şimdi uygulamayı yeniden yükleyin ve Ağ panelindeki paket boyutuna bakın.

225 KB'tan 61,6 KB'ye! Response Headers içinde content-encoding üstbilgisi, sunucunun gzip ile kodlanmış olan bu dosyayı gönderdiğini gösterir.

Statik sıkıştırma

Statik sıkıştırmanın arkasındaki fikir, öğelerin sıkıştırılması ve kaydedilmesidir. gerekir.

Artıları

• Yüksek sıkıştırma seviyeleri nedeniyle yaşanan gecikme artık sorun değil. O anda doğrudan getirilebildiğinden dosyaları sıkıştırmak için herhangi bir işlem yapılması gerekmez.

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. CompressionPlugin bunun için kullanılabilir.

package.json hesabına devDependency olarak ekleyerek başlayın:

"devDependencies": {
  //...
  "compression-webpack-plugin": "^1.1.11"
},

Diğer web paketi eklentilerinde olduğu gibi onu da yapılandırma dosyasına içe aktarın, webpack.config.js:.

const path = require("path");

//...

const CompressionPlugin = require("compression-webpack-plugin");

Ve bunu plugins dizisine ekleyin:

module.exports = {
  //...
  plugins: [
    //...
    new CompressionPlugin()
  ]
}

Varsayılan olarak eklenti, derleme dosyalarını gzip kullanarak sıkıştırır. Bir göz atın belgelere farklı bir algoritma kullanma veya dahil etme/hariç tutma seçeneklerinin nasıl ekleneceğini öğrenmek için dosyalar olabilir.

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 Düğüm sunucusu tarafından sunulan son public/ dizini.

Not: git.ignore dosyası, public/ dizinini içerir. Derleme dosyaları içeren dizinler genellikle buraya eklenir. Glitch, bu dosyaları düzenleyici ağacında da gizler.

• Araçlar düğmesini tıklayın.
• Konsol düğmesini tıklayın.
• 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

Paketin gzip ile sıkıştırılmış sürümü (main.bundle.js.gz) artık buraya olur. CompressionPlugin, varsayılan olarak index.html öğesini de sıkıştırır.

Yapılması gereken bir sonraki şey, sunucuya bu sıkıştırılmış dosyaları dosyalarını her zaman kendi JS sürümleriyle birlikte göndermeniz gerekir. Bu işlem, dosyalarserver.js express.static.

const express = require('express');
const app = express();

app.get('*.js', (req, res, next) => {
  req.url = req.url + '.gz';
  res.set('Content-Encoding', 'gzip');
  next();
});

app.use(express.static('public'));

//...

app.get, sunucuya bir 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 .gz eklenir. Content-Encoding yanıt başlığı gzip olarak ayarlandı.
• Son olarak, next(), dizinin herhangi bir geri çağırmaya devam etmesini sağlar. sonraki aşamaya geçelim.

Uygulama yeniden yüklendikten sonra Network paneline tekrar bakın.

Daha önce olduğu gibi paket boyutu önemli ölçüde küçülecek.

Sonuç

Bu codelab'de, kaynak kodu küçültme ve sıkıştırma süreci ele alınmıştır. Bu tekniklerin ikisi de çoğu araçta varsayılan o yüzden araç zincirinizin bu yeni model destekleri olup olmadığını veya her iki süreci de kendiniz uygulamaya başlamanız gerektiğini ifade eder.