From c81b09b040e841adb9a53c88ba8484e3292efe6d Mon Sep 17 00:00:00 2001 From: EugeneHlushko Date: Tue, 7 Aug 2018 13:14:52 +0300 Subject: [PATCH 1/2] docs(guides) updates to code splitting guide --- src/content/guides/code-splitting.md | 14 +++++--------- 1 file changed, 5 insertions(+), 9 deletions(-) diff --git a/src/content/guides/code-splitting.md b/src/content/guides/code-splitting.md index dcd814d779a0..b7a07b24d743 100644 --- a/src/content/guides/code-splitting.md +++ b/src/content/guides/code-splitting.md @@ -41,7 +41,7 @@ Code splitting is one of the most compelling features of webpack. This feature a There are three general approaches to code splitting available: - Entry Points: Manually split code using [`entry`](/configuration/entry-context) configuration. -- Prevent Duplication: Use the [`SplitChunks`](/plugins/split-chunks-plugin/) to dedupe and split chunks. +- Prevent Duplication: Use the [`SplitChunksPlugin`](/plugins/split-chunks-plugin/) to dedupe and split chunks. - Dynamic Imports: Split code via inline function calls within modules. @@ -113,16 +113,14 @@ As mentioned there are some pitfalls to this approach: - If there are any duplicated modules between entry chunks they will be included in both bundles. - It isn't as flexible and can't be used to dynamically split code with the core application logic. -The first of these two points is definitely an issue for our example, as `lodash` is also imported within `./src/index.js` and will thus be duplicated in both bundles. Let's remove this duplication by using the `SplitChunks` plugin. +The first of these two points is definitely an issue for our example, as `lodash` is also imported within `./src/index.js` and will thus be duplicated in both bundles. Let's remove this duplication by using the [`SplitChunksPlugin`](/plugins/split-chunks-plugin/). ## Prevent Duplication -W> The CommonsChunkPlugin has been removed in webpack v4 legato. To learn how chunks are treated in the latest version, check out the [SplitChunksPlugin](/plugins/split-chunks-plugin/). +The [`SplitChunksPlugin`](/plugins/split-chunks-plugin/) allows us to extract common dependencies into an existing entry chunk or an entirely new chunk. Let's use this to de-duplicate the `lodash` dependency from the previous example: -The [`SplitChunks`](/plugins/split-chunks-plugin/) allows us to extract common dependencies into an existing entry chunk or an entirely new chunk. Let's use this to de-duplicate the `lodash` dependency from the previous example: - -W> The CommonsChunkPlugin has been removed in webpack v4 legato. To learn how chunks are treated in the latest version, check out the [SplitChunksPlugin](/plugins/split-chunks-plugin/). +W> The `CommonsChunkPlugin` has been removed in webpack v4 legato. To learn how chunks are treated in the latest version, check out the [`SplitChunksPlugin`](/plugins/split-chunks-plugin/). __webpack.config.js__ @@ -147,7 +145,7 @@ __webpack.config.js__ }; ``` -With the [`SplitChunks`](/plugins/split-chunks-plugin/) in place, we should now see the duplicate dependency removed from our `index.bundle.js` and `another.bundle.js`. The plugin should notice that we've separated `lodash` out to a separate chunk and remove the dead weight from our main bundle. Let's do an `npm run build` to see if it worked: +With the [`optimization.SplitChunks`](/configuration/optimization/#optimization-splitchunks) configuration option in place, we should now see the duplicate dependency removed from our `index.bundle.js` and `another.bundle.js`. The plugin should notice that we've separated `lodash` out to a separate chunk and remove the dead weight from our main bundle. Let's do an `npm run build` to see if it worked: ``` bash Hash: ac2ac6042ebb4f20ee54 @@ -172,8 +170,6 @@ Here are some other useful plugins and loaders provided by the community for spl - [`bundle-loader`](/loaders/bundle-loader): Used to split code and lazy load the resulting bundles. - [`promise-loader`](https://github.com/gaearon/promise-loader): Similar to the `bundle-loader` but uses promises. -T> The [`CommonsChunkPlugin`](/plugins/commons-chunk-plugin) is also used to split vendor modules from core application code using [explicit vendor chunks](/plugins/commons-chunk-plugin/#explicit-vendor-chunk). - ## Dynamic Imports From 83347e036d39f99c5d27dac7af442e40c2ef799d Mon Sep 17 00:00:00 2001 From: EugeneHlushko Date: Mon, 20 Aug 2018 18:54:23 +0300 Subject: [PATCH 2/2] docs(guides) Split chunks link update --- src/content/guides/code-splitting.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/content/guides/code-splitting.md b/src/content/guides/code-splitting.md index b7a07b24d743..c2f42b510965 100644 --- a/src/content/guides/code-splitting.md +++ b/src/content/guides/code-splitting.md @@ -145,7 +145,7 @@ __webpack.config.js__ }; ``` -With the [`optimization.SplitChunks`](/configuration/optimization/#optimization-splitchunks) configuration option in place, we should now see the duplicate dependency removed from our `index.bundle.js` and `another.bundle.js`. The plugin should notice that we've separated `lodash` out to a separate chunk and remove the dead weight from our main bundle. Let's do an `npm run build` to see if it worked: +With the [`optimization.splitChunks`](/plugins/split-chunks-plugin/#optimization-splitchunks) configuration option in place, we should now see the duplicate dependency removed from our `index.bundle.js` and `another.bundle.js`. The plugin should notice that we've separated `lodash` out to a separate chunk and remove the dead weight from our main bundle. Let's do an `npm run build` to see if it worked: ``` bash Hash: ac2ac6042ebb4f20ee54