Using webpack chunking with es6

Question

I am creating a web application (an interaction application written in es6) that is starting to get pretty big. As a result, I see an unacceptably long download time for my JS file on a mobile device. I am trying to ponder how many large JS applications are in pieces that load on demand. I use webpack and read this article:

https://webpack.imtqy.com/docs/code-splitting.html

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

I would like to go further and split the app.js file into several entry points, which will then load the pieces as needed. The above article describes how to do this using CommonJS or AMD. However, I use my own ES6 modules instead of these two parameters and cannot find the syntax for defining dependencies for each file (mainly ES6 version of .ensure ()).

My questions:

• Can I take advantage of webpack on-demand chunking using ES6 modules or do I need to use AMD or CommonJS to do this?
• If I need to use AMD / CommonJS, how can I avoid refactoring the entire application?
• What do I need to do to ensure that dependencies will load asynchronously?
• Does anyone have a link to an example tutorial / guide / code 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 should use the require() function at any point where you need the code, instead of putting the import at the top of the module, as usual.

Also remember, if you use export default and use babel 6, you will have to call the module using Module.default (Babel 5 considers Module itself as the default export as short, but the new behavior is more direct. More details here

There seem to be 3 potential ingredients:

• entry points
• lumps
• Download async

You can set separate entry points and just include the resulting assemblies separately in your html. But you can also use asynchronous loading based on other things (for example, scrolling to a certain point, the presence of certain classes / identifiers).

There is a short guide to them at the bottom of Pete Hunt on how to do this , which is much easier to understand than the official webpack documentation.

Jonathan Smemer also did a great job in two parts of his Advanced Webpack series.

Answer 2

ES6 modules are implemented by extending JS with a special syntax that cannot be easily extended in javascript in the way that the webpack extension for AMD / CommonJS is required.

However, you can use CommonsChunkPlugin to specify chunks for code separation from the outside. You will have to include these pieces manually, though.

Example from the documentation:

Divide your code into provider and application.

 entry: { vendor: ["jquery", "other-lib"], app: "./entry" } new CommonsChunkPlugin({ name: "vendor", // filename: "vendor.js" // (Give the chunk a different name) minChunks: Infinity, // (with more entries, this ensures that no other module // goes into the vendor chunk) }) <script src="vendor.js" charset="utf-8"></script> <script src="app.js" charset="utf-8"></script>