feat: add documentation for SplitChunksPlugin and deprecation warning… #1955

jeremenichelli · 2018-03-26T00:19:29Z

Sorry for the noise, the content for this branch was already approved here: #1863 but because of some issues on rebasing I needed to create a new PR to make sure I'm not making regression on content after the next branch merge.

Solves #1812

… on CommonChunks

jeremenichelli · 2018-03-27T00:13:39Z

Hey @skipjack, Travis is throwing an error: API rate limit exceeded for 35.224.112.202, did we exceeded some quota around the service? 🤔

montogeek · 2018-03-27T07:28:56Z

@jeremenichelli It is exceeded every a few hours, something to fix in Infrastructure

jeremenichelli · 2018-03-27T09:00:32Z

@montogeek should we just trigger a new build for the branch?

montogeek · 2018-03-27T09:24:14Z

@jeremenichelli I am fixing it for once and all #1963

skipjack

Overall, I would say aside from some grammar issues this was pretty intuitive (both the docs and the new API).

We don't really have a standard for the plugin docs yet but I tried to provide some general grammar and content related feedback. I also think this might be mixing the new configuration options in with the plugin docs too much.

Correct me if I'm wrong but I think some config can be done via optimization.splitChunks and optimization.runtimeChunk without needing to include the plugin manually but more advanced functionality can be achieved by using the plugin directly.

If this is the case, I'd recommend moving the config parts to the /configuration section somewhere and only keeping the plugin-specific bits in SplitChunksPlugin.md.

skipjack · 2018-03-28T02:22:19Z

src/content/plugins/split-chunks-plugin.md

+    url: https://medium.com/webpack/webpack-4-code-splitting-chunk-graph-and-the-splitchunks-optimization-be739a861366
+---
+
+Originally in webpack, chunks (and modules imported inside them) were connected by a parent-child relationship in the internal webpack graph.


I would rephrase as (merged with the next lines as well):

By default, chunks (and the modules inside them) are connected by direct parent-child relationships in the dependency graph. However, there are instances where a dependency may be duplicated across chunks. Previously, the CommonsChunkPlugin was use to dedupe these dependencies. In v4, the optimization.splitChunks and optimization.runtimeChunk configuration options provide a more intuitive interface.

Here is how the new flow works...

I think that stating that they are (present tense) linked by parent-child relationship is confusing/wrong since this has completely changed on the core of the package.

skipjack · 2018-03-28T02:24:44Z

src/content/plugins/split-chunks-plugin.md

+This connection didn't allow to further optimizations and resulted into more downloaded code.
+
+webpack v4 removes the `CommonsChunkPlugin` in favor of `optimization.splitChunks` and `optimize.runtimeChunk` options. Here is how the new flow works.
+


We typically use two line breaks between h2 sections. We should really automate this via remark and/or prettier along with various other markdown guidelines.

skipjack · 2018-03-28T02:28:58Z

src/content/plugins/split-chunks-plugin.md

+* Condition 4: Doesn't affect request at initial page load
+
+Putting the content of `helpers` into each chunk will result into its code being downloaded twice. By using a separate chunk this will only happen once. We pay the cost of an additional request, which could be considered a tradeoff. That's why there is a minimum size of 30kb.
+


Same two line breaks nit (just helps with readability when editing).

skipjack · 2018-03-28T02:31:59Z

src/content/plugins/split-chunks-plugin.md

+
+## Defaults
+
+Out of the box `SplitChunksPlugin` should work great for most users.


Is it included out of the box or only when certain flags/config are present? Or do you just mean when included with no options, like so:

plugins: [ new SplitChunksPlugin() ]

skipjack · 2018-03-28T02:32:51Z

src/content/plugins/split-chunks-plugin.md

+
+Out of the box `SplitChunksPlugin` should work great for most users.
+
+By default it only affects on-demand chunks because changing initial chunks would affect the script tags the HTML file should include to run the project.


Maybe explain why changing those initial script tags is a problem?

Honestly, I think that the sentence is pretty clear by itself.

skipjack · 2018-03-28T02:35:10Z

src/content/plugins/split-chunks-plugin.md

+}
+```
+
+W> This downloads more code than neccessary.


s/neccessary/necessary

Also maybe elaborate this warning a bit...

This will probably yield an unnecessarily large bundle as many applications use a bunch of node_modules. It's typically better to extract and load your core frameworks on initial load, and let other dependencies be chunked out and loaded dynamically later on.

skipjack · 2018-03-28T02:39:47Z

src/content/plugins/split-chunks-plugin.md

+
+### Split Chunks: Example 1
+
+Create a `commons` chunk, which includes all code shared between entrypoints.


s/entrypoints/entry points

phun-ky · 2018-03-28T06:15:33Z

Nice work, this is very much needed for all webpack4 users!

But, I can't see that you have included all the options for splitChunks, for example:

automaticNameDelimiter (defaults to: ~)

All webpack options is in: schemas\WebpackOptions.json, and the default options are set here: lib\WebpackOptionsDefaulter.js

Specially automaticNameDelimiter was important to us, because we have a WAF (NAXSI) that had a ruled triggered for the usage of the tilde(~) character, resulting in a 406 Not Acceptable on the server when the chunk is requested: vendor~moduleA~moduleB.js.

ooflorent · 2018-03-28T09:43:42Z

src/content/plugins/commons-chunk-plugin.md

-The `CommonsChunkPlugin` is an opt-in feature that creates a separate file (known as a chunk), consisting of common modules shared between multiple entry points. By separating common modules from bundles, the resulting chunked file can be loaded once initially, and stored in cache for later use. This results in pagespeed optimizations as the browser can quickly serve the shared code from cache, rather than being forced to load a larger bundle whenever a new page is visited.
+The `CommonsChunkPlugin` is an opt-in feature that creates a separate file (known as a chunk), consisting of common modules shared between multiple entry points.
+
+W> The CommonsChunkPlugin has been deprecated in webpack v4 legato. To learn how chunks are treated in the latest version, check out the [SplitChunksPlugin](/plugins/split-chunks-plugin/).


It is not deprecated: it has been removed.

ooflorent · 2018-03-28T09:46:37Z

src/content/plugins/split-chunks-plugin.md

+
+## `optimization.runtimeChunk`
+
+Setting `optimization.runtimeChunk` to `true` adds an additonal chunk to each entrypoint containing only the runtime.


Maybe you could also talk about optimization.runtimeChunk="single" which creates a single runtime chunk shared by all entries.

Do we know what's the default value and behavior when this is not set?

DevSide · 2018-03-29T10:23:30Z

src/content/plugins/split-chunks-plugin.md

+splitChunks: {
+	cacheGroups: {
+		commons: {
+			test: /[\\/]node_modules[\\/],


test: /[\\/]node_modules[\\/]/,

jeremenichelli · 2018-03-30T14:33:10Z

Everyone here, I've updated the branch with your feedback. Feel free to take a look at it, if it is I think we should merge it already, information about this plugin should have been there from day one in my humble opinion.

jeremenichelli · 2018-03-30T14:46:35Z

Some things might not be covered on the first version, I'm tracking the missing stuff here: #1956

lencioni · 2018-03-31T00:45:08Z

src/content/plugins/split-chunks-plugin.md

+	minChunks: 1,
+	maxAsyncRequests: 5,
+	maxInitialRequests: 3,
+  automaticNameDelimiter: '~',


I think the indentation is wrong here. It looks like everything else is using tabs, but this line uses spaces.

Thanks for the catch!

skipjack

LGTM, thanks for making the updates. The only thing I'm still a little unclear on is what bits are webpack config options and what's supposed to be specified as options of the SplitChunksPlugin. Totally understand the need to get this merged though so maybe that can be clarified later on.

jeremenichelli · 2018-04-03T07:33:42Z

Yes I agree, that is not clear enough. I will add that to the issue. I will take another look at this month and make sure everything is covered and content is clearer.

feat: add documentation for SplitChunksPlugin and deprecation warning…

a60994f

… on CommonChunks

jeremenichelli requested review from skipjack and sokra March 26, 2018 00:25

montogeek added Plugins New Release labels Mar 26, 2018

jeremenichelli requested a review from TheLarkInn March 26, 2018 23:46

fix: repeated headers

80509e4

jeremenichelli mentioned this pull request Mar 26, 2018

Update commons-chunk-plugin.md #1925

Closed

3 tasks

jeremenichelli mentioned this pull request Mar 27, 2018

Improvements on SplitChunks article #1956

Closed

skipjack requested changes Mar 28, 2018

View reviewed changes

ooflorent reviewed Mar 28, 2018

View reviewed changes

DevSide reviewed Mar 29, 2018

View reviewed changes

jeremenichelli added 2 commits March 30, 2018 02:18

fix: more accurate warnings and typo fixes

9e91154

feat: add automaticNameDelimiter information

9907ea8

lencioni reviewed Mar 31, 2018

View reviewed changes

jeremenichelli added 4 commits April 1, 2018 13:53

fix: indentation on code sample

77742bc

fix: alexignore all generated plugins readmes

6c02a92

fix: add extra linebreak before h2

a6355de

chore: rephrase introduction on split chunks

c1350e3

skipjack approved these changes Apr 3, 2018

View reviewed changes

Merge branch 'master' into split-chunks-plugin-article

c4b21c1

jeremenichelli merged commit 7c8c30f into master Apr 5, 2018

EugeneHlushko mentioned this pull request Apr 9, 2018

cli(init): webpack4 ready webpack/webpack-cli#356

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat: add documentation for SplitChunksPlugin and deprecation warning… #1955

feat: add documentation for SplitChunksPlugin and deprecation warning… #1955

jeremenichelli commented Mar 26, 2018 •

edited

Loading

jeremenichelli commented Mar 27, 2018

montogeek commented Mar 27, 2018

jeremenichelli commented Mar 27, 2018

montogeek commented Mar 27, 2018

skipjack left a comment •

edited

Loading

skipjack Mar 28, 2018

jeremenichelli Apr 2, 2018

skipjack Mar 28, 2018

skipjack Mar 28, 2018

skipjack Mar 28, 2018

skipjack Mar 28, 2018

jeremenichelli Apr 2, 2018

skipjack Mar 28, 2018

skipjack Mar 28, 2018

skipjack Mar 28, 2018

phun-ky commented Mar 28, 2018 •

edited

Loading

ooflorent Mar 28, 2018

ooflorent Mar 28, 2018

jeremenichelli Mar 29, 2018

DevSide Mar 29, 2018

jeremenichelli commented Mar 30, 2018

jeremenichelli commented Mar 30, 2018

lencioni Mar 31, 2018

jeremenichelli Mar 31, 2018

skipjack left a comment

jeremenichelli commented Apr 3, 2018 via email •

edited

Loading

		This connection didn't allow to further optimizations and resulted into more downloaded code.

		webpack v4 removes the `CommonsChunkPlugin` in favor of `optimization.splitChunks` and `optimize.runtimeChunk` options. Here is how the new flow works.

		* Condition 4: Doesn't affect request at initial page load

		Putting the content of `helpers` into each chunk will result into its code being downloaded twice. By using a separate chunk this will only happen once. We pay the cost of an additional request, which could be considered a tradeoff. That's why there is a minimum size of 30kb.


		## Defaults

		Out of the box `SplitChunksPlugin` should work great for most users.


		Out of the box `SplitChunksPlugin` should work great for most users.

		By default it only affects on-demand chunks because changing initial chunks would affect the script tags the HTML file should include to run the project.


		### Split Chunks: Example 1

		Create a `commons` chunk, which includes all code shared between entrypoints.


		## `optimization.runtimeChunk`

		Setting `optimization.runtimeChunk` to `true` adds an additonal chunk to each entrypoint containing only the runtime.

feat: add documentation for SplitChunksPlugin and deprecation warning… #1955

feat: add documentation for SplitChunksPlugin and deprecation warning… #1955

Conversation

jeremenichelli commented Mar 26, 2018 • edited Loading

jeremenichelli commented Mar 27, 2018

montogeek commented Mar 27, 2018

jeremenichelli commented Mar 27, 2018

montogeek commented Mar 27, 2018

skipjack left a comment • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

phun-ky commented Mar 28, 2018 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

jeremenichelli commented Mar 30, 2018

jeremenichelli commented Mar 30, 2018

Choose a reason for hiding this comment

Choose a reason for hiding this comment

skipjack left a comment

Choose a reason for hiding this comment

jeremenichelli commented Apr 3, 2018 via email • edited Loading

jeremenichelli commented Mar 26, 2018 •

edited

Loading

skipjack left a comment •

edited

Loading

phun-ky commented Mar 28, 2018 •

edited

Loading

jeremenichelli commented Apr 3, 2018 via email •

edited

Loading