Reactjs 按模块拆分网页包代码

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

（反应，反应路由器4）

应用程序是唯一的端点，我导入应用程序中的每个子应用程序路由器

我们的模块系统是什么样子的：
应用程序
-->子应用1
-->子应用2
-->子应用3

我现在如何导入子应用：

// 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.js

中导入它们

---

有人知道如何配置webpack.config.js来实现它吗

您不需要配置Webpack。它将检查导入并自动创建捆绑包和AJAX加载程序，以便在运行时导入

尝试以下方法

import*as React from“React”；
从“react dom”导入{render}；
从“react Router dom”导入{BrowserRouter as Router，Route，Link}；
函数asyncComponent（getComponent）{
返回类AsyncComponent扩展了React.Component{
静态组件=空；
状态={Component:AsyncComponent.Component}；
组件willmount（）{
如果（！this.state.Component）{
getComponent（）。然后（组件=>{
AsyncComponent.Component=组件
this.setState（{Component}）
})
}
}
render（）{
const{Component}=this.state
if（组件）{
返回
}
返回空
}
}
}
const FooComponent=异步组件（（）=>(
导入（'./foo'）。然后（module=>module.default）
));
常量BarComponent=asyncComponent（（）=>(
导入（'./bar'）。然后（module=>module.default）
));
常量应用=（）=>(
家
福
酒吧
);
render（，document.getElementById（'root'））
系统。导入
已弃用。官方文档建议使用
require。请确保
或
import（）
尚未标准化，因此没有任何内容是官方/不推荐的。我使用Webpack/TypeScript和这两种支持系统。importOfficial documentation of
Webpack
：）他们建议使用
import（）
，这是一个友好的规范，而不是
System.import
，它只是一个内部调整。最终，它将被弃用，因为最好提出将被维护的代码，而不是弃用的代码。你说的是Webpack，而不是JavaScript。我们还没有设定，TC39仍处于流程3（因此不是标准）。Webpack将仍然支持这两种方式，直到它进入流程4。
// 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>
)