Mercusuar Google sekarang merekomendasikan alternatif perpustakaan JavaScript

Menggunakan gagasan mercusuar sebagai metafora, Google Lighthouse mengarahkan pengembang menjauh dari batu dengan menyoroti masalah yang ditemukannya berdasarkan aset demi aset. Dengan umpan balik khusus untuk peningkatan kinerja dan keamanan, laporan menyertakan referensi ke media yang dapat menggunakan pengubahan ukuran dengan kompresi, kebijakan cache baru atau berbeda, dan file tertaut yang berisi blok CSS dan/atau JavaScript yang tidak digunakan.

Sampai September, bagaimanapun, Google tidak memanggil perpustakaan JavaScript sendiri.

Jika pustaka JavaScript terbukti mahal, ganti dengan alternatif yang lebih kecil.

Lighthouse di @ChromeDevTools sekarang merekomendasikan pustaka yang lebih kecil yang meningkatkan ukuran bundel. pic.twitter.com/VFe8TFV9Y5

— Addy Osmani (@addyosmani) 12 September 2020

Dan sekarang, peringatan telah lulus untuk muncul di Wawasan Kecepatan Halaman.

Sepatah kata tentang JavaScript

Di dunia JavaScript open-source, pengembang berdiri di atas bahu pengembang yang datang sebelum mereka, terutama mereka yang memecahkan sesuatu yang jika tidak harus diselesaikan oleh penulis perpustakaan baru. Sistem pengemasan JavaScript yang lazim NPM (Node Package Manager) memudahkan penyertaan pustaka yang sudah ada sebelumnya dalam proyek Anda. Pada titik awal, proyek JavaScript yang diberikan selalu merupakan puncak gunung es yang terbuat dari lebih banyak JavaScript di bawahnya, biasanya disimpan oleh NPM di direktori .node_modules .

Masuk akal bahwa proyek, terutama yang dibuat menggunakan kerangka kerja yang canggih, hanya akan menggunakan sebagian kecil dari kode yang tersedia untuknya, sebagian besar melalui banyak dependensi perpustakaan. Itulah mengapa ada proses pengoptimalan yang dikenal sebagai "pengguncangan pohon" untuk menggabungkan hanya apa yang secara aktif digunakan oleh proyek tertentu sebanyak mungkin. Pengocokan pohon tidak selalu bekerja dengan baik dengan pustaka lama karena tiang gawang yang bergerak mengikuti sintaks modern dan pola pengkodean.

Tentang Kerangka

Kerangka kerja membuat hidup lebih mudah bagi pengembang dengan menghilangkan kerumitan membuat pilihan perpustakaan Anda, mengonfigurasi bundler, dan menulis skrip untuk mengotomatiskan proses pengoptimalan untuk produksi. Dengan resep "mulai cepat" yang ditemukan di sebagian besar dokumentasi, pengembang dapat memulai dan menjalankan skrip penerjemah baris perintah yang telah ditulis sebelumnya yang datang sebagai bagian dari sebagian besar kerangka kerja yang dikemas. Contohnya adalah Create React App yang membuat kode aplikasi React kosong siap untuk Anda kembangkan lebih lanjut menjadi aplikasi web.

$ npx buat-bereaksi-aplikasi aplikasi saya

Menjalankan perintah di atas akan membuat direktori "aplikasi-saya" dan memunculkan seluruh pohon direktori aplikasi React ke dalamnya, lengkap dengan semua file yang diperlukan dan dependensi pustaka. Mengoptimalkan bundel produksi Anda, yang dapat berisi kode dari beberapa pustaka Javascript, mungkin merupakan alasan terpenting mengapa paket kerangka kerja modern memiliki alat dan langkah yang menyingkirkan blok kode yang tidak digunakan dan meminimalkan keluaran untuk produksi.

Ketika Anda memilih untuk menggunakan kerangka kerja yang Anda terima, mungkin tanpa mengetahui semua detail, keputusan sulit dari arsitektur, konfigurasi, dan dependensi perpustakaan kerangka kerja itu. Berikut adalah panduan untuk mengoptimalkan React untuk produksi dari pembuat perpustakaan frontend populer yang saat ini digunakan oleh banyak proyek dan kerangka kerja seperti NextJS.

Terlalu umum bahwa beberapa perpustakaan lama (sangat berguna pada zamannya) telah menemukan jalan mereka ke dalam bundel proyek sebagai dependensi. Situs web, pustaka, dan kerangka kerja yang dibuat sebelum pencapaian JavaScript menunjukkan usia mereka saat menggunakan kode yang tidak digunakan lagi karena JavaScript secara fundamental berkembang dengan kecepatan yang sangat tinggi. Mercusuar sekarang berfungsi sebagai suar untuk memperingatkan Anda ketika proyek Anda menyertakan kode lama dan atau rentan.

MomentJS

Pustaka terkemuka, MomentJS (dengan 12 juta unduhan per minggu per September 2020), adalah yang pertama ditunjukkan oleh Lighthouse karena memiliki beberapa opsi yang lebih baik. Logika Google di sini tidak terbantahkan dan cukup terkenal. Sebagai tanggapan, beranda dan dokumentasi Moment sendiri sekarang mencerminkan saran yang diberikan dalam pelaporan Lighthouse. Momen dibekukan fitur, dengan hanya pembaruan stabilitas yang direncanakan.

Perpustakaan lain yang dimiliki Google di bawah mikroskop adalah Lodash dan mungkin Underscore. Ada perasaan negatif yang sah yang diungkapkan tentang hal ini di seluruh komunitas pengembang, dengan lebih dari satu pengembang menyebutnya "beracun" atau "berbahaya" bagi komunitas sumber terbuka. Keluhan berkaitan dengan perpustakaan "mempermalukan" Google tanpa memberikan konteks yang cukup dan mempromosikan alternatif yang dapat membahayakan penemuan alternatif perpustakaan yang lebih kecil dan kurang dikenal.

Meskipun semua itu benar, juga benar bahwa Anda harus memecahkan telur untuk membuat telur dadar. Kemajuan sering akan menyakiti beberapa orang. Google mengandalkan referensi pihak ketiga (BundlePhobia) untuk mengumpulkan daftar pustaka alternatif. Mereka selanjutnya memeriksa pilihan berdasarkan "standar tinggi untuk kesetaraan" dan "kemudahan migrasi" sebagaimana ditentukan oleh tim Lighthouse.

Penulis perpustakaan yang kurang dikenal dapat bergabung dengan mengirimkan perpustakaan mereka ke layanan tersebut. Selain itu, seorang pengembang berkomentar bahwa karena Google sekarang secara resmi merekomendasikan perpustakaan, mereka harus membantu membiayai sumber terbuka dengan menyumbang ke proyek dan anggota tim di Twitter telah setuju untuk mulai melakukan ini mulai tahun 2021.

Ini adalah ide yang sangat bagus. Sepenuhnya setuju bahwa tim-tim ini membutuhkan dukungan. Chrome saat ini memiliki kinerja web tahunan dan dana kerangka kerja untuk mensponsori pekerjaan seperti ini. Kami telah bekerja dengan OpenCollective untuk memperluas ini untuk tahun 2021 dan akan memiliki lebih banyak dana untuk diumumkan segera.

— Addy Osmani (@addyosmani) 12 September 2020

Apa artinya ini bagi TechSEO

Memang benar bahwa praktisi TechSEO tidak harus menjadi pengembang untuk menjadi hebat dalam pekerjaan mereka. Juga benar bahwa semakin akrab Anda dengan perjuangan yang dialami pengembang, mungkin dengan belajar sedikit tentang pengkodean dan setidaknya memahami detail Mercusuar Google sebanyak mungkin, semakin baik Anda akan dapat mengomunikasikan masalah dan solusi praktis kepada pengembang .

Mengganti grosir MomentJS bisa di mana saja dari yang sangat mudah, hingga yang sangat rumit bagi penerima berita yang perlu diganti. Kecuali jika Anda sendiri adalah seorang pengembang, atau setidaknya telah mencoba mencoba sedikit pengembangan web menggunakan pustaka dan kerangka kerja JavaScript modern, akan sulit bagi Anda untuk mengetahui betapa menyakitkan mengganti pustaka seperti Moment untuk alternatif yang lebih kecil mungkin untuk sebuah proyek tertentu.

Ini ada hubungannya dengan seberapa banyak perpustakaan itu telah diintegrasikan ke dalam basis kode. Pola kode mungkin harus sepenuhnya ditulis ulang di seluruh aplikasi. Semakin besar dan semakin saling berhubungan basis kode aplikasi, semakin sulit untuk menyelesaikan penggantian. Ini tidak selalu sesederhana mengatakan "Gunakan saja salah satu perpustakaan alternatif yang Google suruh Anda gunakan sebagai gantinya."

Salah satu pemikiran menakutkan yang dapat terjadi ketika belajar seseorang harus mengganti Momen berasal dari kenyataan bahwa Objek di perpustakaan ditulis untuk dapat berubah (berubah). Menjaga pola ini dipandang perlu untuk kompatibilitas mundur dan ini benar-benar menyulitkan penggantian Momen dengan perpustakaan lain. Seluruh blok kode mungkin perlu ditulis agar aplikasi Anda mengakomodasi fakta bahwa nilai variabel yang ditetapkan menggunakan Momen di suatu tempat dalam rantai panggilan tidak dapat dihitung sebagai nilai yang tidak dapat diubah di dalam basis kode aplikasi Anda.

Pola modern yang bergantung pada Objek yang tidak dapat diubah dari perpustakaan yang lebih baru lebih stabil. Untuk sampai ke sana dapat memerlukan banyak penulisan ulang setiap contoh di mana Momen digunakan.

SEO untuk Pengembang

Mengoptimalkan JavaScript untuk produksi sebagai tugas sangat banyak di ruang kemudi TechSEO yang mengerjakan kode, atau memberikan umpan balik kepada pengembang yang mungkin tidak terbiasa dengan SEO, karena pengembang harus memahami pengoptimalan kinerja sejak awal. Tidak dapat dianggap bahwa pengembang tahu tentang BundlePhobia, Lighthouse, atau SEO dalam hal ini.

Jika Anda berhasil sejauh ini dan ingin tahu lebih banyak tentang pengkodean untuk memberikan layanan yang lebih baik kepada klien Anda, maka Anda beruntung. Tahun ini, kami akan memproduksi Lokakarya SEO untuk Pengembang sebagai tambahan opsional untuk seri konferensi SMX. Informasi yang disajikan akan ditargetkan untuk memandu perjalanan Anda dari mana pun Anda berada sebagai praktisi TechSEO, ke mana pun jalur kolektif kami membawa kami ke pengkodean. Mengingat seberapa cepat segala sesuatunya berkembang, langit adalah batasnya!