使用react-loadable进行代码拆分会出现错误：无法找到模块＆＃34;。＆＃34;

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，我按如下方式设置了Route，

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

我可以使用名称 dashboardChunk 为相应组件构建块。

但在加载该组件时，我得到的问题如下。

在控制台中，

和chunkfile，

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

Answer 1

我基本上想要进行代码分割，因为我刚刚完成了以下操作并且工作正常。

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

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 。

这些块仅在调用相应组件时加载，即只有在调用或请求AniDemo组件时，才会在浏览器上加载aniDemoChunk.js。同样适用于仪表板组件。

注意：如果有人收到错误：意外令牌导入。那么要支持import()语法，只需将导入替换为System.import()或其他使用babel-plugin-syntax-dynamic-import。

Answer 2

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参数应该是在异步加载发生时显示的组件，例如某种加载动画。