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
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:
- Geliştirici Araçları'nı açmak için "Control+Üst Karakter+J" (veya Mac'te "Command+Option+J") tuşlarına basın.
- Ağ sekmesini tıklayın.
- Önbelleği devre dışı bırak onay kutusunu seçin.
- 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
"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.
- 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.