react-router+webpack实现动态按需加载

Posted by yuk on 2016-04-26

用react-router很好的实现路由和按需加载。只是这样还是会提前把整个文件加载进来。只是按需执行而已，并没有达到优化的目的。

核心源码

在在动态加载子路由时加载模块

rootRoute.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
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()
        }
    };
}
GameMonitor.js
1
2
3
4
5
6
7
8
module.exports = {
    path: 'monitor',
    getComponent(location, cb) {
        require.ensure([], (require) => {
            cb(null, require('./components/Monitor'));
        })
    }
}

webpack打包出错解决办法

一开始会遇到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。

1
2
3
4
5
6
7
query:{
                   "presets": ["es2015", "react", "stage-0"],
                   "plugins":[
                       "transform-decorators-legacy",
                       //"transform-es2015-modules-commonjs",
                       "add-module-exports"]
               }

刷新成功实现动态加载！

FEATURED TAGS
FRIENDS