redux router 组件如何按需加载

来源：互联网发布：软件开发v 模型编辑：程序博客网时间：2024/05/13 21:27

当页面比较多时，项目就会变得越来越大，尤其对于单页面应用来说，初次渲染的速度就会很慢，这时候就需要按需加载，只有切换到页面的时候才去加载对应的js文件。react配合webpack进行按需加载的方法很简单，Route的component改为getComponent，组件用require.ensure的方式获取，并在webpack中配置chunkFilename。

const chooseProducts = (location, cb) => {    require.ensure([], require => {        cb(null, require('../Component/chooseProducts').default)    },'chooseProducts')}const helpCenter = (location, cb) => {    require.ensure([], require => {        cb(null, require('../Component/helpCenter').default)    },'helpCenter')}const saleRecord = (location, cb) => {    require.ensure([], require => {        cb(null, require('../Component/saleRecord').default)    },'saleRecord')}const RouteConfig = (    <Router history={history}>        <Route path="/" component={Roots}>            <IndexRoute component={index} />//首页            <Route path="index" component={index} />            <Route path="helpCenter" getComponent={helpCenter} />//帮助中心            <Route path="saleRecord" getComponent={saleRecord} />//销售记录            <Redirect from='*' to='/'  />        </Route>    </Router>);

0 0