docs(guides): update code-splitting against webpack5 #4173
Conversation
|
This pull request is being automatically deployed with Vercel (learn more). 🔍 Inspect: https://vercel.com/webpack-docs/webpack-js-org/n2sgne0qf |
| @@ -40,15 +40,15 @@ related: | |||
| url: https://developer.mozilla.org/en-US/docs/Web/HTML/Preloading_content | |||
| --- | |||
|
|
|||
| T> This guide extends the examples provided in [Getting Started](/guides/getting-started) and [Output Management](/guides/output-management). Please make sure you are at least familiar with the examples provided in them. | |||
| T> This guide extends the example provided in [Getting Started](/guides/getting-started). Please make sure you are at least familiar with the example provided there and the [Output Management](/guides/output-management/) chapter. | |||
There was a problem hiding this comment.
It's very confusing to extend example of this guide from two sources. Hence I limit it to one.
| - Prevent Duplication: Use the [`SplitChunksPlugin`](/plugins/split-chunks-plugin/) to dedupe and split chunks. | ||
| - Dynamic Imports: Split code via inline function calls within modules. | ||
| - __Entry Points__: Manually split code using [`entry`](/configuration/entry-context) configuration. | ||
| - __Prevent Duplication__: Use [Entry dependencies](/configuration/entry-context/#dependencies) or [`SplitChunksPlugin`](/plugins/split-chunks-plugin/) to dedupe and split chunks. |
There was a problem hiding this comment.
We have two sections below instead of one.
|
|
||
| ### `SplitChunksPlugin` | ||
|
|
||
| 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: | ||
|
|
||
| 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/). |
There was a problem hiding this comment.
There's no CommonsChunkPlugin in this page anymore.
| ``` | ||
|
|
||
| As `import()` returns a promise, it can be used with [`async` functions](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/async_function). However, this requires using a pre-processor like Babel and the [Syntax Dynamic Import Babel Plugin](https://babeljs.io/docs/plugins/syntax-dynamic-import/#installation). Here's how it would simplify the code: | ||
| As `import()` returns a promise, it can be used with [`async` functions](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/async_function). Here's how it would simplify the code: |
There was a problem hiding this comment.
Webpack 5 supports async modules https://webpack.js.org/blog/2020-10-10-webpack-5-release/#async-modules, no need to configure babel in my test.
|
|
||
| Simple prefetch example can be having a `HomePage` component, which renders a `LoginButton` component which then on demand loads a `LoginModal` component after being clicked. | ||
|
|
||
| __LoginButton.js__ | ||
|
|
||
| ```js | ||
| //... | ||
| import(/* webpackPrefetch: true */ 'LoginModal'); | ||
| import(/* webpackPrefetch: true */ './path/to/LoginModal.js'); |
There was a problem hiding this comment.
Relative path makes more sense here.
|
Have no idea why Vercel Deployment keeps failing. I was able to run |
Related code demo
chenxsan/webpack-demo#6
TODO