第一种,async/await + import()
async function getComponent(){
const component = await import(
`./${self.props.dirname}/app.js`);
return component.default || component;
}
getComponent().then(App => {
ReactDOM.render(
<App/>,
document.querySelector('#root')
)
})
第二种,React.lazy + import() + <Suspense fallback/>
import React,{Suspense} from "react";
const self = this;
const App = React.lazy(() => import(`./${self.props.dirname}/app.js`));
ReactDOM.render(
<Suspense fallback={<div>loading</div>}>
<App/>
</Suspense>,
document.querySelector('#root')
)
第三种,loadable + import()
npm install --save @loadable/component
import loadable from "@loadable/component";
const App = loadable(() => import(`./${this.props.dirname}/app.js`));
ReactDOM.render(
<App/>,
document.querySelector('#root')
)
参考文章
代码分离|webpack
代码分割|react
@loadable/component