使用create-react-app和react-loadable进行代码拆分不起作用

Question

I've followed various articles, particularly these...

• Code Splitting in Create React App
• react-loadable/README.md

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

> my-app@0.1.0 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

Answer 1

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.