2

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
5
  • Do you get a different result if you just use L instead of your cool Loadable abstraction? I think webpack can't pick up such dynamic usage of Loadable.
    – Tholle
    Jul 3, 2018 at 10:38
  • 1
    @Tholle I've updated to just use the standard 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/…
    – dvdsmpsn
    Jul 3, 2018 at 10:46
  • why using /* webpackChunkName: "auth" */ ?
    – Midhun G S
    Jul 3, 2018 at 11:05
  • You might have to eject from create-react-app and modify the webpack config to enable code splitting. Some advanced use cases are not easy to do by default with create-react-app. Also note that there are changes in how code splitting is configured between the latest versions of webpack.
    – Håken Lid
    Jul 3, 2018 at 11:10
  • That's to name the different chunked files so that the have a meaningful name. It doesn't affect things when chunking does work.
    – dvdsmpsn
    Jul 3, 2018 at 11:10

1 Answer 1

10

OK, I worked this out eventually...

I had a file at /src/containers/index.js which contained the following line:

export { default as AuthenticateContainer } from './Authenticate/AuthenticateContainer'

This allowed me to import my AuthenticateContainer using the following shorthand:

import { AuthenticateContainer } from '../containers'

rather than the slightly longer

import AuthenticateContainer from '../containers/Authenticate/AuthenticateContainer'

However, leaving that line in /src/containers/index.js also prevents code splitting as the AuthenticateContainer logic has already been bundled into main.js before we even try async loading.

Remove the line and code splitting works as expected.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.