可以在 create-react-app 服务器端使用 react-loadable 吗？

Question

我正在尝试在我的 create-react-app 应用程序中进行一些代码拆分，该应用程序利用服务器端呈现。

我正在使用 'react-loadable` 进行代码拆分：https://github.com/thejameskyle/react-loadable

到目前为止，我只是将我的 Home.js 组件与我的应用程序的其余部分分开，只是为了看看它是否有效。在开发模式下（阅读：不是 SSR），它被分块并且工作正常。

但是，我无法在服务器上运行。我正在按照他们的 Github 页面上的指南进行操作，但由于需要进行 webpack 更改而被卡住了。在create-react-app 应用程序中，您无法访问 webpack，因为它被隐藏了。

我在启动服务器时收到的错误是：

return (0, _importInspector.report)(import('../components/home/Home'), {
                                                ^^^^^^
SyntaxError: Unexpected token import
at createScript (vm.js:80:10) ...

我很确定这是因为我没有按照指南中的说明正确配置 webpack。

在指南中，它明确说明了 SSR：

首先，我们需要 Webpack 告诉我们每个模块存在于哪些包中。为此，有 React Loadable Webpack 插件。

从 react-loadable/webpack 导入 ReactLoadablePlugin 并将其包含在您的 webpack 配置中。向它传递一个文件名，用于存储有关我们的包的 JSON 数据的位置。

// webpack.config.js
import { ReactLoadablePlugin } from 'react-loadable/webpack';

export default {
    plugins: [
        new ReactLoadablePlugin({
            filename: './dist/react-loadable.json',
        }),
    ],
};

如果不弹出，我认为这是不可能的。 有人知道react-loadable 是否可以在create-react-app 服务器端渲染的应用程序中使用吗？

Answer 1

在服务器文件的顶部导入这些模块

require('ignore-styles');
require('babel-polyfill')
require('babel-register')({
    ignore: [ /(node_modules)/ ],
    presets: ['es2015', 'react-app'],
    plugins: [
        'syntax-dynamic-import',
        'dynamic-import-node',
        'react-loadable/babel'
    ]
});