Ruby on rails 惰性加载/反应可在Rails上的反应中加载

我想延迟加载所有顶级组件，以缩短加载时间。我正在使用它来集成React和RubyonRails。要呈现组件，我必须在

registration.jsx

中这样注册它们：

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

ReactOnRails.register({Component1, Component2});

我尝试了两种方法：

1。反应。懒惰： 但是浏览器抛出了一个错误

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 lodable:

这似乎是

react-on-rails

（见下文）推荐的，但我得到了一个不同的错误，即react-on-rails找不到这样的组件

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

const loading = () => {
  return <div>Loading...</div>;
}

const Component1 = Loadable({
  "loader": () => import('../components/Component1'),
  "loading": loading
});

import Component2 from '../components/Component2';

ReactOnRails.register({Component1, Component2});

我也尝试在子组件上使用它。但它只是不渲染它

import Loadable from "react-loadable";

const loading = () => {
  return <div>Loading...</div>;
}

const SubComponent = Loadable({
  "loader": () => import("./SubComponent"),
  "loading": loading
});

class Component1 extends PureComponent {
  render () {
    return (
      <SubComponent />
    )

  }
}

从“react Loadable”导入可加载；
常量加载=（）=>{
返回装载。。。；
}
常量子组件=可加载({
“加载程序”：（）=>导入（“./子组件”），
“装载”：装载
});
类Component1扩展了PureComponent{
渲染（）{
返回(
)
}
}

但这只返回“加载…”

问题： 唯一的好消息是Webpack根据组件正确地将包拆分为更小的包，因此我认为

react loadable

可以工作，但没有正确地呈现

是否可以使用

在rails上反应来延迟加载组件？还是我有语法错误？似乎
react-on-rails
控制组件的加载方式

另一个想法：也许我应该只在子组件上进行延迟加载。但我想知道这是否真的有助于减少初始加载时间。有什么想法吗？
你有没有找到解决办法？我刚刚用lazy试过这个，这个对我很有效，你能提供你的react/webpack版本吗？您的组件是否有
默认值
导出？
Uncaught ReferenceError: ReactOnRails encountered an error while rendering component: Component1.
Original message: React is not defined

import Loadable from "react-loadable";

const loading = () => {
  return <div>Loading...</div>;
}

const SubComponent = Loadable({
  "loader": () => import("./SubComponent"),
  "loading": loading
});

class Component1 extends PureComponent {
  render () {
    return (
      <SubComponent />
    )

  }
}