标签: react-loadable

我正在尝试实现一个有 10-15 页的应用程序。这适用于 react-router 很好，但我应该使用 react-loadable 来获得 Spinner 和加载效果......

但是如何在 loadable 中导入路由器组件？

我应该为每个组件创建一个 const 变量吗？

像这样 ：

const Home = Loadable({
    loader: () => import('./Home'),
    loading: Loading,
});

const News = Loadable({
    loader: () => import('./News'),
    loading: Loading,
});

const Gallery = Loadable({
    loader: () => import('./Gallery'),
    loading: Loading,
});

class App extends React.Component {
    render() {
        return (
          <Router>
              <Route exact path="/" component={Home} />
              <Route path="/news" component={News} />
              <Route path="/gallery" component={Gallery} />
          </Router>
        )
    }
}

还是可以用其他技巧？

我在测试React使用的组件时遇到了麻烦react-loadable。说，我有一个Button组件，取决于它是否接收icon道具，它会Icon像这样加载一个组件：

Button.js

const LoadableIcon =  Loadable({
  loader: () => import('./Icon'),
  loading: () => <div>Loading...</div>
})

function Button(props) {
  return (
    <button 
      onClick={props.onClick}>
      {props.icon &&
        <LoadableIcon name={props.icon} />}
      {props.children}
    </button>
  )
}

但是，当我测试该组件时，Icon尚未加载，而是测试仅找到了<div>Loading...</div>元素...

Button.test.js

import React from 'react'
import {render} from 'react-testing-library'

import Button from '../Button'


describe('Button', () => {
  it('renders icon correctly', () => {
    const {getByText} = render(
      <Button 
        icon='add' 
      />
    )
    expect(getByText('add')).toBeInTheDocument()
  })
}) …

react-loadable使用Webpack 4和Babel 7进行服务器端渲染吗？按照说明操作,我无法成功运行.

在仅遵循客户端步骤之后,Webpack正确地为每个可加载组件输出单独的块,这在我在浏览器中加载页面时反映出来(即:块是延迟加载的).

但是,在执行所有SSR步骤之后,服务器将引发以下错误:

Error: Not supported
at loader (/Projects/test-project/web/routes/index.js:50:15)
at load (/Projects/test-project/web/node_modules/react-loadable/lib/index.js:28:17)
at init (/Projects/test-project/web/node_modules/react-loadable/lib/index.js:121:13)
at flushInitializers (/Projects/test-project//web/node_modules/react-loadable/lib/index.js:310:19)
at /Projects/test-project/web/node_modules/react-loadable/lib/index.js:322:5
at new Promise (<anonymous>)
at Function.Loadable.preloadAll (/Projects/test-project/web/node_modules/react-loadable/lib/index.js:321:10)
at Object.preloadAll (/Projects/test-project/web/server.js:15:10)
at Module._compile (internal/modules/cjs/loader.js:702:30)
at Module._compile (/Projects/test-project/web/node_modules/pirates/lib/index.js:83:24)

我的routes/index.js档案:

import React from 'react';
import Loadable from 'react-loadable';

import Loading from '../components/Loading';

export default [
  {
    path: '/',
    component: Loadable({
      loader: () => import('./controllers/IndexController'),
      loading: Loading,
    }),
    exact: true,
  },
  {
    path: '/home',
    component: Loadable({
      loader: …

我有一张幻灯片，可以呈现一堆带有一些信息的卡片。卡片高度以最高卡片的高度为基础。我正在使用react-slick我的滑块。在第一次渲染时，卡片都设置为一个高度，但是当我刷新浏览器时，卡片的高度不同。

我的代码如下

滑块.jsx

import Loadable from 'react-loadable';
.....


const Slider = Loadable({
    loader: () => import('react-slick'),
    loading: () => null,
  });

class Slider extends Component{
   constructor(){
     this.state={ height: 0 }
     this.cards = [];
   }

   componentDidMount(){
      const height = this.getHighestHeight(this.cards);
      this.setState({height});
   }

   getHighestHeight(cards){
    //calculates the highest height of the cards
    ......
   }

   render(){
     ...
     <Slider ...>
       <Cards height={this.state.height} />
     </Slider>
     ....
   }

}

我知道 Loadable 是异步组件，这可能是它没有在浏览器刷新时设置高度的原因

我在 React 中使用 loadable 来动态加载我的组件。所以我导出每个组件的索引并将它们导入到 app.js 中。但问题是我在 WebStorm 中仍然遇到错误，即导出默认值未在单个组件索引文件中使用。

这是我的代码。这是在我的 App.js 文件中。

const HomeIndex = Loadable({
loader: () => import('./components/home/Index'),
loading: () => <div> </div>,
 });

我的组件索引文件。

export default class HomeIndex extends React.Component {

fetchCounts = () =>{
    this.counts.fetchCounts();
};

render(){
    return(
        <div className="pageView">
            <Counts ref={refs => { this.counts = refs; }}/>
            <hr/>
            <Customers fetchCounts={this.fetchCounts}/>
        </div>
    )
  }
}

WebStorm 中的错误截图：

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

react-loadable公开了一个非常好的方法，YourLoadableComponent.preload()通过该方法，您可以轻松地在组件渲染之前预加载组件（onMouseOver等）。

我可以看到我可以做类似的事情：https://github.com/pomber/react-lazy-preload-demo/pull/8/commits/126c1bf6e2a23b3e3f7eb0ffb1b4db260516643f 因此要import()手动调用，将结果存储Promise在某个变量中，然后将其传递给React.lazy()。然而，如果我想在某些类方法调用或生命周期挂钩中预加载，它可能有点过于冗长和有问题。

上述方法还有其他替代方法吗？

我基本上试图将poc我的主应用程序的某些部分提取到一个单独的包中。我已经在我的 git repo myapp-poc-ui中构建了一个示例单独包。

现在我正在尝试在我的main application.
package.json :

 "dependencies": {
    "myapp-poc-ui": "git+https://github.com/prabhatmishra33/myapp-poc-ui#master",
    "react": "^16.10.1",
    "react-dom": "^16.10.1",
    "react-scripts": "3.2.0"
  },

我通过以下方式访问主应用程序中的导出模块：

import React from 'react';
import './App.css';
import { HelloWorld } from "myapp-poc-ui";
import { LazyComponent } from "myapp-poc-ui";

function App() {
  return (
    <div>
      <HelloWorld />
      <LazyComponent />
    </div>
  );
}

export default App;

问题：我的浏览器遇到问题

Uncaught SyntaxError: Unexpected token '<'
Uncaught (in promise) ChunkLoadError: Loading chunk 1 failed.

Hello World已正确加载，但加载LazyComponent.

webpack config file …

如何从多类导出js文件导入react-loadable.
我试图CustomButton从MyButton.js使用react-loadable中导入Home.js.这是我知道做的唯一方法,不起作用.

MyButton.js

import {
  CustomButton,
  BUTTON_STYLE,
  BUTTON_TYPE,
  BUTTON_SIZE,
  BUTTON_ALIGN,
  COLOR
} from './buttons';
module.exports = {
  CustomButton,
  BUTTON_STYLE,
  BUTTON_TYPE,
  BUTTON_SIZE,
  BUTTON_ALIGN,
  COLOR
}

Home.js

const AsyncButton = Loadable({
  loader: () => import('../../button/MyButton'),
  loading: Loading
});

请帮忙.提前致谢.

我有一个加载脚本的简单函数：

const creditCardScript = (
  onReadyCB,
  onErrorCB,
) => {
  let script = document.createElement("script");
  script.type = "text/javascript";
  script.src = process.CREDIT_CARD_SCRIPT;
  document.head.appendChild(script);

  script.onload = function() {
    ...
  };
};

export default creditCardScript;

在迁移到 NextJS 之前，我使用以下命令导入脚本import creditCardScript from "./creditCardScript"：

Sine NextJS 在 Node 中的服务器端渲染组件，需要注意确保任何引用window（特定于浏览器）的代码在 之前不会被调用componentDidMount。

NextJS 通过提供动态导入（ react-loadable 的包装器）来解决这个问题，其中：

• 仅在需要时加载组件，
• 提供仅在客户端加载组件的选项 ( ssr: false)。

我继续实施动态导入：

const creditCardScript = dynamic(import("./creditCardScript"), { ssr: false });

在componentDidMount：

componentDidMount = () => {
  creditCardScript(
    this.onReadyCB, …

我正在尝试使用react可加载和动态导入将代码拆分为多个包。拆分过程效果很好。但是，当我尝试使用魔术注释webpackChunkName让Webpack自定义包名称时，它总是将我的包命名为0.bundle.js 1.bundle.js...。

我用chunkFilename: '[name].bundle.js'我的webpack.config.js，也明确提出“ comments: true”在我的.babelrc

经过一整天的研究，我真的感到沮丧。如果有人有线索，请多谢。

这是我的配置

webpack.config.js

entry: [
    'react-hot-loader/patch',
    './app/index.js'
  ],
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: '[name].bundle.js',
    chunkFilename: '[name].bundle.js',
    publicPath: '/'
  },

.babelrc

 {
  "presets": [
    ["env", {"modules": false}],
    "react"
  ],
  "plugins": ["transform-class-properties", "transform-object-rest-spread", "react-hot-loader/babel", "syntax-dynamic-import", "dynamic-import-webpack"],
  "env": {
    "test": {
      "presets": [
        "env",
        "react"
      ],
      "plugins": ["transform-class-properties", "transform-object-rest-spread", "dynamic-import-webpack"]
    }
  },
  "comments": true
}

路由器文件

const Login = Loadable({
  loader: () => import(/* webpackChunkName: 'LoginContainer' */ './containers/LoginContainer'),
  loading: …