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

Question

版本:

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

我在 webpack 中有一个 JS 条目。其他 block 当前使用 react-loadable 创建， vendor JS 使用 splitChunks 创建。

我的应用程序的想法:SSR 和分块正在与 react-loadable 一起用于路由级组件。并且动态组件 block 可以使用webpack的导入 promise 或react Loadable来制作。

<小时/>

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

我有两种方法:

1. 第一种方法:将动态导入语句包含在 if-else 内以导入该动态组件的 A/B 变体。在服务器级别，我知道对于给定用户，我会在 Redux 存储中设置一个标志，以便选择 A/B 变体。(无论app是SSR还是SPA都可以遵循这个方法。)

   此方法的注意事项:

   a.似乎可行:P

   b.无法轻松扩展 A/B/C。在这种情况下，我必须引入第三个 else 条件来动态导入 C 变体。由于文件名中的哈希值发生了更改，它将破坏浏览器对路由级组件 block (包含这些变体)的缓存。对于添加额外的 C 测试生效的所有路由级组件也会发生同样的情况。

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

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

   此方法的注意事项:

   a.我需要问我们如何为动态组件创建 block 而不将它们实际导入到文件中。

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

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

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

问题:

1. 那么，我需要知道如何根据第二种方法创建 block ？因为如果无法访问(即未由任何其他文件导入)，webpack 将忽略为文件创建 block

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

PS:

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

Answer 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 测试。

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

注意: 例如:要选择 D2 变体，实验名称也必须是 D2 (否则您必须存储实验名称到组件名称的映射)以作为 Prop 传递。一般来说，人们只是通过多个 if-else 来进行 A/B 测试。所以，在 loadVariationOfD.js ，而不是 weak resolve import statement , if-else与 dynamic imports 一起使用(我为此使用 loadable-components)。