Guess.js：Google的數據驅動改進前端體驗的工具庫

近日，Google 在 I/O 大會上推出了 Web 數據驅動工具包 Guess.js，詳情請看下文。

Guess.js 是什麼？

Guess.js 是在 Web 上用於實現數據驅動提升用戶體驗的庫和工具的集合。

Guess.js 主要用於探索以下方面的數據分析驅動在用戶體驗中的應用：

單頁應用程序

基於框架的靜態網站

靜態內容網站

企業網站

下面是在 Google I / O 2018 上由 Addy Osmani 和 Ewa Gasperowicz 發布的 Guess.js 官方聲明：

https://www.youtube.com/watch?v=Mv-l3-tJgGk

讓我們來介紹一下上文提到的三個方面：

單頁應用程序

Guess.js 對 SPA 的支持仍處於 alpha 版本，可以使用以下技術進行測試：

Angular 項目使用 Angular CLI 或額外配置進行自定義布局；

React 項目使用 create-react-app 或額外配置進行自定義布局。由於創建多路徑 React 應用程序的機制分散，目前，Guess.js 僅支持 JSX 或使用受限語法進行路徑定義的 TSX。

Guess.js 的目標是最大限度地減少 bundle 布局配置，實現數據驅動，並使之更加準確。你應該延遲載入你所有的路徑，Guess.js 會找出哪些 bundle 可以結合在一起，使用什麼預取機制（pre-fetching mechanism），而且這些動作都能在 5 分鐘內完成。

為了幫助每個人將數據驅動應用在工具上，我們為 webpack 開發了 GuessPlugin，webpack 可以讓應用程序載入得更快、更智能。

為了在你的 Angular CLI 或 Create React App 項目中使用數據驅動 pre-fetching，你應先安裝：

之後，將以下兩行代碼添加到你的 webpack 配置中：

在構建過程中，GuessPlugin 從 Google Analytics 提取報告，為 pre-fetching 構建一個模型，並為應用程序的 main bundle 添加一個 runtime。

路徑更改時，runtime 將查詢生成的模型，以查找下一個可能訪問的頁面，並預取與它們關聯的 JavaScript bundles。

預取多少頁面取決於用戶的網路速度。由於 2G 網路較慢，與 LTE 相比，預取的 bundles 會少得多。

GuessPlugin 主要使用的模塊有：

guess-ga - 從 Google Analytics 獲取結構化數據。

guess-parser - 解析應用程序以創建路徑和 JavaScript bundles 之間的映射。

guess-webpack - webpack 插件，可以自動執行在 React＆Angular 應用程序中應用數據驅動 bundling 和 pre-fetching 的過程。

Guess.js 模塊提供了簡化的 API，旨在最大程度地減少配置。

注意

該工具仍處於 Alpha 階段，你可以在 GitHub 上提出你的建議。

另外，請注意以下幾點：

你需要 eject 你的應用程序，才能在 Angular CLI 和 Create React App 中編輯 webpack 配置文件。

如果你使用 Angular CLI v6，則可能需要降級到 v1.7，因為目前 Angular CLI 不支持 ejection。

基於框架的靜態網站

靜態網站生成器 Gatsby 使用智能預取策略，它考慮到當前頁面上的所有本地鏈接，並基於視圖中的可見性預取相關的內容。

這種方法非常強大，它通常能提供即時用戶體驗。為了減少過度取用，改進當前演算法的下一步是查看數據並且僅考慮最有可能被訪問的鏈接！

在上面的圖片中，用顏色強調的內容表示視圖中所有的可見鏈接，並按照用戶訪問他們的概率標了不同的顏色：

紅色：高概率

紫色：中等概率

藍色：低概率

通過考慮用戶訪問鏈接的可能性，Gatsby 的 Guess 插件可以減少預取操作的數量，這可以極大地降低設備移動數據的帶寬消耗。

靜態內容網站

我們使用客戶端伺服器體系結構預測靜態站點的預取。後端從 Google Analytics 獲取報告並構建一個模型，之後可以使用該模型來確定下一個可能訪問的頁面。

在導航時，客戶端組件向伺服器詢問哪些是最可能訪問頁面的 URL，並預取它們。

較低級別的 API

插件或庫的維護者還可以使用 Guess.js 提供的較低級別的 API 添加數據驅動的預測功能。

目前，gatsby-plugin-guess-js 在 webpack 中使用 GuessPluginfor 是為了能夠在運行時查詢哪些鏈接可能會在下一次被訪問。如果你有類似的要求，你可以通過以下 GuessPlugin 配置免費獲得此功能：

下面解釋一下配置對象傳遞給 GuessPlugin 的各個屬性：

GA - Google Analytics 的視圖 ID

runtime- GuessPlugin 的 runtime 配置。在這種情況下，delegate 屬性意味著 Guess.js 將不處理路徑更改

routeProvider - 路徑提供者負責在 Google Analytics 報告和應用程序的 JavaScript bundles 頁面之間建立真實映射的模塊。由於 Gatsby 已經擁有這些信息了，因此提供者可以不用再提供。

period - Google Analytics 提取報告的時間段。

請記住，建立應用程序的 JavaScript bundles 與 Google Analytics 報告中的各個網址之間的映射是整個流程中最脆弱的部分。這主要是由於各個框架中的路徑定義語法高度碎片化。

如果你正在開發一個插件，並且你已經有了 bundle 到 URL 的映射，你可以設置 routeProviderto false 或者自定義可直接返回數組的 routeProvider，並包含以下格式的單個路徑模塊：

喜歡這篇文章嗎？立刻分享出去讓更多人知道吧！