reactjs - 反应代码拆分不起作用

Question

阅读这篇文章后，我尝试使用react-code-splitting来拆分我的 JavaScript 包。

Webpack Version: 3.10.10

PageRouter.js

import Async from "react-code-splitting";
import React from "react";
// import Home from "pages/home/Home";
// ...

const Home = () => <Async load={import("pages/home/Home")} />

export default class PageRouter extends React.Component {
    render() {
        return(
            <Router history={browserHistory}>
                <Route exact path="/" component={Home} />
            </Router>
        );
    }
}

Webpack 开发服务器错误

这似乎只是一个语法问题？

export default class PageRouter extends React.Component {
    render() {
             ^
        return (...);
    }
}
webpack: Failed to compile.

Answer 1

我无法真正说出根本问题是什么，但是我怀疑您可能缺少一些 babel 插件。看看Paragons。它使用 React 可加载。您可以交叉检查webpack 配置并检查使用情况：

从...开始：

export const CodeSplitPageLoadable = createLoadable('./demo/components/CodeSplitPage')

在routes.js中。