Optimization of React Server Rendering and On-Demand Loading

  node.js, question

Userequire.ensureTo achieve the front-end on-demand loading, sample code:

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

butnode.jsNot in itselfrequire.ensureOf, all when doing server-side shading cannot share the same routing component, specially wrote a server rendering special, sample code:

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

In this case, the front-end and server-side rendering will be inconsistent, and the front-end will render again after the server-side rendering, thus the first screen acceleration effect cannot be achieved.

Therefore, I will get the browser address when refreshing the first screen, and then insert a js file of this component (usingrequire.ensureAfter that,webpackAccording torequire.ensureGenerate the specified file), thus realizing the first screen acceleration and coexistence of on-demand loading.

However, the problem now is that you can see that although I have achieved results, the method of implementation is not elegant.
Neither two routing controllers nor hard-wired js are what I want.

You have a great solution, so please throw it in my face! ! !

—————

althoughreactIt is very comfortable to write, especiallyreduxHowever, from the point of view of the website, there seems to be no purer than before.Html plus requireJSWhat are the advantages?

In usereactIt is often not only usedreactThe js files of various third-party packages have become larger, thoughwebpackAddgzipIt can be compressed very much (my 1M file is about 50K after compression), but it is not only usedreactTo compress?

Moreover, both server-side rendering and on-demand loading seem to be inferior to the past.Html plus requireJS?

Let’s discuss this while you help solve the problem.

webpack isomorphic tool