question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Use Webpack 4 chunk prefetch to improve performance

See original GitHub issue

Since 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:open
  • Created 5 years ago
  • Comments:6 (3 by maintainers)

github_iconTop GitHub Comments

1reaction
ZhangYiJiangcommented, Oct 30, 2018

As the docs say

This will result in <link rel="prefetch" href="login-modal-chunk.js"> being appended in the head of the page

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.

0reactions
masihtamsoycommented, Oct 30, 2018

I have included webpackPreload to import(), as suggested on files. I am not confident on how should I test this and deliver. Should I test it using webpack-bundle-analyzer? How should I proceed?

Read more comments on GitHub >

github_iconTop 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 >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found