Skip to content

Update Code Splitting - Libraries #1276

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
wants to merge 1 commit into from
Closed

Update Code Splitting - Libraries #1276

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 2 additions & 2 deletions content/guides/code-splitting-libraries.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,7 @@ A typical application uses third party libraries for framework/functionality nee

Bundling application code with third party code would be inefficient. This is because the browser can cache asset files based on the cache header and files can be cached without needing to call the cdn again if its contents don't change. To take advantage of this, we want to keep the hash of the vendor files constant regardless of application code changes.

We can do this only when we separate the bundles for vendor and application code.
We can do this only when we separate the bundles for vendor and application code. We walk you through with an example file that uses one of the popular dependencies. We show how the typical bundling process happens as we bundle our code with and without a helpful plugin -- `CommonsChunkPlugin` -- that we introduce in the walk-through.
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I would drop this part for now as it feels a bit wordy -- we'll make sure everything's clear as we review and go through all the guides. #1273 is the start of the guides cleanup/review process.


Let's consider a sample application that uses [momentjs](https://www.npmjs.com/package/moment), a commonly used time formatting library.

Expand Down Expand Up @@ -86,7 +86,7 @@ It is for this reason, that we will need to use the [CommonsChunkPlugin](/plugin

## `CommonsChunkPlugin`

This is a pretty complex plugin. It fundamentally allows us to extract all the common modules from different bundles and add them to the common bundle. If a common bundle does not exist, then it creates a new one.
This is a pretty complex plugin. It fundamentally allows us to extract all the common modules from different bundles and adds them to a "common" bundle. If a common bundle does not exist, then it creates a new one.
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I like this change but I think the whole sentence should be rewritten:

This plugin allows us to extract all duplicate (or "common") modules from different bundles into a "common" bundle. This "common" bundle can either be one that already exists (e.g. an entry bundle) or an entirely new one.

dropping that first bit about it being complex.


We can modify our webpack config file to use the `CommonsChunkPlugin` as follows

Expand Down