GuessPlugin

近日内链优化详情请看下文。 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 开发了 GuessPluginwebpack 可以让应用程序加载得更快、更智能。
 

为了在你的 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/