I've followed various articles, particularly these...
Here's a example of the code splitting -- getRoutes()
is called in a component's render method:
// Edit: commented out original `Loadable` abstraction to use standard `Loadable`
import React from 'react'
// import L from 'react-loadable'
import Loadable from 'react-loadable'
import { BrowserRouter, Route, Switch } from 'react-router-dom'
import { LoadingIndicator } from '../components'
// const Loadable = opts =>
// L({
// loading: LoadingIndicator,
// delay: 300,
// ...opts
// })
const AuthenticateContainer = Loadable({
loading: LoadingIndicator,
loader: () => import(/* webpackChunkName: "auth" */ '../containers/Authenticate')
})
...
export default function getRoutes (isAuthed, browserHistory) {
return (
<BrowserRouter>
<Switch>
<Route path="/auth" component={AuthenticateContainer} />
...
</Switch>
</BrowserRouter>
)
}
..but my code is not splitting:
$ npm run build
> [email protected] build /path/to/my-app
> bash -ac '. .env.production; react-scripts build'
Creating an optimized production build...
File sizes after gzip:
854.84 KB (+4 B) build/static/js/main.1aa92927.js
17.53 KB build/static/css/main.36b767d9.css
The bundle size is significantly larger than recommended.
Consider reducing it with code splitting: https: // goo.gl/9VhYWB
You can also analyze the project dependencies: https: // goo.gl/LeUzfb
The project was built assuming it is hosted at the server root.
You can control this with the homepage field in your package.json.
For example, add this to build it for GitHub Pages:
"homepage" : "http: // myname.github.io/myapp",
The build folder is ready to be deployed.
You may serve it with a static server:
yarn global add serve
serve -s build
Find out more about deployment here:
http: // bit.ly/2vY88Kr
As you can see, the build result is not chunked, but a single JS file.
What am I doing wrong?
Current versions used:
react-scripts: 1.1.4
react-router-dom: 4.3.1
webpack: 3.8.1
npm: 6.1.0
L
instead of your coolLoadable
abstraction? I think webpack can't pick up such dynamic usage of Loadable.Loadable
and yes, I get the same result. Also, it's the same single JS file if I use an async component as described here: serverless-stack.com/chapters/…/* webpackChunkName: "auth" */
?