基本上它归结为预先创建您将需要的所有块。然后你只需要一种动态引用它们的方法。这是我基于我的解决方案：

http://henleyedition.com/implicit-code-splitting-with-react-router-and-webpack

这就是我所做的，因为我不使用 React Router（旁注：我认为它不适合 redux 或动画）：

//loader:
{
  test: (folder)\/.*\.js,
  include: path.resolve(__dirname, 'src')
  loader: ['lazy?bundle', 'babel']
}

//dynamic usage within React component:
const My_COMPONENTS = {
   ComponentA: require('./folder/ComponentA'),
   ComponentB: require('./folder/ComponentB'),
}

class ParentComponent extends React.Component {
    componentDidMount() {
        My_COMPONENTS[this.props.name](component => this.setState({component}));
    } 
    render() {
       return <this.state.component />;
    }
}

所以结果是你正在动态渲染一个组件，但是来自一组静态的预先确定的可能性——同时，只向客户端发送比访问者实际感兴趣的块更多的块。

另外，这是我拥有的一个组件，可以很好地做到这一点：

import React from 'react';
import Modal from './widgets/Modal';

export default class AjaxModal extends React.Component {
  constructor(props, context) {
    super(props, context);
    this.state = {
      Content: null
    };
  }

  componentDidMount() {
    if(this.props.show) {
      this.loadContent();
    }
  }

  componentWillReceiveProps({show}) {
    if(show && !this.state.Content) {
      this.loadContent(1200); //dont interfere with animation
    }
  }

  loadContent(ms=0) {
    setTimeout(() => {
      this.props.requestLazyBundle(({default: Content}) => {
        this.setState({Content});
      });
    }, ms);
  }

  render() {
    let {Content} = this.state;

    return (
      <Modal title={this.props.title} {...this.props} loading={!Content}>
        {Content ? <Content /> : null}
      </Modal>
    );
  }
}

pass 传递一个 async require bundler 函数this.props.requestLazybundle，就像这样：

render() {

  let requestLazyBundle = require('bundle?lazy&name=AnotherComponent!../content/AnotherComponent');

  return (
    <AjaxModal title='Component Name' {...props} requestLazyBundle={requestLazyBundle} />
  );
}

请查看我为完整源代码提供的这个要点页面 https://gist.github.com/SamanShafigh/a0fbc2483e75dc4d6f82ca534a6174d4

因此，假设您有 4 个组件，分别称为 D1、D2、D3。你需要的是创建一个依赖注入和一个依赖容器机制。这是一个非常简单的实现

想象一下你有一个这样的配置文件来定义你的组件

export default [
  {
    name:'D1',
    path:'D1'
  },
  {
    name:'D2',
    path:'D2'
  },
  {
    name:'D3',
    path:'D3'
}];

然后你可以有一个像这样的组件容器

import componentsConfig from 'ComponentsConfig';

let components = {};

for (var i = 0; i < componentsConfig.length; i++) {
  let componentConfig = componentsConfig[i];
  // Check if component is not already loaded then load it
  if (components[componentConfig.name] === undefined) {
    components[componentConfig.name] = require(`${componentConfig.path}`).default;
  }
}

export default components;

最后，在您想要加载组件的地方，您可以使用组件容器动态加载组件，或者换句话说，您可以注入组件

import React, { Component } from 'react';
import ComponentContainer from './ComponentContainer';

class App extends Component {
  render() {
    let components = ['D1', 'D2', 'D3'];

    return (
      <div>
        <h2>Dynamic Components Loading</h2>
        {components.map((componentId) => {
          let Component = ComponentContainer[componentId];
          return <Component>{componentId}</Component>;
        })}
      </div>
    );
  }
}

export default App;

import React, { Component } from "react";

class DynamicLoader extends Component {

  render() {
    const COMPONENTS = {
      CompA: require('./CompA'),
      CompB: require('./CompB'),
    }
    if(this.props.component && COMPONENTS[this.props.component]) {
      let Component = COMPONENTS[this.props.component].default;
      return <Component />
    }
  }
}

export default DynamicLoader;

<DynamicLoader component="CompA" />

由于我的问题有点不同，我有一个不同的解决方案，我寻找了一段时间的答案，但找不到。希望这可以帮助某人。

我的问题是我们有几个应用程序作为核心 UI 中的不同module独立部署。这些必须完全独立部署，才能对其他人产生任何影响。

我的解决方案是通过设置这些 webpack 属性将子组件应用程序包装为 webpack 库：

libraryTarget: 'umd',
globalObject: 'this',
library: 'SubComponentName'

我认为为应用程序提供了 2 个入口点，因为它可以直接访问，也可以通过单独应用程序中的父组件访问

class Library extends Component {

    render() {
        return (
            < Provider store = {store} >< BrowserRouter>
                < App isAccessDirect={this.props && this.props.isAccessDirect || false} roles={this.props.roles}>
                </App>
            < /BrowserRouter>< /Provider>
        )
    }
}

class Launcher extends Component {
    render() {
        return (
            ReactDOM.render(
                <Library isAccessDirect="true"/>,
                document.getElementById('root')
            )
        )
    }
}

构建此应用程序后，我可以直接在 index.html 中访问它

<script>
    new Compression.Launcher().render();
</script>

或者，如果您希望按照我的要求通过单独的主机/组件访问应用程序，您可以使用 loadjs 和 react 的组合来实现。

loadjs(['../sub/component/bundle.min.js'], 'loadSubComponent');

var subComponent = this.getUI('subComponentWrapperElement').get(0);

loadjs.ready('loadSubComponent', function() {

    var roles = my.app.roles;

    ReactDOM.render(
        <SubComponentName.Library roles={roles}></SubComponentName.Library>,
        subComponent
    );
});

这可以在任何类型的 javascript 客户端框架中加载到react组件中，在我们的例子中，我们在包装器应用程序中使用了主干。bundle.min.js 也位于反向代理后面，但它可以位于任何地方，只需加载它并等待加载完成，loadjs 在这种情况下是完美的。最后一个重要的信息是，销毁组件对于确保良好的用户体验至关重要，因为我们遇到了许多问题。

loadjs.reset();
var subComponent = this.getUI('subComponentWrapperElement').get(0);
ReactDOM.unmountComponentAtNode(subComponent);

所以简而言之，我觉得这比其他答案提供的是一个完全独立的可部署应用程序套件，它可以完全与框架无关。

从 React 16.6.0（2018 年 10 月 23 日）开始，React.lazy()在客户端渲染的代码拆分的旗帜下，可能是一个方便的解决方案。

固定组件名称

鉴于您希望延迟加载以下组件 ( MyLazy.js)：

import React from 'react';

export default function (props) {
  return (
    <p>My component</p>
  );
}

您可以App.js使用以下内容从另一个组件（例如）渲染它，注意内置<Suspense>组件将显示直到加载完成：

import React, { Suspense } from 'react';

export function App(props) {
  const MyLazyLoaded = React.lazy(() => import('./MyLazy'));
  return (
    <div>
      <Suspense fallback={<div>Loading...</div>}>
        <MyLazyLoaded />
      </Suspense>
    </div>
  );

}

动态组件名称

如果您想动态设置组件的名称，例如根据您的问题从用户输入，您可以使导入语句变量，例如：

var lazyComponentName = 'MyLazy';
const MyLazyLoaded = React.lazy(() => import('./' + lazyComponentName));

请注意，如果您不连接并直接使用变量名（即import(lazyComponentName)），您将看到以下 ES Lint 警告，与webpack相关：

关键依赖：依赖的请求是一个表达式