react-router中的Dynamic Routing意义是什么

#1

在看文档的时候，看到Dynamic Routing，

const CourseRoute = {
  path: 'course/:courseId',

  getChildRoutes(partialNextState, callback) {
    require.ensure([], function (require) {
      callback(null, [
        require('./routes/Announcements'),
        require('./routes/Assignments'),
        require('./routes/Grades'),
      ])
    })
  },

  getIndexRoute(partialNextState, callback) {
    require.ensure([], function (require) {
      callback(null, {
        component: require('./components/Index'),
      })
    })
  },

  getComponents(nextState, callback) {
    require.ensure([], function (require) {
      callback(null, require('./components/Course'))
    })
  }
}

看到这段代码，根据路由按需加载，但是将网页组件化之后，通过webpack（browserify）等，实现commonJS规范，每一个组件所需要的js都是通过require或者Import引入，也就是网页组件化，本身就能按需加载，那么Dynamic Routing的意义在哪里，仅仅是双保险？

#2

我现在是这样理解，不同路由下，加载不同的组件，通过React-router实现的是，路由——组件的按需加载，而webpack等可以实现 组件——组件定义部分 的按需加载

#3

关于这一点，我有篇博客做了解释：https://segmentfault.com/a/1190000007949841

#4

学习了，其实本质是webpack的require.ensure代码切割，只不过让其在路由切换的时候，调用切割后的结果。

就是通过getComponent，在路由切换的时候使用require,ensure。

但是，我发现个硬伤，是要后端程序员配合完成服务器渲染，要不然这样做首页加载事件是缩短了，但是后续tab切换页面的js从哪里引入？

#5

切割后的js也添加到index.html里面，对于不变的js文件做缓存处理。

#6

这样说的通，也就是切换路由的时候，会执行webpack的require.ensure，然后去加载所需的js，实现按需加载。

这样切换路由的时候不关服务器渲染什么事了吧，服务器渲染只在首页的时加快首页显示时间。

还有默默问一下，react服务器渲染的js是怎么执行的，比如我写了一个server.js，如何让他能够在服务器端执行。