使用分块对 React s-s-r 应用程序进行 A/B 测试

Posted 2023-02-22

【中文标题】使用分块对 React s-s-r 应用程序进行 A/B 测试

【英文标题】：A/B testing for React s-s-r app with chunking

【发布时间】：2019-10-11 19:18:14

【问题描述】：

版本：

webpack: 4.30.0,
react: 16.8.6,
react-loadable: 5.5.0,

我在 webpack 中有一个条目 JS。其他块目前使用react-loadable 创建，供应商 JS 使用 splitChunks 创建。

我的应用想法： s-s-r 和分块与react-loadable 一起用于路由级组件。并且 dynamic-components 块可以使用 webpack 的 import promise 或 react Loadable 来制作。

---

现在，我想向这些动态组件介绍 A/B 测试。

我有两种方法：

第一种方法：在 if-else 中包装动态导入语句以导入该动态组件的 A/B 变体。在服务器级别，我知道对于给定的用户，我会在 Redux 存储中设置一个标志，以便选择 A/B 变体。 （无论app是s-s-r还是SPA都可以采用这种方式。）

此方法的注意事项：

一个。似乎可行：P

b.不能很容易地扩展到 A/B/C。在这种情况下，我必须引入第三个 else 条件来动态导入 C 变体。由于文件名中的散列已更改，它将破坏路由级组件块（包含这些变体）的浏览器缓存。所有路由级组件也会发生同样的情况，这些组件会因添加额外的 C 测试而生效。

c。必须用 if 条件不必要地污染代码。如果 A/B 测试完成，那么代码将不得不再次修改，这会再次破坏浏览器缓存。

第二种方法：我将在代码中只有 1 个动态导入，但我想要相同组件 A、B 和 C 的 3 个不同块，例如 A/some_chunk[hash].js、B/some_chunk[hash].js 和 @987654326 @。在服务器级别，我将使用与方法 1 中相同的逻辑对用户进行 A/B/C 测试，但不是在 redux 存储中设置标志，**我将从 A、B 或 C 提供 some_chunk[hash].js根据用户的细分文件夹。

此方法的注意事项：

一个。我需要问一下我们如何为动态组件创建块而不将它们实际导入文件中。

b.可以非常轻松地扩展 A/B/C 测试，因为现在 A/B 测试取决于正在服务的文件服务器的变体。

c。客户端代码中的 if-else 条件不会污染代码。没有浏览器缓存破坏的问题。

d。 ReactDOMServer.renderToString 的服务器代码需要单独的包装器组件，以了解为服务器端渲染选择哪个变体。

问题：

那么，我需要知道如何按照第二种方法创建块？因为如果无法访问（即没有被任何其他文件导入），webpack 会忽略为文件创建块

您会推荐这种方法吗？进行 AB 测试的正确 micro FE 应用方法是什么？

PS：

如果这是可行的，那么我的路线图也会为基本布局分块。在哪里可以避免代码中的 if-else 条件，并且可以根据 A/B 变体服务器发送到浏览器的方式更改整个布局。

【参考方案1】：

这可以使用webpack's weak resolve来完成

来自 webpack 文档的示例：

const page = 'Foo'; // Trick: Can be taken from props
__webpack_modules__[require.resolveWeak(`./page/$page`)];

我的用例：

假设，我们正在对具有变体 D1、D2 和 D3 的组件 D 进行 A/B 测试。

我们可以在此文件夹内创建带有D1.js D2.js and D3.js 变体的文件夹D/。现在，require.resolveWeak('./D/$variation') 将在构建文件夹中为 D1、D2 和 D3 打包块。现在，在运行时，传递 props 以选择特定的变体将动态加载该 JS。

注意： 例如：要选择 D2 变体，实验名称也必须是 D2（否则您必须存储实验名称到组件名称的映射）才能作为道具传递。通常，人们只通过多个 if-else 进行 A/B 测试。因此，在loadVariationOfD.js 中，if-else 与dynamic imports 一起使用，而不是weak resolve import statement（我为此使用loadable-components）。