What to do with a huge React script file?

Question

JavaScript

So it goes.
At the output of the project, the main script file weighs almost 3MB - well, this is complete crap.
Is that how it should be? Will the user have to load 3 meters of scripts when loading the site? And if he has caches disabled?

Answer 1

Is this already a file after "breaking into pieces" (for Google - code splitting)?
Load what a certain route needs and it will be better.
Googling will not give a complete picture right away, but will gradually gather.
You will need to use getComponent from React-router, and then webpack 2 will do almost everything by itself...
Looks like this:

function def(promise) {
  return promise.then(cmp => {
    console.info('Dynamic loaded by route: ', cmp.default.displayName) // для тестирования можете логировать имя компонента
    return cmp.default
  })
}

...
<Route path='/signin' getComponent={() => def(import('../containers/SigninContainer'))} />
...