Skip to content

docs(guides): clarify some caveats about dynamic import manual preloa… #5960

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.

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

Merged
Merged
Changes from 1 commit
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
18 changes: 18 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,23 @@ 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:

```js
<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