React 服务端渲染 与 按需加载 优化问题

Question

使用require.ensure来实现前端的按需加载, 示例代码:

const routes = {
    component: Shell(Init),
    childRoutes: [
        {
            path: '/',
            indexRoute: {
                getComponent: (nextState, cb) => {
                    require.ensure([], (require) => {
                        cb(null, require('../containers/essay'))
                    }, 'essay')
                }
            }
        },
        //......
    ]
}

但是node.js本身是没有require.ensure的, 所有在做服务端渲的时候不能公用同一份路由组件, 特意再写了一份服务端渲染专用的, 示例代码:

const routes = (
    <Route path="/" component={Shell(Init)}>
        <IndexRoute component={Essay}/>
        /*......*/
    </Route>
);

就现在这样的话就会造成前端和服务器端渲染不一致, 会服务器端渲染完后前端又渲染一次, 这样就不能达到首屏加速的效果了.

所以, 我在首屏刷新的时候会获取浏览器地址, 然后根据地址在服务器端渲染的时候硬插一条该组件的js文件(使用require.ensure之后, webpack会根据require.ensure生成指定的文件), 从而实现了首屏加速, 按需加载共存.

但是现在的问题是, 各位可以看到我虽然实现了效果, 但是实现的方法并不优雅.
无论是两份路由控制器还是硬插js, 都不是我想要的.

各位大大有解决方案不妨尽情往我脸上甩啊!!!

--------------------------------------说体题外话--------------------------------------

虽说react编写起来很舒服, 特别是redux, 但是从网站的角度来看好像没有比以往纯html + requireJS有优势多少.

在使用react的时候往往不单单只用react, 各种第三方包是的js文件变得更大, 虽说webpack + gzip可以压缩得很厉害(我1M的文件压缩后是50K左右), 但是不是只有用了react才能压缩啊?

而且不论是服务端渲染还是按需加载, 好像都比不上以往html + requireJS?

各位帮忙解决问题之余都来讨论下啊?

Answer 1

webpack isomorphic tool