gatsbyjs / gatsby

The best React-based framework with performance, scalability and security built in.
https://www.gatsbyjs.com
MIT License
55.26k stars 10.3k forks source link

Reach-router: click Link will have a delay before redirection #7147

Closed youngboy closed 6 years ago

youngboy commented 6 years ago

Description

As I comment in https://github.com/gatsbyjs/gatsby/issues/7068#issuecomment-411317374 , after upgrade to 2.0.0-beta.86, my gatsby-site's link have significant delay before redirection.

Note this only occur in develop mode.

Steps to reproduce

  1. you can use example of using-gatsby-image
  2. change file
    diff --git a/examples/using-gatsby-image/src/pages/traced-svg.js b/examples/using-gatsby-image/src/pages/traced-svg.js
    index a22dadc..2963bc3 100644
    --- a/examples/using-gatsby-image/src/pages/traced-svg.js
    +++ b/examples/using-gatsby-image/src/pages/traced-svg.js
    @@ -185,7 +185,7 @@ export const query = graphql`
               quality: 80
               traceSVG: { background: "#f2f8f3", color: "#d6ebd9" }
             ) {
    -              ...GatsbyImageSharpFluid_tracedSVG
    +              ...GatsbyImageSharpFluid_withWebp_tracedSVG
             }
           }
         }
  3. visit page http://localhost:8000 and test nav bar links, especially traced-svg

Expected result

no blocking redirection

Actual result

Have a delay, depend on the query size you have, more size or using withWebp heavily will increase pausing time.

My project have 50+ fluid withWebp per page, the delay would between 2~5s

Environment

  System:
    OS: macOS Sierra 10.12.6
    CPU: x64 Intel(R) Core(TM) i5-3230M CPU @ 2.60GHz
    Shell: 5.2 - /bin/zsh
  Binaries:
    Node: 10.6.0 - ~/.nvm/versions/node/v10.6.0/bin/node
    Yarn: 1.7.0 - ~/.nvm/versions/node/v10.6.0/bin/yarn
    npm: 6.1.0 - ~/.nvm/versions/node/v10.6.0/bin/npm
  npmPackages:
    gatsby: next => 2.0.0-beta.86 
    gatsby-image: next => 2.0.0-beta.7 
    gatsby-plugin-glamor: next => 2.0.0-beta.3 
    gatsby-plugin-netlify: next => 2.0.0-beta.6 
    gatsby-plugin-sharp: next => 2.0.0-beta.7 
    gatsby-plugin-typography: next => 2.2.0-beta.3 
    gatsby-source-filesystem: next => 2.0.1-beta.10 
    gatsby-transformer-sharp: next => 2.1.1-beta.6 
  npmGlobalPackages:
    gatsby-cli: 1.1.58

File contents (if changed)

gatsby-config.js: N/A package.json: N/A gatsby-node.js: N/A gatsby-browser.js: N/A gatsby-ssr.js: N/A

Chuloo commented 6 years ago

PR #7158 should fix this soon. 👍

youngboy commented 6 years ago

@Chuloo now it is fixed, thanks!