Code Splitting with react-loadable gives Error : Cannot find module "."

Question

我正在使用 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，我设置的路由如下，

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

我能够为名为 dashboardChunk.

的各个组件构建块

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

在控制台中，

和块文件，

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

Answer 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'
)

或使用较新的 dynamic import 语法。使用较新的语法，您可以将上面的内容简化为：

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

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

Answer 2

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

我创建了一个公共组件（包装器组件）如下，

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

借助我所做的上述更改，我能够使用我在 评论中提到的名称正确创建块内部导入语句 即 aniDemoChunk.js 和 dashboardChunk.js 分别。

并且这些块仅在调用相应组件时才加载即aniDemoChunk.js仅在调用或请求AniDemo组件时才在浏览器上加载。同样分别用于仪表板组件。

注意： 如果有人收到 错误 re:Unexpected 令牌导入。 所以要支持 import() 语法将导入替换为 System.import() 或使用 babel-plugin-syntax-dynamic-import.

Code Splitting with react-loadable gives Error : Cannot find module "."

Code Splitting with react-loadable gives Error : Cannot find module "."

javascript

reactjs

webpack

code-splitting

async-components