标签: react-loadable

我正在尝试使用react-loadable将代码拆分到我的应用程序中.我在一个非常简单的组件上尝试了它:

const LoadableComponent = Loadable({
    loader: () => import('components/Shared/Logo/Logo'),
    loading: <div>loading</div>,
});

但是,当呈现此组件时,我收到以下错误:

Warning: React.createElement: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: object.

Check the render method of `LoadableComponent`.
    in LoadableComponent (created by AppHeader)
    in div (created by AppHeader)
    in AppHeader (created by PlainChatApp)
    in div (created by PlainChatApp)
    in PlainChatApp (created by DragDropContext(PlainChatApp))
    in DragDropContext(PlainChatApp) (created by Connect(DragDropContext(PlainChatApp)))
    in Connect(DragDropContext(PlainChatApp))
    in Provider
    in AppContainer
    in ErrorBoundary

The above …

我有一个非常简单的React组件，用于react-loadable动态导入另一个组件。该代码看起来类似于以下内容：

import React from 'react';
import Loadable from 'react-loadable';
import LoaderComponent from 'path/to/LoaderComponent';


export default outerLoadableComponent = Loadable({
  loader: () => import('path/to/innerComponent'),
  loading() {
    return <LoaderComponent />
  }
});

我正在尝试通过使用Enzyme to来测试此组件，该组件在我可以看到包装的位置将其设置为true的地方mount outerLoadableComponent创建了包装。但是，我陷入内部无法解决的问题。这似乎是一个承诺，只有在实际完成导入后才能解决，但是即使有一些超时，它也无法正常工作：outerLoadableComponentLoaderComponentloadingStateimport

const expect = chai.expect;
chai.use(sinonChai);

it('should render the loading state, and innerComponent', (done) => {
  const wrapper = mount(
    <outerLoadableComponent />
  );

  expect(wrapper.loading).to.be.true;

  setTimeout(() => {
    expect(wrapper.loading).to.be.false;
    expect(wrapper.loaded).to.exist; // loaded state returns a function
    expect(wrapper.find(innerComponent)).to.exist;
    done();
  }, 500);
});

我 …

我正在使用React Loadable对我的组件进行代码拆分,但问题是某些组件是从多个位置引用的.例如,我有这个组件CarsModule,在这样的多个区域中引用:

const CarsModule = Loadable({
  loader: () => import(/* webpackChunkName: "CarsModule" */ '../components/CarsModule'),
  loading() {
    return <div>Loading...</div>
  }
});

const CarsModule = Loadable({
  loader: () => import(/* webpackChunkName: "CarsModule" */ '../../../../components/CarsModule'),
  loading() {
    return <div>Loading...</div>
  }
});

const CarsModule = Loadable({
  loader: () => import(/* webpackChunkName: "CarsModule" */ '../../components/CarsModule'),
  loading() {
    return <div>Loading...</div>
  }
});

const CarsModule = Loadable({
  loader: () => import(/* webpackChunkName: "CarsModule" */ '../../../../components/CarsModule'),
  loading() {
    return <div>Loading...</div>
  }
});

最终发生在dist/react-loadable.json …

我们使用反应和反应可加载.

在我们的应用程序初始化期间,我们将验证该component.preload方法是否存在于<Route />我们定义的每个方法.

如果缺少该方法,我们会显示一条警告,指出该组件应该是可加载的.

我们使用webpack 4,有没有办法自动包装组件,所以我们不必手动完成它？

这是组件的外观:

/** MyComponent.js: page component */
export default () => <div>Hello world</div>;

这是包含在可反应加载组件中的相同组件:

/**
 * preconfigured react-loadable 
 * See https://github.com/jamiebuilds/react-loadable#how-do-i-avoid-repetition)
 */
import MyLoadable from '@scopped/react-loadable';

/** loadable component */
export default MyLoadable({
  loader: () => import('./MyComponent'), /** import page component */
});

1. 我们在不同的包<Route />中声明node_modules.
2. 它可以使用<Resource />(来自react-admin)而不是声明<Route />
3. 它们不是以ESM格式分发,而是仅以CJS(CommonJS)分发.

在我的主要组件中,我创建了一个ref:

this.transfernewRef = React.createRef();

并将其分配给我的组件,该组件嵌入在路径中:

<Route path="/new" render={(props) => <TransferNew {...props} origin={this.state.origin} token={this.state.token} ref={this.transfernewRef} />}/>

我的组件TransferNew也使用react-loadable及其Loadable组件动态加载.如果我打印this.transfernewRef.current,我会得到一个LoadableComponent对象:

如何从那里访问我的组件TransferNew？我似乎找不到合适的方法来做到这一点.我只想调用TransferNew的一个函数,所以就这样:

this.transfernewRef.current.<something>.myFunction()

谢谢.

我正在使用webpack 4.6.0和babel 7.0.0构建react 16.3网络应用程序。

我的 js 资产在 https: //domain/js/app.bundle.js 下

我使用 react-loadable 将组件分成块。这些块也位于 /js/ 下，但是，react 从相对路径中获取它们，即：

https: //domain/1.app.bundle.js

这当然不起作用。

问题：如何告诉 react 或 webpack 使用绝对路径 /js/ 来获取块？

这是我的 webpack.config.json

var path = require('path');

module.exports = {
    mode: 'production',
    devtool: 'eval-source-map',
    entry: './js/src/app.js',
    watch: false,
    watchOptions: {
        aggregateTimeout: 300,
        poll: 1000,
        ignored: /node_modules/
    },
    output: {
        path: path.resolve(__dirname, "output/js"),
        filename: 'app.bundle.js',
        chunkFilename: '[name].app.bundle.js',
    },
    module: {
        rules: [
            {
                test: /\.js$/,
                loader: 'babel-loader',
                include: path.resolve(__dirname, "js/src"), …

例如，假设我们有两个具有共同导入的组件：

...
        
import Hello from './Hello'
        
class A extends Component {}

和

...
    
import Hello from './Hello'
    
class B extends Component {}

然后这些组件会异步加载到另一个组件中，如下所示：

...
    
import Loadable from 'react-loadable'
    
const AsyncA = Loadable({
    loader: () => import(/* webpackChunkName: "A" */ "./A"),
    loading: () => <div>Generic Loading Message</div>
});

const AsyncB = Loadable({
    loader: () => import(/* webpackChunkName: "B" */ "./B"),
    loading: () => <div>Generic Loading Message</div>
});

“A”和“B”块都将包含“Hello”代码，将重复的代码传送到浏览器。

在我的研究中，我确定如果在任何其他未异步加载的组件中导入“Hello”，则不会发生这种情况。在这种情况下，它被捆绑到“主”块中，而不是“A”和“B”块中。

虽然这是一种选择，但仍有很多不足之处。本指南演示了如何配置 webpack 以创建一个“通用”模块，这看起来很理想，因为它不需要任何代码重构即可达到预期效果。

但是，webpack 配置不受 CRA 限制。

这里有更好的解决方案吗？

背景： 我面临着使工具现代化并将其转换为具有 React 前端的微服务的任务。我的想法是有一个通用的顶级组件，例如包含导航和包含功能的每个微服务的组件。

方法：

• 在本地捆绑组件，使其有效地成为一个整体前端，并且前端代码仅在 repo 中分离。

我认为这将放弃不必为每次更改重新部署整个应用程序的优势

• 通过在配置文件中定义它们，从微服务中延迟加载每个组件的缩小包

使用这种方法，我可以单独对每个组件进行 webpack，然后从 Main Page 异步导入它，但可能会有巨大的开销

我阅读了基于组件的拆分与 react-loadable 和捆绑 react-router 或 webpack，但我找不到有关如何从不同的 URL 端点加载小包的信息。

问题： 是否可以自己捆绑 React 组件并从不同的 Resource-URL 导入它们，一种方法将如何？（或者 React 甚至适合那个）

我有一个通过react-loadable 加载的组件。正在加载的组件在 componentWillReceiveProps 中有一些逻辑，用于检测是否需要获取更多数据等。

当通过react loadable加载时，它调用render 1次，并且永远不会调用componentWillReceiveProps。

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

import Loading from 'components/Loading'

const LoadableThing = Loadable({
  loader: () => import('components/Thing'),
  loading: Loading,
  render(loaded, props) {
    let Component = loaded.default;
    return <Component {...props}/>
  }
});

export default LoadableThing

该组件包含在另一个组件中，该组件进行一些初始数据调用并将结果发送到Thing

有什么想法吗？它return <Component再次调用，但在这种情况下它似乎正在创建一个新组件。

我有一个正在动态加载的组件

const Summary = loadable({ 
   loader: () => import( /* webpackChunkName: "summary" */ 'app/components/summary')
   resolveModule: module => module.default,
});

问题：我的模块无法正确解析，因此组件未在屏幕上呈现。

测试：组件应该呈现

在使用 jest 进行测试时，我要么超时（使用 done 时），要么我的组件未在第一个刻度中加载，从而导致测试用例失败。