Enable split chunk plugin in development

[KyleAMathews]

I disabled it for no good reason and webpack maintainers say it's faster for webpack to do HMR with chunks + it'd be faster to load dev sites if you don't have to load all code up front.

The main work to do I think is to make both dev and prod use async-requires.js from .cache as that'll automatically create splits in development. Also update loading resources for development so similar to production.

This will speedup loading the development site as there'll be far less JS loaded initially for larger sites. E.g. gatsbyjs.com loads 8mbs of JS right now.

[kumaran-14]

I would like to do this.

[KyleAMathews]

@kumaran-14 awesome! Give it a go!

[kumaran-14]

@KyleAMathews Sure. How should I proceed on this? Currently I'm going through contributing docs.

[Manoz]

@kumaran-14 there's a good documentation on how to contribute here :)

[KyleAMathews]

This is a fairly tricky issue. You'll need to look at how production-app.js works vs app.js and change app.js to use the async-requires.js file.

[kumaran-14]

@Manoz Thanks, I looked into that.
@KyleAMathews I looked under 'gatsby/packages/gatsby/cache-dir/' (master branch) and could not find async-requires.js file. However production-app.js uses async-requires.js

[kumaran-14]

@KyleAMathews is this the change required in app.js ?

import asyncRequires from "./async-requires"
loader.addDevRequires(asyncRequires)

[KyleAMathews]

That's the start :-) there'll be more work to change how dev the selects components to render

[gatsbot[bot]]

Old issues will be closed after 30 days of inactivity. This issue has been quiet for 20 days and is being marked as stale. Reply here or add the label "not stale" to keep this issue open!

[gatsbot[bot]]

This issue is being closed due to inactivity. Is this a mistake? Please re-open this issue or create a new issue.