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

#1

使用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?

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

#2

关注下

#3

有用DLL插件优化吗？
在生成HTML的时候：楼中是用这个吗？
<script src={assets.javascript.main} charSet="UTF-8"/>
如果也是这样，那就和楼主的解决办法一致，需要一个插件检查HTML是否有了对应的js,如果有就不加载。

#4

那个插件是什么? 没用过啊? 具体点让我了解下啊哈哈哈
不过解决的方法跟你说的一样, 不过我是自己匹配网址而已

#5

webpack 的DLL插件，应该可以把代码优化到最小。做代码分割的时候不会导致全部加载。

#6

给个链接吧=.=

#7

还有想请教下你的路由组件怎么写?
后端不兼容require.ensure这个方法所以我写了两份来兼容
有更好的解决方法吗?

#8

http://webpack.github.io/docs/list-of-plugins.html#dllreferenceplugin 就是这个插件地址。
后端渲染目前没有好的解决方案可以分割代码。

#9

解决了么？我遇到了webpack分割文件后server渲染的js文件出现了common.js里的内容，包含window和document，然后再node上报错