Оптимизация веб-пакетов и расщепление пакетов для ленивой загрузки React

Question

В нашей организации мы создали инфраструктуру пользовательского интерфейса на основе ReactJS для рендеринга виджетов (написанных в ReactJS), опубликованных в нашем внутреннем репозитории NPM.Для минимизации виджета перед публикацией мы используем настраиваемую конфигурацию веб-пакета, аналогичную сборке реагирующего сценария.

Чтобы визуализировать виджеты, мы устанавливаем зависимость npm от кода инфраструктуры пользовательского интерфейса и используем реагирующий API-интерфейс с отложенной загрузкой в ​​SSR-код.

Пока вышеприведенная установка работает хорошо, мымы видели виджеты довольно большого размера, поэтому думали о разбиении пакета на более мелкие куски, которые могут быть запрошены одновременно для отображения всего виджета.Мы попытались использовать плагин расколотых блоков веб-пакета и AggressiveSplittingPlugin.В то время как оба этих плагина позволили нам разбить пакет на более мелкие части, загрузка Lazy в React, похоже, не понимает, как визуализировать виджет сейчас.Ниже приведена основная часть нашей конфигурации веб-пакета.

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>
  );
};

Хотелось бы услышать несколько советов о том, какделай это правильно.Есть ли правильный способ связать сплит или ленивую загрузку виджета?Заранее спасибо.