React preloading components with Lazy + Suspense












3














I'm currently using React 16 with Suspense and Lazy to code-split my codebase. Although I would like to preload components.



In my example below I got two routes. Is there a way to preload Demo as soon Prime did mount? I've tried to create another dynamic import in the componentDidMount of the Prime page, but React.lazy doesn't seem to get that that's the same file as the dynamic import below. 



import React, { lazy, Suspense } from 'react';

import { Switch, Route, withRouter } from 'react-router-dom';

import GlobalStyle from 'styles';



import Loading from 'common/Loading';

const Prime = lazy(() => import(/* webpackChunkName: "Prime" */'modules/Prime'));

const Demo = lazy(() => import(/* webpackChunkName: "Demo" */'modules/Demo'));



const App = () => (

  <main>

    <GlobalStyle />

    <Suspense fallback={<Loading>Loading...</Loading>}>

      <Switch>

        <Route path="/" component={Prime} exact />

        <Route path="/demo" component={Demo} />

      </Switch>

    </Suspense>

  </main>

);



export default withRouter(App);


So I've tried different approaches, for example with and without webpackChunkName and different ways of importing the other component in componentDidMount, as seen below. The first two approaches of importing the file in componentDidMount resulted in a Webpack error shown at the bottom of the image below. Only the third proceeded, but made the file 2.[hash].js in the image, only load after the page was visited, and not on componentDidMount



enter image description here



What am I missing here?



Code of modules/Demo.jsx:



import React from 'react';



import LogoIcon from 'vectors/logo.svg';

import PageLink from 'common/PageLink';

import Anchor from 'common/Anchor';

import CenteredSection from 'common/CenteredSection';



const Demo = () => (

  <CenteredSection variant="green">

    <LogoIcon />

    <PageLink to="/" variant="green">Go to home page</PageLink>

  </CenteredSection>

);



export default Demo;





reactjs preload dynamic-import react-16







share|improve this question
























  • Using lazy within componentDidMount of Prime won't do you any good for the preload case since it causes the component to be loaded when it is rendered. Approaches 2 and 3 seem fine at first glance, but the error you're getting for 1 and 2 makes me want to see the code for modules/Demo since it seems that something is causing a cyclic dependency.
    – Ryan C
    Nov 11 at 21:05










  • @RyanC thanks for your response. I've added the code of the Demo page. You can also view to codebase over here: github.com/JBostelaar/react-prime/tree/progressive-web-app/src I also thought the first approach couldn't work, but still I wanted to show what I've tried. 2 gives the error, 3 doesn't preload the page.
    – ronnyrr
    Nov 11 at 21:45










  • The code structure is a little different than I was expecting. I was expecting to see modules/Demo.jsx and modules/Prime.jsx. I'm not saying that what you have is "wrong", but having Demo/index.jsx instead just deviates from approaches that I have used that I can give more confident direction on.
    – Ryan C
    Nov 11 at 21:55










  • Thanks for your input, but I’m pretty sure that the issue doesn’t come from my folder structure or naming.
    – ronnyrr
    Nov 11 at 22:00
















3














I'm currently using React 16 with Suspense and Lazy to code-split my codebase. Although I would like to preload components.



In my example below I got two routes. Is there a way to preload Demo as soon Prime did mount? I've tried to create another dynamic import in the componentDidMount of the Prime page, but React.lazy doesn't seem to get that that's the same file as the dynamic import below. 



import React, { lazy, Suspense } from 'react';

import { Switch, Route, withRouter } from 'react-router-dom';

import GlobalStyle from 'styles';



import Loading from 'common/Loading';

const Prime = lazy(() => import(/* webpackChunkName: "Prime" */'modules/Prime'));

const Demo = lazy(() => import(/* webpackChunkName: "Demo" */'modules/Demo'));



const App = () => (

  <main>

    <GlobalStyle />

    <Suspense fallback={<Loading>Loading...</Loading>}>

      <Switch>

        <Route path="/" component={Prime} exact />

        <Route path="/demo" component={Demo} />

      </Switch>

    </Suspense>

  </main>

);



export default withRouter(App);


So I've tried different approaches, for example with and without webpackChunkName and different ways of importing the other component in componentDidMount, as seen below. The first two approaches of importing the file in componentDidMount resulted in a Webpack error shown at the bottom of the image below. Only the third proceeded, but made the file 2.[hash].js in the image, only load after the page was visited, and not on componentDidMount



enter image description here



What am I missing here?



Code of modules/Demo.jsx:



import React from 'react';



import LogoIcon from 'vectors/logo.svg';

import PageLink from 'common/PageLink';

import Anchor from 'common/Anchor';

import CenteredSection from 'common/CenteredSection';



const Demo = () => (

  <CenteredSection variant="green">

    <LogoIcon />

    <PageLink to="/" variant="green">Go to home page</PageLink>

  </CenteredSection>

);



export default Demo;





reactjs preload dynamic-import react-16







share|improve this question
























  • Using lazy within componentDidMount of Prime won't do you any good for the preload case since it causes the component to be loaded when it is rendered. Approaches 2 and 3 seem fine at first glance, but the error you're getting for 1 and 2 makes me want to see the code for modules/Demo since it seems that something is causing a cyclic dependency.
    – Ryan C
    Nov 11 at 21:05










  • @RyanC thanks for your response. I've added the code of the Demo page. You can also view to codebase over here: github.com/JBostelaar/react-prime/tree/progressive-web-app/src I also thought the first approach couldn't work, but still I wanted to show what I've tried. 2 gives the error, 3 doesn't preload the page.
    – ronnyrr
    Nov 11 at 21:45










  • The code structure is a little different than I was expecting. I was expecting to see modules/Demo.jsx and modules/Prime.jsx. I'm not saying that what you have is "wrong", but having Demo/index.jsx instead just deviates from approaches that I have used that I can give more confident direction on.
    – Ryan C
    Nov 11 at 21:55










  • Thanks for your input, but I’m pretty sure that the issue doesn’t come from my folder structure or naming.
    – ronnyrr
    Nov 11 at 22:00














3












3








3







I'm currently using React 16 with Suspense and Lazy to code-split my codebase. Although I would like to preload components.



In my example below I got two routes. Is there a way to preload Demo as soon Prime did mount? I've tried to create another dynamic import in the componentDidMount of the Prime page, but React.lazy doesn't seem to get that that's the same file as the dynamic import below. 



import React, { lazy, Suspense } from 'react';

import { Switch, Route, withRouter } from 'react-router-dom';

import GlobalStyle from 'styles';



import Loading from 'common/Loading';

const Prime = lazy(() => import(/* webpackChunkName: "Prime" */'modules/Prime'));

const Demo = lazy(() => import(/* webpackChunkName: "Demo" */'modules/Demo'));



const App = () => (

  <main>

    <GlobalStyle />

    <Suspense fallback={<Loading>Loading...</Loading>}>

      <Switch>

        <Route path="/" component={Prime} exact />

        <Route path="/demo" component={Demo} />

      </Switch>

    </Suspense>

  </main>

);



export default withRouter(App);


So I've tried different approaches, for example with and without webpackChunkName and different ways of importing the other component in componentDidMount, as seen below. The first two approaches of importing the file in componentDidMount resulted in a Webpack error shown at the bottom of the image below. Only the third proceeded, but made the file 2.[hash].js in the image, only load after the page was visited, and not on componentDidMount



enter image description here



What am I missing here?



Code of modules/Demo.jsx:



import React from 'react';



import LogoIcon from 'vectors/logo.svg';

import PageLink from 'common/PageLink';

import Anchor from 'common/Anchor';

import CenteredSection from 'common/CenteredSection';



const Demo = () => (

  <CenteredSection variant="green">

    <LogoIcon />

    <PageLink to="/" variant="green">Go to home page</PageLink>

  </CenteredSection>

);



export default Demo;





reactjs preload dynamic-import react-16







share|improve this question















I'm currently using React 16 with Suspense and Lazy to code-split my codebase. Although I would like to preload components.



In my example below I got two routes. Is there a way to preload Demo as soon Prime did mount? I've tried to create another dynamic import in the componentDidMount of the Prime page, but React.lazy doesn't seem to get that that's the same file as the dynamic import below. 



import React, { lazy, Suspense } from 'react';

import { Switch, Route, withRouter } from 'react-router-dom';

import GlobalStyle from 'styles';



import Loading from 'common/Loading';

const Prime = lazy(() => import(/* webpackChunkName: "Prime" */'modules/Prime'));

const Demo = lazy(() => import(/* webpackChunkName: "Demo" */'modules/Demo'));



const App = () => (

  <main>

    <GlobalStyle />

    <Suspense fallback={<Loading>Loading...</Loading>}>

      <Switch>

        <Route path="/" component={Prime} exact />

        <Route path="/demo" component={Demo} />

      </Switch>

    </Suspense>

  </main>

);



export default withRouter(App);


So I've tried different approaches, for example with and without webpackChunkName and different ways of importing the other component in componentDidMount, as seen below. The first two approaches of importing the file in componentDidMount resulted in a Webpack error shown at the bottom of the image below. Only the third proceeded, but made the file 2.[hash].js in the image, only load after the page was visited, and not on componentDidMount



enter image description here



What am I missing here?



Code of modules/Demo.jsx:



import React from 'react';



import LogoIcon from 'vectors/logo.svg';

import PageLink from 'common/PageLink';

import Anchor from 'common/Anchor';

import CenteredSection from 'common/CenteredSection';



const Demo = () => (

  <CenteredSection variant="green">

    <LogoIcon />

    <PageLink to="/" variant="green">Go to home page</PageLink>

  </CenteredSection>

);



export default Demo;





reactjs preload dynamic-import react-16




reactjs preload dynamic-import react-16






share|improve this question















share|improve this question













share|improve this question




share|improve this question








edited Nov 11 at 21:43

























asked Nov 11 at 20:21









ronnyrr

406929




406929












  • Using lazy within componentDidMount of Prime won't do you any good for the preload case since it causes the component to be loaded when it is rendered. Approaches 2 and 3 seem fine at first glance, but the error you're getting for 1 and 2 makes me want to see the code for modules/Demo since it seems that something is causing a cyclic dependency.
    – Ryan C
    Nov 11 at 21:05










  • @RyanC thanks for your response. I've added the code of the Demo page. You can also view to codebase over here: github.com/JBostelaar/react-prime/tree/progressive-web-app/src I also thought the first approach couldn't work, but still I wanted to show what I've tried. 2 gives the error, 3 doesn't preload the page.
    – ronnyrr
    Nov 11 at 21:45










  • The code structure is a little different than I was expecting. I was expecting to see modules/Demo.jsx and modules/Prime.jsx. I'm not saying that what you have is "wrong", but having Demo/index.jsx instead just deviates from approaches that I have used that I can give more confident direction on.
    – Ryan C
    Nov 11 at 21:55










  • Thanks for your input, but I’m pretty sure that the issue doesn’t come from my folder structure or naming.
    – ronnyrr
    Nov 11 at 22:00


















  • Using lazy within componentDidMount of Prime won't do you any good for the preload case since it causes the component to be loaded when it is rendered. Approaches 2 and 3 seem fine at first glance, but the error you're getting for 1 and 2 makes me want to see the code for modules/Demo since it seems that something is causing a cyclic dependency.
    – Ryan C
    Nov 11 at 21:05










  • @RyanC thanks for your response. I've added the code of the Demo page. You can also view to codebase over here: github.com/JBostelaar/react-prime/tree/progressive-web-app/src I also thought the first approach couldn't work, but still I wanted to show what I've tried. 2 gives the error, 3 doesn't preload the page.
    – ronnyrr
    Nov 11 at 21:45










  • The code structure is a little different than I was expecting. I was expecting to see modules/Demo.jsx and modules/Prime.jsx. I'm not saying that what you have is "wrong", but having Demo/index.jsx instead just deviates from approaches that I have used that I can give more confident direction on.
    – Ryan C
    Nov 11 at 21:55










  • Thanks for your input, but I’m pretty sure that the issue doesn’t come from my folder structure or naming.
    – ronnyrr
    Nov 11 at 22:00
















Using lazy within componentDidMount of Prime won't do you any good for the preload case since it causes the component to be loaded when it is rendered. Approaches 2 and 3 seem fine at first glance, but the error you're getting for 1 and 2 makes me want to see the code for modules/Demo since it seems that something is causing a cyclic dependency.
– Ryan C
Nov 11 at 21:05




Using lazy within componentDidMount of Prime won't do you any good for the preload case since it causes the component to be loaded when it is rendered. Approaches 2 and 3 seem fine at first glance, but the error you're getting for 1 and 2 makes me want to see the code for modules/Demo since it seems that something is causing a cyclic dependency.
– Ryan C
Nov 11 at 21:05












@RyanC thanks for your response. I've added the code of the Demo page. You can also view to codebase over here: github.com/JBostelaar/react-prime/tree/progressive-web-app/src I also thought the first approach couldn't work, but still I wanted to show what I've tried. 2 gives the error, 3 doesn't preload the page.
– ronnyrr
Nov 11 at 21:45




@RyanC thanks for your response. I've added the code of the Demo page. You can also view to codebase over here: github.com/JBostelaar/react-prime/tree/progressive-web-app/src I also thought the first approach couldn't work, but still I wanted to show what I've tried. 2 gives the error, 3 doesn't preload the page.
– ronnyrr
Nov 11 at 21:45












The code structure is a little different than I was expecting. I was expecting to see modules/Demo.jsx and modules/Prime.jsx. I'm not saying that what you have is "wrong", but having Demo/index.jsx instead just deviates from approaches that I have used that I can give more confident direction on.
– Ryan C
Nov 11 at 21:55




The code structure is a little different than I was expecting. I was expecting to see modules/Demo.jsx and modules/Prime.jsx. I'm not saying that what you have is "wrong", but having Demo/index.jsx instead just deviates from approaches that I have used that I can give more confident direction on.
– Ryan C
Nov 11 at 21:55












Thanks for your input, but I’m pretty sure that the issue doesn’t come from my folder structure or naming.
– ronnyrr
Nov 11 at 22:00




Thanks for your input, but I’m pretty sure that the issue doesn’t come from my folder structure or naming.
– ronnyrr
Nov 11 at 22:00












1 Answer
1






active

oldest

votes


















0














Not sure how much help this will be, but here is a code sandbox that works (Demo gets loaded by componentDidMount). It is a considerably simplified version of your code using create-react-app for the config. Perhaps you can take this as a starting point and morph it gradually closer to your app to see what causes the dynamic import to no longer work as desired.






share|improve this answer





















    Your Answer






    StackExchange.ifUsing("editor", function () {
    StackExchange.using("externalEditor", function () {
    StackExchange.using("snippets", function () {
    StackExchange.snippets.init();
    });
    });
    }, "code-snippets");

    StackExchange.ready(function() {
    var channelOptions = {
    tags: "".split(" "),
    id: "1"
    };
    initTagRenderer("".split(" "), "".split(" "), channelOptions);

    StackExchange.using("externalEditor", function() {
    // Have to fire editor after snippets, if snippets enabled
    if (StackExchange.settings.snippets.snippetsEnabled) {
    StackExchange.using("snippets", function() {
    createEditor();
    });
    }
    else {
    createEditor();
    }
    });

    function createEditor() {
    StackExchange.prepareEditor({
    heartbeatType: 'answer',
    autoActivateHeartbeat: false,
    convertImagesToLinks: true,
    noModals: true,
    showLowRepImageUploadWarning: true,
    reputationToPostImages: 10,
    bindNavPrevention: true,
    postfix: "",
    imageUploader: {
    brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
    contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
    allowUrls: true
    },
    onDemand: true,
    discardSelector: ".discard-answer"
    ,immediatelyShowMarkdownHelp:true
    });


    }
    });














    draft saved

    draft discarded


















    StackExchange.ready(
    function () {
    StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53252861%2freact-preloading-components-with-lazy-suspense%23new-answer', 'question_page');
    }
    );

    Post as a guest















    Required, but never shown

























    1 Answer
    1






    active

    oldest

    votes








    1 Answer
    1






    active

    oldest

    votes









    active

    oldest

    votes






    active

    oldest

    votes









    0














    Not sure how much help this will be, but here is a code sandbox that works (Demo gets loaded by componentDidMount). It is a considerably simplified version of your code using create-react-app for the config. Perhaps you can take this as a starting point and morph it gradually closer to your app to see what causes the dynamic import to no longer work as desired.






    share|improve this answer


























      0














      Not sure how much help this will be, but here is a code sandbox that works (Demo gets loaded by componentDidMount). It is a considerably simplified version of your code using create-react-app for the config. Perhaps you can take this as a starting point and morph it gradually closer to your app to see what causes the dynamic import to no longer work as desired.






      share|improve this answer
























        0












        0








        0






        Not sure how much help this will be, but here is a code sandbox that works (Demo gets loaded by componentDidMount). It is a considerably simplified version of your code using create-react-app for the config. Perhaps you can take this as a starting point and morph it gradually closer to your app to see what causes the dynamic import to no longer work as desired.






        share|improve this answer












        Not sure how much help this will be, but here is a code sandbox that works (Demo gets loaded by componentDidMount). It is a considerably simplified version of your code using create-react-app for the config. Perhaps you can take this as a starting point and morph it gradually closer to your app to see what causes the dynamic import to no longer work as desired.







        share|improve this answer












        share|improve this answer



        share|improve this answer










        answered Nov 12 at 1:03









        Ryan C

        1,163210




        1,163210






























            draft saved

            draft discarded




















































            Thanks for contributing an answer to Stack Overflow!


            • Please be sure to answer the question. Provide details and share your research!

            But avoid …



            • Asking for help, clarification, or responding to other answers.

            • Making statements based on opinion; back them up with references or personal experience.


            To learn more, see our tips on writing great answers.





            Some of your past answers have not been well-received, and you're in danger of being blocked from answering.


            Please pay close attention to the following guidance:


            • Please be sure to answer the question. Provide details and share your research!

            But avoid …



            • Asking for help, clarification, or responding to other answers.

            • Making statements based on opinion; back them up with references or personal experience.


            To learn more, see our tips on writing great answers.




            draft saved


            draft discarded














            StackExchange.ready(
            function () {
            StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53252861%2freact-preloading-components-with-lazy-suspense%23new-answer', 'question_page');
            }
            );

            Post as a guest















            Required, but never shown





















































            Required, but never shown














            Required, but never shown












            Required, but never shown







            Required, but never shown

































            Required, but never shown














            Required, but never shown












            Required, but never shown







            Required, but never shown







            -

            Popular posts from this blog

            Coverage of Google Street View

            Image
            Coverage of Google Street View From Wikipedia, the free encyclopedia Jump to navigation Jump to search Countries and dependencies with:    mostly full coverage    partial coverage    full or partial coverage planned (official)    full or partial coverage planned (unofficial)    views of selected businesses and/or tourist attractions only    views of private businesses only    no current or planned coverage Google Street View was first introduced in the United States on May 25, 2007, and until November 26, 2008, featured camera icon markers, each representing at least one major city or area (such as a park), and usually the other nearby cities, towns, suburbs, and parks. Many areas that had coverage were represented by icons. Contents 1 Key additions 2 Timeline of introductions 2.1 2007 2.2 2008 2.3 2009 2.4 2010 2.5 2011 2.6 2012 2.7 2013 2.8 2014 2.9 20...
            Read more

            Full-time equivalent

            Image
            Full-time equivalent From Wikipedia, the free encyclopedia Jump to navigation Jump to search Full-time equivalent ( FTE ) or whole time equivalent ( WTE ) is a unit that indicates the workload of an employed person (or student) in a way that makes workloads or class loads comparable [1] across various contexts. FTE is often used to measure a worker's or student's involvement in a project, or to track cost reductions in an organization. An FTE of 1.0 is equivalent to a full-time worker or student, while an FTE of 0.5 signals half of a full work or school load. [2] Contents 1 U.S. Federal Government 2 In education 2.1 Example 3 Notes 4 References U.S. Federal Government [ edit ] In the U.S. Federal Government, FTE is defined by the Government Accountability Office (GAO) as the number of total hours worked divided by the maximum number of compensable hours in a full-time schedule as...
            Read more

            Surfing

            Image
            Surfing From Wikipedia, the free encyclopedia Jump to navigation Jump to search This article is about stand-up ocean surfing. For other uses, see Surfing (disambiguation). "Surfer" redirects here. For other uses, see Surfer (disambiguation). Surfing A surfer at the Cayucos Pier, Cayucos, California Highest governing body World Surf League (WSL) Characteristics Mixed gender Yes, separate competitions Presence Country or region Worldwide Olympic Will debut in 2020 Surfing on the Gold Coast, Queensland, Australia Surfing is a surface water sport in which the wave rider, referred to as a surfer, rides on the forward or deep face of a moving wave, which usually carries the surfer towards the shore. Waves suitable for surfing are primarily found in the ocean, but can also be found in lakes or rivers in the form of a standing wave or tidal bore. However, surfers can also utilize artifi...
            Read more