Skip to content
Merged
Changes from all commits
Commits
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
25 changes: 25 additions & 0 deletions src/content/guides/code-splitting.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -34,6 +34,7 @@ contributors:
- Adarah
- atesgoral
- snitin315
- artem-malko
related:
- title: <link rel="prefetch/preload" /> in webpack
url: https://medium.com/webpack/link-rel-prefetch-preload-in-webpack-51a52358f84c
Expand Down Expand Up @@ -425,6 +426,30 @@ When a page which uses the `ChartComponent` is requested, the charting-library-c

T> Using `webpackPreload` incorrectly can actually hurt performance, so be careful when using it.

Sometimes you need to have your own control over preload. For example, preload of any dynamic import can be done via async script. This can be useful in case of streamming server side rendering.

```js
const lazyComp = () =>
import('DynamicComponent').catch((error) => {
// Do something with the error.
// For example, we can retry the request in case of any net error
});
```

If the script loading will fail before webpack starts loading of that script by itself (webpack just creates a script tag to load its code, if that script is not on a page), that catch handler won't start till [chunkLoadTimeout](/configuration/output/#outputchunkloadtimeout) is not passed. This behavior can be unexpected. But it's explainable — webpack can not throw any error, cause webpack doesn't know, that script failed. Webpack will add onerror handler to the script right after the error has happen.

To prevent such problem you can add your own onerror handler, which removes the script in case of any error:

```html
<script
src="https://example.com/dist/dynamicComponent.js"
async
onerror="this.remove()"
></script>
```

In that case, errored script will be removed. Webpack will create its own script and any error will be processed without any timeouts.

## Bundle Analysis

Once you start splitting your code, it can be useful to analyze the output to check where modules have ended up. The [official analyze tool](https://github.com/webpack/analyse) is a good place to start. There are some other community-supported options out there as well:
Expand Down