• 主頁
  • 文章
  • SEO
  • Google 的 Lighthouse 現在推薦 JavaScript 庫替代品

Google 的 Lighthouse 現在推薦 JavaScript 庫替代品

已發表: 2021-01-06

使用燈塔的概念作為比喻，谷歌燈塔通過照亮它在逐個資產的基礎上發現的問題來引導開發人員遠離岩石。 通過對性能和安全改進的具體反饋，報告包括對可以使用壓縮調整大小的媒體的引用、新的或不同的緩存策略，以及包含未使用的 CSS 和/或 JavaScript 塊的鏈接文件。

然而，直到 9 月，谷歌自己並沒有調用 JavaScript 庫。

現在，這些警告已逐漸出現在 Page Speed Insights 中。

關於 JavaScript 的一句話

在開源 JavaScript 世界中，開發人員站在他們之前的開發人員的肩膀上，尤其是那些解決了原本必須由新庫作者解決的問題的人。 流行的 JavaScript 打包系統 NPM（節點包管理器）簡化了在項目中包含預先存在的庫。 在起點，給定的 JavaScript 項目總是由下面更多 JavaScript 構成的冰山一角，通常由 NPM 存儲在.node_modules目錄中。

理所當然地，項目，尤其是那些使用複雜框架創建的項目，只會利用其可用代碼的一小部分，主要是通過大量的庫依賴項。 這就是為什麼有一個稱為“搖樹”的優化過程，用於盡可能多地捆綁給定項目正在積極使用的內容。 由於跟上現代語法和編碼模式的不斷變化的目標，Tree Shaking 並不總是適用於較舊的庫。

關於框架

框架通過消除選擇庫、配置捆綁程序和編寫腳本以自動化生產優化過程的複雜性，使開發人員的生活更輕鬆。 借助大多數文檔中的“快速入門”配方，開發人員可以啟動並運行作為大多數打包框架的一部分提供的預先編寫的命令行解釋器腳本。 這方面的一個例子是 Create React App，它構建了空白的 React 應用程序代碼，供您進一步開發成 Web 應用程序。

$ npx create-react-app 我的應用

運行上述命令會創建一個“my-app”目錄並將整個 React 應用程序目錄樹生成到其中，並包含所有必需的文件和庫依賴項。 優化可以包含來自多個 Javascript 庫的代碼的生產包可能是現代框架包具有清除未使用的代碼塊並最小化生產輸出的工具和步驟的最重要原因。

當您選擇使用您接受的框架時，可能不知道所有細節，即該框架的架構、配置和庫依賴項的艱難決策。 這是當前許多項目和框架（例如 NextJS）使用的流行前端庫的製造商為生產優化 React 的指南。

少數較舊的庫（在當時非常有用）已作為依賴項進入項目包中，這太常見了。 在 JavaScript 里程碑之前編寫的網站、庫和框架在使用已棄用的代碼時顯示了它們的時代，因為 JavaScript 從根本上以如此驚人的速度發展。 現在，當您的項目包含舊代碼和/或易受攻擊的代碼時，Lighthouse 可用作警告您的燈塔。

MomentJS

一個著名的庫 MomentJS（截至 2020 年 9 月每週下載量為 1200 萬次）是 Lighthouse 指出的第一個具有更好選擇的庫。 谷歌在這裡的邏輯是無可辯駁的，而且是眾所周知的。 作為回應，Moment 自己的主頁和文檔現在反映了 Lighthouse 報告中提供的建議。 Moment 功能已凍結，僅計劃進行穩定性更新。

谷歌在顯微鏡下擁有的其他庫是 Lodash 和可能的 Underscore。 整個開發者社區對此表達了合理的負面情緒，不止一位開發者稱其對開源社區“有毒”或“有害”。 這些投訴與穀歌“羞辱”圖書館有關，沒有提供足夠的背景信息，也沒有推廣可能損害發現較小和鮮為人知的圖書館替代方案的替代方案。

雖然這一切都是真的，但你必須打破雞蛋才能製作煎蛋捲也是真的。 進步往往會傷害一些人。 Google 依靠第三方參考 (BundlePhobia) 來收集備用庫列表。 他們根據 Lighthouse 團隊確定的“等效性高標準”和“易於遷移”進一步審查選擇。

鮮為人知的圖書館作者可以通過將他們的圖書館提交給該服務來參與其中。 此外，一位開發人員評論說，由於谷歌現在正式推薦圖書館，他們應該通過向項目捐款來幫助資助開源，Twitter 上的一名團隊成員已同意從 2021 年開始這樣做。

這對 TechSEO 意味著什麼

誠然，TechSEO 從業者不必成為開發人員才能出色地完成工作。 確實，您越熟悉開發人員所經歷的掙扎，也許通過學習一點編碼並至少盡可能多地了解 Google 燈塔的細節，您將能夠更好地與開發人員交流問題和實際解決方案.

對於需要更換的新聞的接收者來說，更換 MomentJS 可能非常簡單，也可能極其複雜。 除非您自己是一名開發人員，或者至少嘗試過使用現代 JavaScript 庫和框架進行一些 Web 開發，否則您將很難知道將 Moment 之類的庫換成較小的替代品可能會有多痛苦。特定項目。

它與該庫已集成到代碼庫中的程度有關。 可能必須在整個應用程序中完全重寫代碼模式。 應用程序代碼庫越大、互連程度越高，完成替換就越困難。 這並不總是像說“只需使用 Google 告訴您使用的備用庫之一”那麼簡單。

學習一個必須替換 Moment 時可能出現的令人生畏的想法之一來自於庫中的對像被編寫為可變（可變）的事實。 保持這種模式被認為是向後兼容所必需的，這確實使用另一個庫替換 Moment 變得複雜。 可能需要編寫整個代碼塊，以便您的應用程序適應這樣一個事實，即在調用鏈中的某處使用 Moment 分配的變量值不能被視為應用程序代碼庫中的不可變值。

依賴於來自較新庫的不可變對象的現代模式更加穩定。 要到達那裡，可能需要對使用 Moment 的每個實例進行大量重寫。

開發人員的 SEO

為生產優化 JavaScript 作為一項任務在 TechSEO 的代碼工作中非常重要，或者向可能不熟悉 SEO 的開發人員提供反饋，因為開發人員首先應該了解性能優化。 不能假定開發人員知道 BundlePhobia、Lighthouse 或 SEO。

如果您做到了這一點，並希望了解更多有關編碼的信息，以便為您的客戶提供更好的服務，那麼您很幸運。 今年，我們將為開發人員研討會製作 SEO，作為 SMX 會議系列的可選附件。 所提供的信息將旨在指導您從作為 TechSEO 從業者的任何地方到我們的集體路徑引導我們進入編碼的任何地方的旅程。 考慮到事情進展得有多快，天空是極限！