如何使用 require.resolveWeak() 对服务器端渲染进行代码拆分？

Question

应用程序/index.js

import React from 'react';
import { with_code_splitting } from 'components/App/Code_splitting/HOC';

export default class App extends React.PureComponent {
    render () {
        return <Child/>;
    }
}

const Child = with_code_splitting({ dynamic:() => import('components/App/Child'), static:() => require.resolveWeak('components/App/Child') });

App/Code_splitting/HOC.js

import React from 'react';

export function with_code_splitting (options) {
    return class Decorated_component extends React.Component {
        static component = null;

        state = { component:Decorated_component.component };

        componentWillMount() {
            if (!this.state.component) {
                if (process.env.NODE_ENV !== 'server_side_rendering') {
                    options.dynamic()
                    .then(({ default:component }) => {
                        Decorated_component.component = component;
                        this.setState({ component });
                    });
                }
                else { // for server-side-rendering
                    const module_ID = options.static();
                    console.log(__webpack_modules__[module_ID]); // undefined
                    this.setState({ component:__webpack_require__(module_ID) });
                }
            }
        }

        render() {
            if (this.state.component) return <this.state.component {...this.props} />
            else return null;
        }
    }
}

我正在使用 webpack 3.9.1，反应 16.0.0。

我正在尝试使用 SSR 实现代码拆分。 但是 'require.resolveWeak' 中的第 'module_ID' 元素不在 __webpack_modules__ 数组中。

只有该索引处的元素为空。

客户端的代码拆分效果很好。

我不知道我误解了什么。我想要一个答案。感谢您的阅读。

Answer 1

您是否解决了在服务器上使用的第一次渲染时客户端上没有异步包的问题？

对于所有试图解决这个问题并偶然发现这个问题的人。使用代码分割最简单的方法是使用像 react-loadable (https://github.com/jamiebuilds/react-loadable) 这样的库

它带有用于渲染加载状态的便捷方法、超时、SSR 方法来跟踪哪些块正在加载，您可以将它们添加到页面，以便在开始渲染之前加载它们。