Simply put, chunking is the method of taking large files and splitting them apart into smaller chunks. We can do this part easily by adding this to our webpack.config.js file after our plugins node:
optimization: {
splitChunks: {
chunks: 'all',
}
}
Now, go ahead and build; it'll be a little happier:
Built at: 06/14/2020 3:46:38 PM
Asset Size Chunks Chunk Names
index.html 321 bytes [emitted]
main.bundle.js 1.74 KiB 0 [emitted] main
vendors~main.bundle.js 262 KiB 1 [emitted] [big] vendors~main
Entrypoint main [big] = vendors~main.bundle.js main.bundle.js
It's still going to complain, unfortunately. We shaved 1.74 KB into a separate file, but we still have our vendors bundle sitting at 262 KB. If you look in dist, you'll now see the two js files as well as two <script> tags in the HTML.
The reason it's not splitting...
