Dva: 动态加载model

[superxiaoxi]

我准备用dva构建saas系统，涉及的数据结构比较多，需要构建几十上百个model，很多路径的model是不需要最开始的时候装载，或许用户此次操作都用不到，所以能不能做动态加载？

[sorrycc]

参考例子：https://github.com/dvajs/dva/tree/master/examples/dynamic-load

[lincenying]

用webpack2该怎么写呢?

export default ({ history, app }) => {
    const routes = [{
        path: '/',
        name: 'app',
        getComponent: (location, callback) => {
            System.import('./views/app.jsx').then(component => {
                //app.model(require('./models/topics'))
                callback(null, component.default || component)
            })
        }
    }, {
        path: '/article/:id',
        name: 'article',
        getComponent: (location, callback) => {
            System.import('./views/article.jsx').then(component => {
                //app.model(require('./models/topic'))
                callback(null, component.default || component)
            })
        }
    }]
    return (
        <Router history={history} routes={routes} />
    )
}

[sorrycc]

@lincenying webpack2 好像除了用 System.import 没其他区别了吧，你用着有啥问题不?

[lincenying]

@sorrycc 我上面的代码, 把注释去掉后, 并不能运行, 会抛namespace should be defined错误, 应该是models没有打包进去...
models在最前面import, 然后在system.import里直接app.model(xxx), 能运行, 但是models就没分割了.

[lincenying]

export default ({ history, app }) => {
    return (
        <Router history={history}>
            <Route name="home" path="/" getComponent={(location, callback) => {
                Promise.all([
                    System.import('./views/app.jsx'),
                    System.import('./models/topics'),
                ]).then(data => {
                    app.model(data[1].default || data[1])
                    callback(null, data[0].default || data[0])
                })
            }} />
            <Route name="article" path="/article/:id" getComponent={(location, callback) => {
                Promise.all([
                    System.import('./views/article.jsx'),
                    System.import('./models/topic'),
                ]).then(data => {
                    app.model(data[1].default || data[1])
                    callback(null, data[0].default || data[0])
                })
            }} />
        </Router>
    )
}

这样可以, 不过就是一个路由会有2个chunk

[sorrycc]

业界好像都是这样写的，比如：https://github.com/mxstbr/react-boilerplate/blob/4003725/app/routes.js#L19-L58