webpack-flush-chunks | server-to-client chunk discovery | Frontend Framework library

This plugin allows for complex code splitting to be leveraged for improved caching and less code duplication! Below are two examples of well tested splitting configurations. If you experience any issues with bespoke optimization configurations, we would love to hear about it!. Before this update, developers were limited to a single chunk strategy. What the strategy did was give developers a similar chunk method to CommonsChunkPlugin that was used in Webpack 3. We did not support AggressiveSplittingPlugin. Now you can use many flexible code splitting methods, like the one below. Webpack encourages aggressive code splitting methods, so we jumped on the bandwagon and did the upgrades. Just like before, we use the chunkNames generated - then we can look within the Webpack 4 chunk graph and resolve any other dependencies or automatically generated chunks that consist as part of the initial chunk. We can load the nested chunks in the correct order as required and if many chunks share a common chunk, we ensure they load in the correct order, so that vendor chunks are always available to all chunks depending on them without creating any duplicate requests or chunk calls. The code has been cracked for while now for Server Side Rendering and Code-Splitting individually. Accomplishing both simultaneously has been an impossibility without jumping through major hoops or using a framework, specifically Next.js. Our tools are for "power users" that prefer the frameworkless approach. Webpack Flush Chunks is essentially the backend to universal rendering components like React Universal Component. It works with any "universal" component/module that buffers a list of moduleIds or chunkNames evaluated.