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') });

应用/ 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（）进行服务器端呈现的代码拆分？

1 个答案: