瓦伦西亚艺术科学城
歡迎光臨,盈騰SEO顧問-SEO優化教程學習及免費SEO培訓教程

盈騰SEO顧問-SEO優化教程學習及免費SEO培訓教程

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

時間:2018-05-15 06:44來源:未知 作者:admin 點擊:
近日,Google 在 I/O 大會上推出了 Web 數據驅動工具包 Guess.js,詳情請看下文。 Guess.js 是什么? Guess.js 是在 Web 上用于實現數據驅動提升用戶體驗的庫和工具的集合。 Guess.js 主要用于探索以下方面的數據分析驅動在用戶體驗中的應用: 單頁應用程序

近日,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,你應先安裝guess-webpack:
 

npm i guess-webpack --save-dev
 

之后,將以下兩行代碼添加到你的 webpack 配置中:
 

const { GuessPlugin } = require('guess-webpack');

// Add the GuessPlugin in the end of your

// webpack plugin configuration

GuessPlugin({ GA: 'GA_VIEW_ID' })
 

在構建過程中,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 配置免費獲得此功能:

 

new GuessPlugin({

  // GA view ID.

  GA: GAViewID,

  // Hints Guess to not perform pre-fetching and delegate this logic to

  // its consumer.

  runtime: {

    delegate: true,

  },

  // Since Gatsby already has the required metadata for pre-fetching,

  // Guess does not have to collect the routes and the corresponding

  // bundle entry points.

  routeProvider: false,

  // Optional argument. It takes the data for the last year if not

  // specified.

  period: period ? period : undefined,

})

 

下面解釋一下配置對象傳遞給 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,并包含以下格式的單個路徑模塊:

 

export interface RoutingModule {

  // Entry point of the bundle associated with

  // the given route

  modulePath: string;

  // Entry point of the parent bundle

  parentModulePath: string | null;

  path: string;

  lazy: boolean;

}
 

原文鏈接: https://blog.mgechev.com/2018/05/09/introducing-guess-js-data-driven-user-experiences-web/


{本文"Guess.js:Google的數據驅動改進前端體驗的工具庫http://www.asdbp.com/youhua/344.html" 責任編輯:盈騰seo顧問}
頂一下
(0)
0%
踩一下
(0)
0%
------分隔線----------------------------
相關欄目

電話

18515576166

在線客服
瓦伦西亚艺术科学城 pk计划软件免费下载 2018开奖记录开奖结果 内蒙古时时开奖视频 波音bbin真正官网 三肖六码3肖6码中特期期 胜宏国际app买彩票 幸运28猜大小单双技巧 新世纪娱乐点击进入 四川时时直播 麻将怎么打初学规则 最新打鱼棋牌游戏 捕鱼达人2经典版游戏 游戏《森林》手机版 发发棋牌