You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
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.
46
+
44
47
<palign="center">
45
48
<imgsrc="./poo.jpg"height="350" />
46
49
</p>
@@ -52,7 +55,7 @@ import { flushChunkNames } from 'react-universal-component/server'
This plugin allows for complex code splitting to be leveraged for improved caching and less code duplication!
79
+
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!
80
+
81
+
#### Before:
82
+
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`
83
+
84
+
```js
85
+
optimization: {
86
+
runtimeChunk: {
87
+
name:'bootstrap'
88
+
},
89
+
splitChunks: {
90
+
chunks:'initial',
91
+
cacheGroups: {
92
+
vendors: {
93
+
test:/[\\/]node_modules[\\/]/,
94
+
name:'vendor'
95
+
}
96
+
}
97
+
}
98
+
},
99
+
```
100
+
#### After:
101
+
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.
102
+
103
+
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.
104
+
105
+
```js
106
+
optimization: {
107
+
splitChunks: {
108
+
chunks:'async',
109
+
minSize:30000,
110
+
minChunks:1,
111
+
maxAsyncRequests:5,
112
+
maxInitialRequests:3,
113
+
automaticNameDelimiter:'~',
114
+
name:true,
115
+
cacheGroups: {
116
+
vendors: {
117
+
test:/[\\/]node_modules[\\/]/,
118
+
priority:-10
119
+
},
120
+
default: {
121
+
minChunks:2,
122
+
priority:-20,
123
+
reuseExistingChunk:true
124
+
}
125
+
}
126
+
}
127
+
}
128
+
```
74
129
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.
75
130
76
131
*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.
-***[Babel Plugin Universal Import](https://github.com/faceyspacey/babel-plugin-universal-import)*** is used to make `react-universal-component` as frictionless as possible. It removes the need to provide additional options to insure synchronous rendering happens on the server and on the client on initial load. These packages aren't required, but usage as frictionless as possible.
103
158
104
-
-***[Extract Css Chunks Webpack Plugin](https://github.com/faceyspacey/extract-css-chunks-webpack-plugin)*** is another companion package made to complete the CSS side of the code-splitting dream. It uses the `cssHash` string to asynchronously request CSS assets as part of a "dual import" when calling `import()`.
159
+
-***[Extract Css Chunks Webpack Plugin](https://github.com/faceyspacey/extract-css-chunks-webpack-plugin)*** is another companion package made to complete the CSS side of the code-splitting dream. Its also a standalone plugin thats great for codesplitting css, with **built-in HMR**
160
+
105
161
106
162
163
+
~~*If you like to move fast, git clone the [universal-demo](https://github.com/faceyspacey/universal-demo)*.~~ We are working on a Webpack 4 demo
107
164
108
-
*If you like to move fast, git clone the [universal-demo](https://github.com/faceyspacey/universal-demo)*.
109
165
110
166
## How It Works
111
167
@@ -142,14 +198,6 @@ Before we examine how to use `flushChunks/flushFiles`, let's take a look at the
- **chunkNames** - ***array of chunks flushed from `react-universal-component`
228
274
229
-
- **before** - ***array of named entries that come BEFORE your dynamic chunks:*** A typical
275
+
- **before** - ***array of named entries that come BEFORE your dynamic chunks:*** ~~A typical
230
276
pattern is to create a `vendor` chunk. A better strategy is to create a `vendor` and a `bootstrap` chunk. The "bootstrap"
231
277
chunk is a name provided to the `CommonsChunkPlugin` which has no entry point specified for it. The plugin by default removes
232
278
webpack bootstrap code from the named `vendor` common chunk and puts it in the `bootstrap` chunk. This is a common pattern because
233
279
the webpack bootstrap code has info about the chunks/modules used in your bundle and is likely to change, which means to cache
234
280
your `vendor` chunk you need to extract the bootstrap code into its own small chunk file. If this is new to you, don't worry.
235
-
[Below](#webpack-configuration) you will find examples for exactly how to specify your Webpack config. Lastly, you do not need to
236
-
provide this option if you have a `bootstrap` chunk, or `vendor` chunk or both, as those are the defaults.
281
+
[Below](#webpack-configuration) you will find examples for exactly how to specify your Webpack config. Lastly, you do not need to provide this option if you have a `bootstrap` chunk, or `vendor` chunk or both, as those are the defaults.~~
282
+
283
+
Mostly related to Webpack 2&3. It is still very useful if you need to load a specific chunk name **first**`webpack-flush-chunks` now can rely on a better chunk graph provided by Webpack 4- chunks are loaded in the correct order with more autonomy.
237
284
238
285
-**after**-***array of named entries that come AFTER your dynamic chunks:***
239
-
Similar to `before`, `after` contains an array of chunks you want to come after the dynamic chunks that
286
+
~~Similar to `before`, `after` contains an array of chunks you want to come after the dynamic chunks that
240
287
your universal component flushes. Typically you have just a `main` chunk, and if that's the case, you can ignore this option,
241
-
as that's the default.
288
+
as that's the default.~~
242
289
243
290
-**outputPath**-***absolute path to the directory containing your client build:*** This is only needed if serving css
244
291
embedded in your served response HTML, rather than links to external stylesheets. I.e. if you are using the `Css` and `css` values in the `return API` described in the next section. It's needed to determine where in the file system to find the CSS that needs to be extract into
names: ['bootstrap'], // notice there is no "bootstrap" named entry
322
-
filename: '[name].js',
323
-
minChunks: Infinity
324
-
})
366
+
new ExtractCssChunks(),
325
367
...
326
368
```
327
369
328
-
- The `CommonsChunkPlugin`with a `"bootstrap"` entry ***which does NOTin fact exist (notice there is no `entry`for it)*** insures that a separate chunk is created just for webpack bootstrap code.
329
-
This moves the webpack bootstrap code out of your `main` entry chunk so that it can also run before your dynamic
> i.e. this will get you all files corresponding to flushed "dynamic" chunks, not `main`, `vendor`, etc.
433
+
> i.e. this will get you all files corresponding to flushed "dynamic" chunks.
396
434
397
435
The only thing different with the API is that it has a `filter` option, and that it doesn't have `before`, `after` and `outputPath`options. The`filter` can be a file extension as a string, a regex, or a function:`filter: file => file.endsWith('js')`.
0 commit comments