webpack 按模块拆分代码

Question

由于我的 react app bundle.js 太大，所以我想按模块拆分它（通过 react 路由器）

（反应，反应路由器 4）

应用只是端点，我在应用中导入每个子应用路由器

我们的模块系统是什么样的：
应用程序
--> subApp1
--> subApp2
--> subApp3

我现在如何导入子应用：

// app.js
import { Route, Switch } from 'react-router-dom';
import SubApp1 from '../SubApp1'
import SubApp2 from '../SubApp2'
import SubApp3 from '../SubApp3'

const App = () => (
  <Switch>
    <Route path="sub-app1" component={SubApp1} />
    <Route path="sub-app2" component={SubApp2} />
    <Route path="sub-app3" component={SubApp3} />
  <Switch>
)

现在，有一个 app.bundle.js 包含应用程序和子应用程序，我将其导入 index.html

我想要的是：

// index.html
<script src="/static/subApp1.bundle.js"></script>
<script src="/static/subApp2.bundle.js"></script>
<script src="/static/subApp3.bundle.js"></script>
<script src="/static/app.bundle.js"></script>

    // app.js
import { Route, Switch } from 'react-router-dom';
import SubApp1 from 'SubApp1'
import SubApp2 from 'SubApp2'
import SubApp3 from 'SubApp3'

const App = () => (
  <Switch>
    <Route path="sub-app1" component={SubApp1} />
    <Route path="sub-app2" component={SubApp2} />
    <Route path="sub-app3" component={SubApp3} />
  <Switch>
)

我可以通过 webpack 将每个子应用拆分为子捆绑包（多个条目），但是我无法将它们导入 app.js

谁知道如何配置 webpack.config.js 来实现它？

Answer 1

你不需要配置 Webpack。它将检查导入并自动创建包和 AJAX 加载器以在运行时导入。

试试下面的。

import * as React from "react";
import { render } from "react-dom";
import { BrowserRouter as Router, Route, Link } from "react-router-dom";

function asyncComponent(getComponent) {
  return class AsyncComponent extends React.Component<any,any> {
    static Component = null;
    state = { Component: AsyncComponent.Component };

    componentWillMount() {
      if (!this.state.Component) {
        getComponent().then(Component => {
          AsyncComponent.Component = Component
          this.setState({ Component })
        })
      }
    }
    render() {
      const { Component } = this.state
      if (Component) {
        return <Component {...this.props} />
      }
      return null
    }
  }
}

const FooComponent = asyncComponent(() => (
  System.import('./foo').then(module => module.default)
));

const BarComponent = asyncComponent(() => (
  System.import('./bar').then(module => module.default)
));

const App = () => (
  <Router>
    <div>
      <Link to="/">Home</Link>
      <Link to="/foo">Foo</Link>
      <Link to="/bar">Bar</Link>
      <Route path="/foo" component={FooComponent} />
      <Route path="/bar" component={BarComponent} />
     </div>
  </Router>
 );
 
 
 render(<App />, document.getElementById('root'));

PS，大部分代码都是我从 Kent Dodds 那里偷来的 :)