Use Webpack 4 chunk prefetch to improve performance
See original GitHub issueSince we’ve upgraded to Webpack 4, we can take advantage of Webpack 4’s chunk prefetch/preload feature to improve our performance.
Documentation: https://webpack.js.org/guides/code-splitting/#prefetching-preloading-modules
Search for \bimport\(
to find places where we use code splitting.
This is not very high on our priority list because we already use service worker to do prefetch, but it’s a simple thing to do.
Issue Analytics
- State:
- Created 5 years ago
- Comments:6 (3 by maintainers)
Top Results From Across the Web
<link rel=”prefetch/preload”> in webpack | by Tobias Koppers
webpack will prefetch chunks in the order you specified. Example: webpackPrefetch: 42 will be prefetched before webpackPrefetch: 1 which weill ...
Read more >PrefetchPlugin - webpack
Using this plugin can boost performance. Try to profile the build first to determine clever prefetching points.
Read more >Performance: Prefetch Next Pages Chunks - TK
We will create a fake web app from zero using create-react-app, set up different pages (routes), add an analyzer for webpack bundles, separate ......
Read more >Webpack 4 course – part eight. Dynamic imports with prefetch ...
Using dynamic imports with webpack will cause a new chunk to be created that will be considered an async chunk. Async chunks were...
Read more >Webpack Prefetch & Preload - Frontend Masters
Sean examines Webpack's native preload and prefetch support. This ability allows for non-critical assets to be loaded in the background during the browser's ......
Read more >
Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free
Top Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
As the docs say
So you can run
yarn build
and see the results. You can also open a PR on this repo - we have a bot that automatically run and deploy preview builds of PR branches.I have included
webpackPreload
toimport()
, as suggested on files. I am not confident on how should I test this and deliver. Should I test it usingwebpack-bundle-analyzer
? How should I proceed?