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

Question

App/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 方法，您可以将它们添加到页面，以便在开始呈现之前加载它们。

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

How to do a code splitting with server side rendering by using require.resolveWeak()?

reactjs

webpack

code-splitting

server-side-rendering