using webpack's chunking with es6
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:
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:
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.
ES6 modules are implemented by augmenting JS with special syntax which can not be easily extended within javascript in the way webpack extends require for AMD/CommonJS.
However, you can use CommonsChunkPlugin to externally specify chunks for code-splitting. You will have to include these chunks manually though.
Example from Documentation:
Split your code into vendor 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>
下一篇: 使用webpack与es6分块