更换Code Splitting库

[dxx]

react-loadable已经不维护了，目前最新版本使用了react遗留的 context API，还使用了一个即将在react17中移除的生命周期函数 componentWillMount，建议使用其它Code Splitting库比如loadable-components。React官方已经将loadable-components作为服务端Code Splitting推荐库 https://reactjs.org/docs/code-splitting.html#reactlazy

[Kim09AI]

react-loadable已经不维护，在哪里看到的，找了一下没找到

[dxx]

没有针对React16、Webpack4、 Babel7更新，看看下面的链接
reactjs/react.dev#1407
jamiebuilds/react-loadable#151

[Kim09AI]

感谢提醒，不过loadable-components不能像react-loadable一样，可以使用Component.preload()预加载资源，所以在首次切换到某个页面时，效果没有使用react-loadable的效果好

[dxx]

服务端渲染，渲染页面之前已经把当前页面所需的js和css以script或link标签拼接到html，客户端不需要用Component.preload()。如果要让js和css提前加载，利用link标签的preload提前加载，服务端渲染时loadable-components已经提供了预加载js和css的方法getLinkTags用来获取预加载资源。另外客户端提前加载js资源，webpack提供了相应的功能Prefetching/Preloading。对于低版本的ebpack，也有插件preload-webpack-plugin。可以使用preload/prefetch优化下

[Kim09AI]

在渲染首屏时，确实loadable-components已经处理的很好了，我是指之后的前端路由切换，由于loadable-components暂时不支持Component.preload()，路由跳转时会先获取好数据，才能去加载相应页面的js&css，而之前是数据获取好的时候，相应页面的js&css肯定已经加载好了，主要区别在src/utils/deferredAsyncConnect.js文件

之前

const newPromise = !deferred
    ? async options => Promise.all([
        Component.preload && await Component.preload(),
        promise(options)
    ]).then(res => res[1])
    : async options => {
        Component.preload && await Component.preload()
        promise(options)
    }

现在

const newPromise = !deferred
    ? options => promise(options)
    : options => {
        promise(options)
    }

之前是数据加载好就可以看到渲染好的页面，现在是数据加载好，还要等js&css加载，会先看到空白页，然后才能看到渲染好的页面，效果就稍微差了一点，最新代码在upgrade分支，路由切换时是可以明显的看到闪屏的

[Kim09AI]

使用了一个没有在文档中说明的api实现了Component.preload()，具体代码查看https://github.com/Kim09AI/react-juejin/blob/master/src/components/loadable/index.jsx
算是修改完成了

[dxx]

这么做只是为了提前加载js或css？requireSync需要props，作者用了React.forwardRef，props在render前才会创建。客户端加载数据要么在数据加载完成后再渲染页面，要么先渲染页面再加载数据，前者会在当前页面等待下一个页面数据加载完成再显示完整页面，后者先显示页面部分内容再加载需要的数据然后显示完整内容。这两种做法都可选，第一种我觉得vue有路由钩子很好做，react相对来说不够方便，我个人比较倾向于第二种，如果用第一种这里用loadable-components暂时只能自己hack了

[Kim09AI]

确实只是单纯的加载js和css而已，至于props的话，只要避免使用loadable(props => import(./${props.page}))这种方式即可，之后组件渲染时再传的props是没问题的，页面渲染方式的话，我使用的是你说的第一种，用redux-connect来实现的，个人觉得还是比较方便的，这个preload也只是为了页面组件而加的