Question

我想延迟加载所有顶级组件，以缩短加载时间。我正在使用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-lodable：

Official doc

react-on-rails似乎建议这样做（请参见下文），但是我遇到了另一个错误，即“ rail-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});

这是错误：

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 />
    )

  }
}

但这只会返回“正在加载...”

问题：

唯一的好消息是Webpack可以根据组件将捆绑包正确地分成较小的捆绑包，因此我认为react-loadable可以工作，但是呈现不正确。

是否可以使用react-on-rails来延迟加载组件？还是我有语法错误？似乎react-on-rails控制着组件的加载方式。

另一个想法：也许我应该只对子组件进行延迟加载。但是我不知道这是否真的有助于减少初始加载时间。有什么想法吗？

延迟加载/可在Rails上进行反应加载

1。 React.lazy：

2。 react-lodable：

问题：

0 个答案: