react-router实现动态按需加载

“我来了. ”

用react-router很好的实现路由和按需加载。只是这样还是会提前把整个文件加载进来。只是按需执行而已，并没有达到优化的目的。
使用。
核心源码是在在动态加载子路由时加载模块

export default function rootRoute(store) {
    return {
        path: '/',
        component: AppView,
        indexRoute: {component: Dashboard},
        childRoutes: [
            require('./Help'),
            require('./About'),
            require('./GameMonitor'),
        ],
        onEnter: function (nextState, replaceState, callback) {
            // 需要做权限控制的时候开启
            callback()
        }
    };
}

module.exports = {
    path: 'monitor',
    getComponent(location, cb) {
        require.ensure([], (require) => {
            cb(null, require('./components/Monitor'));
        })
    }
}

一开始会遇到webpack1.0打包加载方式是用的umd方式。用module.exports方式导出模块，并用require引入。对export default Monitor;并不能加载成功.
然后我将组件的导出方式改成 module.exports = Monitor; 发现在本地dev模式下是可以正常运行。但是打包之后会出错。查看出错堆栈发现，正式加载方式的问题导致。
查了一天，最后在antd的源代码中发现了解决方法，是使用 add-module-exports

1	npm install babel-plugin-add-module-exports --save-dev

将webpack配置中插件commonjs改为 add-module-exports。

query:{
                   "presets": ["es2015", "react", "stage-0"],
                   "plugins":[
                       "transform-decorators-legacy",
                       //"transform-es2015-modules-commonjs",
                       "add-module-exports"]
               }

刷新成功实现动态加载！

"配合webpack实现"

FEATURED TAGS

FRIENDS