Webpack优化和捆绑拆分以实现React延迟加载

Question

在我们的组织中，我们创建了一个基于ReactJS的UI框架，以渲染发布到内部NPM存储库中的小部件（用ReactJS编写）。我们使用类似于react-script的构建的自定义webpack配置，以在发布之前最小化小部件。

为了渲染小部件，我们在UI框架代码上安装了npm依赖项，并使用带有延迟加载的react suspense api对代码进行SSR。

虽然上述设置运行良好，但我们看到的小部件尺寸很大，因此考虑将捆绑包分成较小的块，可以同时请求以呈现完整的小部件。我们尝试使用webpack的拆分块插件和AggressiveSplittingPlugin。虽然这两个插件都允许我们将捆绑包分成较小的部分，但是React的Lazy加载似乎现在还不了解如何渲染该小部件。以下是我们webpack配置的基本部分。

entry: [
      isEnvDevelopment &&
        require.resolve('../utils/webpack-hot-dev-client'),
        isEnvStandalone ? paths.appIndexJs : paths.babylonAppIndexJs,
    ].filter(Boolean),
    externals: isEnvStandalone ? standaloneConfig.externals : integratedConfig.externals,
    mode: webpackEnv,
    output: {
      path: paths.appBuild,
      filename: 'app.min.js',
      chunkFilename: '[name].[contenthash].chunk.js',
      publicPath: '/',
      libraryTarget: 'umd',
      umdNamedDefine: true
    },
    plugins: [
      new webpack.optimize.AggressiveSplittingPlugin({
          minSize: 10000,
          maxSize: 150000,
      }),
      new webpack.optimize.AggressiveMergingPlugin({
        minSizeReduce: 2,
        moveToParents: true,
    }),
    ],
    optimization: {
      minimizer: [
        new UglifyJsPlugin({
          cache: true,
          parallel: true,
          uglifyOptions: {
            compress: true,
            ecma: 6,
            mangle: true
          },
          sourceMap: true
        })
      ]
    }

这是我们在测试中用于渲染小部件的代码。

const DynamicLoader = props => {
  const LazyComponent = React.lazy(() =>
    import(`../../node_modules/${props.appName}/dist/app.min.js`).then(app => app)
  );

  const getFIle = () => {
    import(`../../node_modules/${props.appName}/dist/app.min.js`).then(app => console.log(app))
  };

  return (
    <Suspense fallback={<div>Loading...</div>}>
    {getFIle()}
      <LazyComponent
        urlDomain={props.urlDomain}
        userPreferences={props.userPreferences}
      />
    </Suspense>
  );
};

想听听一些有关如何正确执行此操作的建议。有捆绑或延迟加载小部件的正确方法吗？预先感谢。