Google'ın Deniz Feneri şimdi JavaScript kitaplığı alternatiflerini öneriyor

Deniz feneri kavramını bir metafor olarak kullanan Google Lighthouse, varlık bazında keşfettiği konulara ışık tutarak geliştiricileri kayalardan uzaklaştırıyor. Performans ve güvenlik iyileştirmeleri için özel geri bildirimler içeren raporlar, sıkıştırma ile yeniden boyutlandırmayı, yeni veya farklı önbellek ilkelerini ve kullanılmayan CSS ve/veya JavaScript bloklarını içeren bağlantılı dosyaları kullanabilecek medya referanslarını içerir.

Ancak Eylül ayına kadar Google, JavaScript kitaplıklarını kendileri çağırmıyordu.

JavaScript kitaplıklarının maliyetli olduğu görülüyorsa, bunları daha küçük alternatiflerle değiştirin.

@ChromeDevTools'daki Lighthouse artık paket boyutunu iyileştiren daha küçük kitaplıklar öneriyor. pic.twitter.com/VFe8TFV9Y5

— Addy Osmani (@addyosmani) 12 Eylül 2020

Ve şimdi, uyarılar Sayfa Hızı İstatistiklerinde görünecek şekilde derecelendirildi.

JavaScript hakkında birkaç kelime

Açık kaynaklı JavaScript dünyasında, geliştiriciler, kendilerinden önce gelen geliştiricilerin, özellikle de aksi takdirde yeni bir kütüphane yazarı tarafından çözülmesi gereken bir şeyi çözenlerin omuzlarında durur. Yaygın JavaScript paketleme sistemi NPM (Düğüm Paket Yöneticisi), önceden var olan kitaplıkların projenize dahil edilmesini kolaylaştırır. Başlangıç ​​noktasında, belirli bir JavaScript projesi her zaman, genellikle NPM tarafından .node_modules dizininde depolanan, altında çok daha fazla JavaScript'ten oluşan bir buzdağının görünen kısmıdır.

Özellikle karmaşık bir çerçeve kullanılarak oluşturulan projelerin, büyük ölçüde çok sayıda kitaplık bağımlılığı yoluyla, kendisine sunulan kodun yalnızca küçük bir yüzdesini kullanması mantıklıdır. Bu nedenle, yalnızca belirli bir proje tarafından mümkün olduğunca aktif olarak kullanılanları demetlemek için “ağaç sallama” olarak bilinen bir optimizasyon süreci vardır. Modern sözdizimi ve kodlama kalıplarına ayak uydurmanın hareketli hedefleri nedeniyle ağaç sallama eski kitaplıklarda her zaman iyi çalışmaz.

Çerçeveler Hakkında

Çerçeveler, kitaplık seçimlerinizi yapma, paketleyicileri yapılandırma ve üretim için optimizasyon süreçlerini otomatikleştirmek için komut dosyaları yazma karmaşıklığını ortadan kaldırarak geliştiricilerin hayatını kolaylaştırır. Çoğu belgede bulunan bir "hızlı başlangıç" tarifi ile geliştiriciler, çoğu paketlenmiş çerçevenin bir parçası olarak gelen önceden yazılmış komut satırı yorumlayıcı komut dosyalarını hazırlayabilir ve çalıştırabilir. Bunun bir örneği, bir web uygulamasına daha da geliştirmeniz için boş React uygulama kodunu hazırlayan Create React Uygulamasıdır.

$ npx oluştur-tepki-uygulama uygulamam

Yukarıdaki komutu çalıştırmak bir "uygulamam" dizini oluşturur ve tüm React uygulama dizin ağacını, gerekli tüm dosyalar ve kitaplık bağımlılıklarıyla birlikte bu dizin içine yerleştirir. Birkaç Javascript kitaplığından kod içerebilen üretim paketinizi optimize etmek, modern çerçeve paketlerinin kullanılmayan kod bloklarını ayıklayan ve üretim için çıktıyı en aza indiren araçlara ve adımlara sahip olmasının belki de en önemli nedenidir.

Bir çerçeve kullanmayı seçtiğinizde, belki de tüm ayrıntıları bilmeden, mimarinin zor kararlarını, yapılandırmayı ve bu çerçevenin kitaplık bağımlılıklarını kabul edersiniz. Şu anda NextJS gibi birçok proje ve çerçeve tarafından kullanılan popüler ön uç kitaplığının yapımcılarından React'i üretim için optimize etme kılavuzu.

Bir avuç eski kitaplığın (zamanında oldukça kullanışlıdır) proje paketlerine bağımlılık olarak girmeleri çok yaygındır. JavaScript'in temel olarak böyle bir baş döndürücü hızda ilerlemesi nedeniyle, JavaScript kilometre taşlarından önce yazılan web siteleri, kitaplıklar ve çerçeveler, kullanımdan kaldırılmış kodu kullanırken yaşlarını gösterir. Lighthouse artık projeniz eski ve/veya savunmasız kod içerdiğinde sizi uyarmak için bir işaret görevi görüyor.

MomentJS

Dikkate değer bir kitaplık olan MomentJS (Eylül 2020 itibariyle haftada 12 milyon indirme ile), Lighthouse'un birkaç daha iyi seçeneğe sahip olduğuna dikkat çeken ilk kitaptır. Google'ın buradaki mantığı reddedilemez ve oldukça iyi bilinir. Buna karşılık, Moment'in kendi ana sayfası ve belgeleri artık Lighthouse'un raporlarında verilen tavsiyeyi yansıtıyor. An, yalnızca planlanmış kararlılık güncellemeleriyle donduruldu.

Google'ın mikroskop altında sahip olduğu diğer kütüphaneler Lodash ve muhtemelen Underscore'dur. Birden fazla geliştiricinin bunu açık kaynak topluluğu için "zehirli" veya "zararlı" olarak nitelendirmesiyle, geliştirici topluluğu genelinde bununla ilgili meşru olumsuz duygular dile getirildi. Şikayetler, Google'ın kitaplıkları yeterince bağlam vermeden ve daha küçük ve daha az bilinen kitaplık alternatiflerinin keşfedilmesine zarar verebilecek alternatifleri teşvik etmeden "utandırması" ile ilgilidir.

Bütün bunlar doğru olsa da omlet yapmak için yumurtaları kırmak gerektiği de doğru. İlerleme çoğu zaman bazı insanlara zarar verir. Google, alternatif kitaplık listeleri toplamak için bir üçüncü taraf referansına (BundlePhobia) güvenir. Lighthouse ekibi tarafından belirlenen "denklik için yüksek çıta" ve "geçiş kolaylığı" temelinde seçimleri daha da gözden geçiriyorlar.

Daha az bilinen kütüphane yazarları, kütüphanelerini servise göndererek karışıma girebilirler. Ek olarak, bir geliştirici, Google artık resmi olarak kütüphaneleri önerdiğinden, projeye bağış yaparak açık kaynak finansmanına yardımcı olmaları gerektiğini ve Twitter'daki bir ekip üyesinin 2021'den itibaren bunu yapmaya başlamayı kabul ettiğini belirtti.

Bu gerçekten harika bir fikir. Bu ekiplerin desteğe ihtiyacı olduğuna tamamen katılıyorum. Chrome'un şu anda bu tür çalışmalara sponsorluk için yıllık bir web performansı ve çerçeve fonu vardır. 2021 için bunu genişletmek için OpenCollective ile birlikte çalışıyoruz ve yakında duyurmak için daha fazla fonumuz olacak.

— Addy Osmani (@addyosmani) 12 Eylül 2020

Bunun TechSEO'lar için anlamı nedir?

TechSEO uygulayıcılarının işlerinde mükemmel olmaları için geliştirici olmaları gerekmediği doğrudur. Ayrıca, geliştiricilerin, belki de kodlama hakkında biraz bilgi edinerek ve en azından Google'ın Deniz Feneri'nin ayrıntılarını mümkün olduğunca anlayarak, yaşadıkları mücadeleye ne kadar aşina olursanız, sorunları ve pratik çözümleri geliştiricilere o kadar iyi iletebileceksiniz. .

MomentJS toptan satışını değiştirmek, değiştirilmesi gereken haberlerin alıcısı için süper kolaydan korkutucu derecede karmaşık olabilir. Kendiniz bir geliştirici değilseniz veya en azından modern JavaScript kitaplıkları ve çerçevelerini kullanarak küçük bir web geliştirmeyle uğraşmayı denemediyseniz, Moment gibi bir kitaplığı daha küçük bir alternatif için değiştirmenin ne kadar acı verici olabileceğini bilmek sizin için zor olacaktır. özel proje.

Bu kitaplığın kod tabanına ne kadar entegre edildiğiyle ilgili. Kod kalıplarının bir uygulama boyunca tamamen yeniden yazılması gerekebilir. Uygulama kod tabanı ne kadar büyük ve birbirine bağlıysa, değiştirmeyi gerçekleştirmek o kadar zor olacaktır. Her zaman "Bunun yerine Google'ın kullanmanızı söylediği alternatif kitaplıklardan birini kullanın" demek kadar basit değildir.

Moment'in değiştirilmesi gerektiğini öğrenirken ortaya çıkabilecek göz korkutucu düşüncelerden biri, kütüphanedeki Nesnelerin değiştirilebilir (değiştirilebilir) olarak yazılması gerçeğinden gelir. Bu kalıbı korumak, geriye dönük uyumluluk için gerekli olarak görülüyor ve bu, Moment'i başka bir kitaplıkla değiştirmeyi gerçekten zorlaştırıyor. Bir çağrı zincirinin herhangi bir yerinde Moment kullanılarak atanan değişken değerlerin uygulama kod tabanınız içinde değişmez değerler olarak sayılamayacağı gerçeğini uygulamanızın barındırması için tüm kod bloklarının yazılması gerekebilir.

Daha yeni bir kitaplıktan değişmez Nesnelere dayanan modern bir kalıp daha kararlıdır. Oraya ulaşmak için Moment'in kullanıldığı her örneği yeniden yazmak gerekebilir.

Geliştiriciler için SEO

JavaScript'i bir görev olarak üretim için optimize etmek, kod üzerinde çalışan veya SEO'ya aşina olmayan bir geliştiriciye geri bildirim sağlayan TechSEO'nun tekerlek yuvasında çok fazla yer alır, çünkü geliştiricilerin ilk etapta performans optimizasyonunu anlaması gerekir. Geliştiricilerin bu konuda BundlePhobia, Lighthouse veya SEO hakkında bilgi sahibi olduğu varsayılamaz.

Buraya kadar geldiyseniz ve müşterilerinize daha iyi hizmet verebilmek için kodlama hakkında daha fazla bilgi edinmek istiyorsanız, şanslısınız demektir. Bu yıl, SMX konferans serisine isteğe bağlı bir eklenti olarak Geliştiriciler için SEO Çalıştayı'nı üreteceğiz. Sunulan bilgiler, bir TechSEO uygulayıcısı olarak nerede olursanız olun, toplu yollarımızın bizi kodlamaya götürdüğü yere kadar olan yolculuğunuzu yönlendirmeyi hedefleyecektir. İşlerin ne kadar hızlı ilerlediği göz önüne alındığında, sınır gökyüzü!