小编chl*_*lin的帖子

我想延迟加载所有顶级组件以缩短加载时间。我正在使用React-on-rails来集成 React 和 Ruby on Rails。要渲染组件，我必须像这样注册它们registration.jsx：

import ReactOnRails from 'react-on-rails';
import Component1 from '../components/Component1';
import Component2 from '../components/Component2';

ReactOnRails.register({Component1, Component2});

我尝试了两种方法：

1.React.lazy：

import {lazy} from "react";
const Component1 = lazy(() => import("../components/Component1"));

但浏览器抛出错误...

Uncaught Error: Module build failed: SyntaxError: 
.../app/registration.jsx: Unexpected token, expected ";" (20:113)

看来我不能在这个文件中使用延迟加载。所以我在 Component1 中的子组件中尝试了它。但它仍然不起作用。

 const SubComponent = lazy(() => import("./SubComponent"));

这将返回：

Uncaught ReferenceError: SubComponent is not defined

2. 反应可加载：

官方文档

这似乎是推荐的react-on-rails（见下文），但我收到了一个不同的错误，说react-on-rails找不到这样的组件。

import ReactOnRails from 'react-on-rails';
import Loadable from "react-loadable";

const …