After reading this post, I tried to use react-code-splitting to splite my JavaScript bundle.
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 Dev Server Error
It seems like just a syntax problem?
export default class PageRouter extends React.Component {
render() {
^
return (...);
}
}
webpack: Failed to compile.
I can't really tell what the root issue is but, I suspect that perhaps you are missing some babel plugins. Check out Paragons. It uses React Loadable. You can cross check the webpack config and examine the usage:
Start from:
in routes.js.