using webpack's chunking with es6

Question

I'm building a web app (react app written in es6) that is starting to get pretty big. As a result, I'm seeing unacceptably long download times for my JS file on mobile. I'm trying to wrap my mind around chunking large JS applications into chunks that are loaded on-demand. I'm using webpack, and have read this article:

https://webpack.github.io/docs/code-splitting.html

Using this article, I've split my code into app.js and vendor.js, where vendor.js contains all third party modules/plugins.

I'd like to go further and break up the app.js file into a several entry points, which would then download chunks as needed. The article above describes how to do this with CommonJS or AMD. However, I'm using ES6's native modules instead of these two options and can't find the syntax to define dependencies per file (basically, the ES6 version of .ensure() ).

My questions:

• Can I take advantage of webpack's on-demand chunking using ES6 modules, or do I need to use AMD or CommonJS to accomplish this?
• If I need to use AMD/CommonJS, how can I avoid a refactor of the entire app?
• What do I need to do to ensure dependencies will be loaded asynchronously?
• Does anyone have a link to a tutorial/guide/code example to help illustrate what I need?

Answer 1

To answer your first question: Yes. You can definitely use ES6 modules and still load them asynchronously, but you must use the require() function at whatever point you need the code instead of putting imports at the top of the module like normal.

Also keep in mind if you are using export default and using babel 6, you will have to invoke the module using Module.default (Babel 5 treats the Module itself as the default export as a short cut, but the new behaviour is more direct. More info here

there seems to be 3 potential ingredients:

1. entry points
2. chunking
3. async loading

You could set separate entry points and just include the resulting builds separately in your html. But you can also use async loading based on other things (such as scrolling to a certain point, existence of certain classes/IDs).

There is a succinct guide to these at the bottom of Pete Hunt's how-to that's much easier to make sense of than the official webpack documentation.

Jonathan Creamer also has a great walkthrough in the two parts of his Advanced Webpack series of posts.