Skip to content

Commit 88dbc97

Browse files
Update README.md
Adding additional notes about the update to the README
1 parent 39a5f0e commit 88dbc97

File tree

1 file changed

+55
-1
lines changed

1 file changed

+55
-1
lines changed

README.md

Lines changed: 55 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,6 @@
1010
# Webpack Flush Chunks
1111

1212

13-
1413
<p align="center">
1514
<a href="https://www.npmjs.com/package/webpack-flush-chunks">
1615
<img src="https://img.shields.io/npm/v/webpack-flush-chunks.svg" alt="Version" />
@@ -41,6 +40,9 @@
4140
🍾🍾🍾 <a href="https://github.com/faceyspacey/universal-demo">GIT CLONE LOCAL DEMO</a> 🚀🚀🚀
4241
</p>
4342

43+
> **Now supports Webpack 4 aggressive code splitting**
44+
We have updated `webpack-flush-chunks` to now support more complex code splitting! `webpack-flush-chunks` enables developers to leverage smarter and less wasteful chunking methods avaliable to developers inside of Webpack.
45+
4446
<p align="center">
4547
<img src="./poo.jpg" height="350" />
4648
</p>
@@ -71,6 +73,58 @@ res.send(`
7173
`)
7274
```
7375

76+
## Webpack 4 Aggressive Code Splitting Support
77+
78+
This plugin allows for complex code splitting to be leveraged for improved caching and less code duplication!
79+
80+
#### Before:
81+
Before this update, developers were limited to a single chunk stratagey. What the stratagey did was give developers a similar chunk method to `CommonsChunkPlugin` that was used in Webpack 3. We did not support `AggressiveSplittingPlugin`
82+
83+
```js
84+
optimization: {
85+
runtimeChunk: {
86+
name: 'bootstrap'
87+
},
88+
splitChunks: {
89+
chunks: 'initial',
90+
cacheGroups: {
91+
vendors: {
92+
test: /[\\/]node_modules[\\/]/,
93+
name: 'vendor'
94+
}
95+
}
96+
}
97+
},
98+
```
99+
#### After:
100+
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.
101+
102+
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.
103+
104+
```js
105+
optimization: {
106+
splitChunks: {
107+
chunks: 'async',
108+
minSize: 30000,
109+
minChunks: 1,
110+
maxAsyncRequests: 5,
111+
maxInitialRequests: 3,
112+
automaticNameDelimiter: '~',
113+
name: true,
114+
cacheGroups: {
115+
vendors: {
116+
test: /[\\/]node_modules[\\/]/,
117+
priority: -10
118+
},
119+
default: {
120+
minChunks: 2,
121+
priority: -20,
122+
reuseExistingChunk: true
123+
}
124+
}
125+
}
126+
}
127+
```
74128
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.
75129

76130
*Webpack Flush Chunks* is essentially the backend to universal rendering components like [React Universal Component](https://github.com/faceyspacey/react-universal-component). It works with any "universal" component/module that buffers a list of `moduleIds` or `chunkNames` evaluated.

0 commit comments

Comments
 (0)