0

我正在使用 react-loadable v4.0.4 和 webpack v3.5.1。

这是我的代码，

import Dashboard from '../../scenes/dashboard/dashboard';    
import ReactLoadable from 'react-loadable';
...

const yoPath = 'src/components/scenes/dashboard/dashboard';

const DashboardWrap = ReactLoadable({
    loading: Dashboard,
    loader: () => {
        return new Promise((resolve, reject) =>
            require.ensure(
               [],
               (require) =>  resolve(require(yoPath)),
               (error) => reject(error),
               'dashboardChunk'
            )
         )
    }
});

并使用 react-router-dom v4.1.2，我将 Route 设置如下，

<Switch>
...
<Route exact path='/dashboard' component={DashboardWrap} />
...
</Switch>

我能够为名为dashboardChunk的各个组件构建块。

但是在加载该组件时，我遇到了以下问题。

在此处输入图像描述

在控制台中，

在此处输入图像描述

和块文件，

在此处输入图像描述

如果我做错了什么，请告诉我。

4

2 回答 2

4

我基本上想做代码拆分，因为我刚刚完成了以下操作并且效果很好。

我创建了一个通用组件（包装器组件），如下所示，

import React, { Component } from 'react';

class Async extends Component {
    componentWillMount = () => {
        this.props.load.then((Component) => {
            this.Component = Component
            this.forceUpdate();
        });
    }

    render = () => (
        this.Component ? <this.Component.default /> : null
    )
}

export default Async;

然后我使用了上面的组件如下，

export const AniDemo = () => <Async load={import(/* webpackChunkName: "aniDemoChunk" */ "../../scenes/ani-demo/AniDemo.js")} />
export const Dashboard = () => <Async load={import(/* webpackChunkName: "dashboardChunk" */ "../../scenes/dashboard/Dashboard.js")} />

并使用上述方法，我对路线进行了如下更改，

<Route exact path="/ani-demo" component={AniDemo} />
<Route exact path="/dashboard" component={Dashboard} />

借助我所做的上述更改，我能够使用我在 import 语句中的注释中提到的名称正确创建块，即分别为aniDemoChunk.js和dashboardChunk.js。

并且这些块仅在调用相应的组件时才加载，即仅当调用或请求 AniDemo 组件时才在浏览器上加载 aniDemoChunk.js。仪表板组件也同样如此。

注意：如果有人收到错误 re:Unexpected token import。所以要支持import()语法，只需替换 import toSystem.import()或使用babel-plugin-syntax-dynamic-import。

于 2017-09-07T20:36:06.523 回答
1

Webpack 必须能够在静态分析期间确定导入的路径。如果将参数传递给 require，这是不可能的。

最好将实际路径放入require.ensure，即

require.ensure(
  ['src/components/scenes/dashboard/dashboard']
  require => 
  resolve(require('src/components/scenes/dashboard/dashboard').default)
  error => reject(error),
  'dashboardChunk'
)

或使用更新的动态导入语法。使用较新的语法，您可以将上述内容简化为：

Loadable({ 
  loader: () => import(/* webpackChunkName: "dashboardChunk" */ 'src/components/scenes/dashboard/dashboard')
  loading: MyLoader
})

此外，loading参数应该是在异步加载发生时显示的组件，例如某种加载动画。

于 2017-08-23T06:59:17.733 回答