react-loadable 使用高阶组件动态import组件,实现代码分割(code-splitting)
使用后:
import React, { Component } from 'react';
import Loadable from 'react-loadable';
const LoadableBar = Loadable({
loader: () => import('./Bar'),
loading() {
return <div>Loading...</div>
}
});
class App extends Component {
render() {
return (
<div>
<LoadableBar/>
</div>
);
}
}
export default App;
import React, { Component } from 'react';
class Bar extends Component {
render() {
return (
<div>
bar
</div>
);
}
}
export default Bar;
使用前:
import React, { Component } from 'react';
import Bar from './Bar';
class App extends Component {
render() {
return (
<div>
<Bar/>
</div>
);
}
}
export default App;
官方github:https://github.com/jamiebuilds/react-loadable
官方npm:https://www.npmjs.com/package/react-loadable
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步