2

I am using code splitting for my enterprise application as I want the first time user experience to be seamless. I bumped into an issue where I want to PRTEFETCH a Component (Page 2) before it can be displayed. Example: I am on Home Page -> Then I click Page 1 LINK which has the Page 2 Link.

My requirement is that I want to PREFETCH Page 2 Component when I land on Page 1, but what I observed is that the Code I wrote in Page 1 as below for prefetching Page 2 is getting loaded when I load the site i.e. when Home Page is loaded.

const page2ComponentPromise = import("./Page2"); const Page2Component = lazy(() => page2ComponentPromise);

My questions are as follows :

  1. Is webpack doing this in the background ? I think it is.

  2. Can we control this behavior and instruct webpack when to START PREFETCHING as I would like to take this approach for intuitive paths in my web app ? How ?

  3. Have I done something wrong ?

  4. Is my query valid ? Meaning can we achieve this behavior and how ?

Please guide me through some reference URL's. Thanks !

Gauri Padbidri
  • 371
  • 4
  • 15

1 Answers1

0

this article explained how lazy loading works and how to implement eager loading. I hope it will help you as well.

Nikita Prus
  • 191
  • 1
  • 5