search

gatsbyjs / gatsby

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

All pages bundle the same js - code split per page is not working #38464

Open oorestisime opened 1 year ago

oorestisime commented 1 year ago

Preliminary Checks

Description

We have a big gatsby app. We have several pages and some client based paths. Reading this https://www.gatsbyjs.com/docs/how-code-splitting-works i understand that each page should load its own JS and css and not a single bundle between pages.

In our case everything is bundled in one single app-[chunk] file. The webpack json stats file:

{
  "name": "build-javascript",
  "namedChunkGroups": {
    "app": {
      "name": "app",
      "assets": [
        {
          "name": "webpack-runtime-71270b0f627017b4ec77.js",
          "size": 10885
        },
        {
          "name": "styles.32ffb7b18302d3134303.css",
          "size": 847101
        },
        {
          "name": "framework-70dbeb8966d02f5004c6.js",
          "size": 210930
        },
        {
          "name": "app-133183b18582f05942c6.js",
          "size": 1491452
        }
      ],
      "filteredAssets": 0,
      "assetsSize": 2560368,
      "filteredAuxiliaryAssets": 70,
      "auxiliaryAssetsSize": 11986748
    },
    "component---src-pages-404-js": {
      "name": "component---src-pages-404-js",
      "assets": [
        {
          "name": "styles.32ffb7b18302d3134303.css",
          "size": 847101
        },
        {
          "name": "2e28e1e1cb66a6bada116c186c56aadcd428a97f-c2554632b58c6d63fdc8.js",
          "size": 22165
        },
        {
          "name": "component---src-pages-404-js-d2dddf19bbae6d1eec09.js",
          "size": 10117
        }
      ],
      "filteredAssets": 0,
      "assetsSize": 879383,
      "filteredAuxiliaryAssets": 27,
      "auxiliaryAssetsSize": 596902
    },
    "component---src-pages-about-js": {
      "name": "component---src-pages-about-js",
      "assets": [
        {
          "name": "styles.32ffb7b18302d3134303.css",
          "size": 847101
        },
        {
          "name": "2e28e1e1cb66a6bada116c186c56aadcd428a97f-c2554632b58c6d63fdc8.js",
          "size": 22165
        },
        {
          "name": "component---src-pages-about-js-090aed8e3f9baaaa874a.js",
          "size": 33965
        }
      ],
      "filteredAssets": 0,
      "assetsSize": 903231,
      "filteredAuxiliaryAssets": 27,
      "auxiliaryAssetsSize": 668404
    },
    "component---src-pages-index-js": {
      "name": "component---src-pages-index-js",
      "assets": [
        {
          "name": "styles.32ffb7b18302d3134303.css",
          "size": 847101
        },
        {
          "name": "2e28e1e1cb66a6bada116c186c56aadcd428a97f-c2554632b58c6d63fdc8.js",
          "size": 22165
        },
        {
          "name": "component---src-pages-index-js-d3fd21c2a69c172d44f3.js",
          "size": 39410
        }
      ],
      "filteredAssets": 0,
      "assetsSize": 908676,
      "filteredAuxiliaryAssets": 27,
      "auxiliaryAssetsSize": 679128
    },
....
...
}

To my understanding this seems correct to me!

The chunk json also seems correct to me:

{
  "app": [
    "/app-133183b18582f05942c6.js"
  ],
  "component---src-pages-404-js": [
    "/component---src-pages-404-js-d2dddf19bbae6d1eec09.js"
  ],
  "component---src-pages-about-js": [
    "/component---src-pages-about-js-090aed8e3f9baaaa874a.js"
  ],
  "component---src-pages-ambassadors-js": [
    "/component---src-pages-ambassadors-js-3fc64b71cc6db683a44f.js"
  ],
  "component---src-pages-app-js": [
    "/component---src-pages-app-js-b307ef4057f86fd4a1c2.js"
  ],
  "component---src-pages-index-js": [
    "/component---src-pages-index-js-d3fd21c2a69c172d44f3.js"
  ],
...
...
}

But for example the index html page loads at the end of the body:

<script
            id="gatsby-chunk-mapping"
          >
            window.___chunkMapping="{\"app\":[\"/app-133183b18582f05942c6.js\"],\"component---src-pages-404-js\":[\"/component---src-pages-404-js-d2dddf19bbae6d1eec09.js\"],\"component---src-pages-about-js\":[\"/component---src-pages-about-js-090aed8e3f9baaaa874a.js\"],\"component---src-pages-ambassadors-js\":[\"/component---src-pages-ambassadors-js-3fc64b71cc6db683a44f.js\"],\"component---src-pages-app-js\":[\"/component---src-pages-app-js-b307ef4057f86fd4a1c2.js\"],\"component---src-pages-applicants-js\":[\"/component---src-pages-applicants-js-35dc4f5afb3704db4d2b.js\"],\"component---src-pages-apply-js\":[\"/component---src-pages-apply-js-99e8ff0499390c419d8f.js\"],\"component---src-pages-auth-logout-js\":[\"/component---src-pages-auth-logout-js-b566d44f7d9fea83aad7.js\"],\"component---src-pages-blog-editorial-policy-tsx\":[\"/component---src-pages-blog-editorial-policy-tsx-b271705315cd4550a765.js\"],\"component---src-pages-careers-js\":[\"/component---src-pages-careers-js-c4f6e89730876fe13020.js\"],\"component---src-pages-contact-js\":[\"/component---src-pages-contact-js-739e822261600e891a92.js\"],\"component---src-pages-data-request-verification-verification-code-tsx\":[\"/component---src-pages-data-request-verification-verification-code-tsx-ff3376e50cbd677b44cd.js\"],\"component---src-pages-data-requests-tsx\":[\"/component---src-pages-data-requests-tsx-c9e999ce40b222905800.js\"],\"component---src-pages-dev-auth-exchange-js\":[\"/component---src-pages-dev-auth-exchange-js-fc7d991e1cde3fefd488.js\"],\"component---src-pages-donor-terms-and-conditions-js\":[\"/component---src-pages-donor-terms-and-conditions-js-4be2b8aca2ff2975031a.js\"],\"component---src-pages-donors-apply-js\":[\"/component---src-pages-donors-apply-js-4cddc886f210b777cbc3.js\"],\"component---src-pages-donors-award-features-js\":[\"/component---src-pages-donors-award-features-js-dba6a79968aed9209e1f.js\"],\"component---src-pages-donors-faq-tsx\":[\"/component---src-pages-donors-faq-tsx-30304e972ce45c3f618c.js\"],\"component---src-pages-donors-funds-how-it-works-tsx\":[\"/component---src-pages-donors-funds-how-it-works-tsx-be5c835ace0a3fd39936.js\"],\"component---src-pages-donors-funds-pricing-tsx\":[\"/component---src-pages-donors-funds-pricing-tsx-cbfbd2807fbe32b1edde.js\"],\"component---src-pages-donors-funds-tsx\":[\"/component---src-pages-donors-funds-tsx-bbee0c899ca96384ba17.js\"],\"component---src-pages-donors-how-it-works-tsx\":[\"/component---src-pages-donors-how-it-works-tsx-d4527363b0f0e27cc21b.js\"],\"component---src-pages-donors-js\":[\"/component---src-pages-donors-js-a47da1dae6fce12da07e.js\"],\"component---src-pages-donors-manager-invitation-js\":[\"/component---src-pages-donors-manager-invitation-js-a422a499b32ac221a827.js\"],\"component---src-pages-donors-pricing-js\":[\"/component---src-pages-donors-pricing-js-230d56f1cd7d921796c7.js\"],\"component---src-pages-email-verification-js\":[\"/component---src-pages-email-verification-js-622aeff2410a8eb5c61e.js\"],\"component---src-pages-forgot-password-js\":[\"/component---src-pages-forgot-password-js-c9fe150bf9dcfec040c0.js\"],\"component---src-pages-index-js\":[\"/component---src-pages-index-js-d3fd21c2a69c172d44f3.js\"],\"component---src-pages-institutions-accept-invitation-js\":[\"/component---src-pages-institutions-accept-invitation-js-14052333bc225433ba53.js\"],\"component---src-pages-leaders-js\":[\"/component---src-pages-leaders-js-be342f048b653d59f5e8.js\"],\"component---src-pages-login-js\":[\"/component---src-pages-login-js-aeb6897c38103351c468.js\"],\"component---src-pages-parent-verification-js\":[\"/component---src-pages-parent-verification-js-47978e55f80e371db705.js\"],\"component---src-pages-partnerships-contact-tsx\":[\"/component---src-pages-partnerships-contact-tsx-bf59c5ba8b2f88fdd8d3.js\"],\"component---src-pages-partnerships-index-tsx\":[\"/component---src-pages-partnerships-index-tsx-6099847f444f778564cb.js\"],\"component---src-pages-plaid-financial-services-oauth-tsx\":[\"/component---src-pages-plaid-financial-services-oauth-tsx-db7fcccd325534d98d1a.js\"],\"component---src-pages-plaid-oauth-js\":[\"/component---src-pages-plaid-oauth-js-937ab3acd35b284f77cf.js\"],\"component---src-pages-privacy-js\":[\"/component---src-pages-privacy-js-35f1c285c14ecabcfa74.js\"],\"component---src-pages-privacy-overview-tsx\":[\"/component---src-pages-privacy-overview-tsx-e32faa81b74167a038cf.js\"],\"component---src-pages-reset-password-js\":[\"/component---src-pages-reset-password-js-5182e296ae9322e40276.js\"],\"component---src-pages-scholarship-rules-js\":[\"/component---src-pages-scholarship-rules-js-bce330460873578d2260.js\"],\"component---src-pages-schools-js\":[\"/component---src-pages-schools-js-12379f637f2f2a1c554c.js\"],\"component---src-pages-students-js\":[\"/component---src-pages-students-js-584fa5f71b7ba3a9bf2e.js\"],\"component---src-pages-terms-of-use-js\":[\"/component---src-pages-terms-of-use-js-1ba4e8ca33730c4502a3.js\"],\"component---src-pages-verify-account-js\":[\"/component---src-pages-verify-account-js-0a59c623c8249bd4bf79.js\"],\"component---src-templates-college-sales-template-js\":[\"/component---src-templates-college-sales-template-js-f75b2d30d3073cdd0c52.js\"],\"component---src-templates-donor-conversion-template-js\":[\"/component---src-templates-donor-conversion-template-js-a4ea9424d0059f7dcbdb.js\"],\"component---src-templates-donor-template-js\":[\"/component---src-templates-donor-template-js-02f95cbd4351b83322bd.js\"],\"component---src-templates-fundraiser-template-js\":[\"/component---src-templates-fundraiser-template-js-ed35e54a972b03603a24.js\"],\"component---src-templates-funds-template-tsx\":[\"/component---src-templates-funds-template-tsx-8284002f3fe25e0f2d0e.js\"],\"component---src-templates-institution-template-js\":[\"/component---src-templates-institution-template-js-486539fedf287b252a1f.js\"],\"component---src-templates-loan-template-js\":[\"/component---src-templates-loan-template-js-7c8845a492bdc3808124.js\"],\"component---src-templates-nomination-template-js\":[\"/component---src-templates-nomination-template-js-27b9270b33e50452a9da.js\"],\"component---src-templates-press-release-template-js\":[\"/component---src-templates-press-release-template-js-51f004971b42c892c7d3.js\"],\"component---src-templates-press-template-tsx\":[\"/component---src-templates-press-template-tsx-8528aed635dca73bc386.js\"],\"component---src-templates-resource-template-js\":[\"/component---src-templates-resource-template-js-303ac729af5066e43f2e.js\"],\"component---src-templates-resources-template-js\":[\"/component---src-templates-resources-template-js-8e9e9b2c11c045c64ae8.js\"],\"component---src-templates-reviews-template-tsx\":[\"/component---src-templates-reviews-template-tsx-08baf90ef20c5d135ed4.js\"],\"component---src-templates-scholarship-category-template-js\":[\"/component---src-templates-scholarship-category-template-js-3429d895845a44411444.js\"],\"component---src-templates-scholarship-group-template-js\":[\"/component---src-templates-scholarship-group-template-js-557221803d13a952e358.js\"],\"component---src-templates-scholarship-template-js\":[\"/component---src-templates-scholarship-template-js-3a3662fce7381fe730b8.js\"],\"component---src-templates-scholarships-template-js\":[\"/component---src-templates-scholarships-template-js-f3091e8f12ff90a202fd.js\"],\"common-SuspendedBanner\":[\"/common-SuspendedBanner-f1b0074401931c813076.js\"],\"modals-Degrees\":[\"/modals-Degrees-98b327a34ddedd5d8f3e.js\"],\"modals-CollegesInterest\":[\"/modals-CollegesInterest-e644d7c78a754bfe4eb4.js\"],\"modals-MajorsInterest\":[\"/modals-MajorsInterest-c81365e3dc5bb82d12e3.js\"],\"modals-MedicalSchoolInterestModal\":[\"/modals-MedicalSchoolInterestModal-2198b3383f363f1d0efe.js\"],\"modals-Basic\":[\"/modals-Basic-2512d4400eb2110c571c.js\"],\"components-scholarships-CollegeXpressPostFlow\":[\"/components-scholarships-CollegeXpressPostFlow-af4fa686fecdda06933e.js\"],\"SuspendedModal\":[\"/SuspendedModal-18f9a6a455fe4c70a66d.js\"]}";
          </script>
        <script>window.___webpackCompilationHash="1354020d396fd26e73a6";</script><script src="/webpack-runtime-71270b0f627017b4ec77.js" async></script><script src="/framework-70dbeb8966d02f5004c6.js" async></script><script src="/app-133183b18582f05942c6.js" async></script><!-- slice-end id="_gatsby-scripts-1" --></body></html>

Shouldn't we be seeing that it loads component---src-pages-index-js-d3fd21c2a69c172d44f3.js on the index page instead of /app-133183b18582f05942c6.js ?

Whats more here is that all our source is in that app.js with all dpeendencies etc. It makes that bundle super huge.

Capture

Reproduction Link

there is none :(

Steps to Reproduce

I can't provide a reproduction repo. I know this is annoying but I could maybe give this selectively to help us. I can provide any other necessary detail from the build.

We use @loadable/webpack-plugin to load some components in the source code. Could this be affecting everything?

Expected Result

I would expect that the code splitting per page is respected

Actual Result

One single bundle instead of a per page one.

Environment

System:
    OS: Linux 4.19 Debian GNU/Linux 11 (bullseye) 11 (bullseye)
    CPU: (12) x64 AMD Ryzen 5 2600 Six-Core Processor
    Shell: 3.1.2 - /usr/bin/fish
  Binaries:
    Node: 18.14.0 - ~/.nvm/versions/node/v18.14.0/bin/node
    Yarn: 1.21.1 - /usr/bin/yarn
    npm: 9.3.1 - ~/.nvm/versions/node/v18.14.0/bin/npm
  Languages:
    Python: 3.11.3 - /home/grok/.pyenv/shims/python
  npmPackages:
    gatsby: ^5.3.3 => 5.4.1
    gatsby-cli: ^5.3.1 => 5.4.0
    gatsby-link: ^5.3.1 => 5.4.0
    gatsby-node-helpers: ^1.2.1 => 1.2.1
    gatsby-plugin-canonical-urls: ^5.3.0 => 5.4.0
    gatsby-plugin-create-client-paths: ^4.9.0 => 4.9.0
    gatsby-plugin-eslint: ^4.0.3 => 4.0.3
    gatsby-plugin-google-tagmanager: ^5.3.1 => 5.4.0
    gatsby-plugin-image: ^3.4.0 => 3.4.0
    gatsby-plugin-manifest: ^5.3.1 => 5.4.0
    gatsby-plugin-postcss: ^6.3.0 => 6.4.0
    gatsby-plugin-react-helmet: ^6.3.0 => 6.4.0
    gatsby-plugin-react-svg: ^3.3.0 => 3.3.0
    gatsby-plugin-robots-txt: ^1.8.0 => 1.8.0
    gatsby-plugin-root-import: ^2.0.9 => 2.0.9
    gatsby-plugin-s3: ^0.3.8 => 0.3.8
    gatsby-plugin-sass: ^6.4.0 => 6.4.0
    gatsby-plugin-sentry: ^1.0.1 => 1.0.1
    gatsby-plugin-sharp: ^5.3.2 => 5.4.0
    gatsby-plugin-sitemap: ^6.3.1 => 6.4.0
    gatsby-plugin-use-query-params: ^1.0.1 => 1.0.1
    gatsby-plugin-webpack-statoscope: ^1.0.3 => 1.0.3
    gatsby-react-router-scroll: ^6.3.0 => 6.4.0
    gatsby-script: ^2.3.0 => 2.4.0
    gatsby-source-filesystem: ^5.3.1 => 5.4.0
    gatsby-source-ghost: ^5.0.2 => 5.0.2
    gatsby-transformer-json: ^5.3.0 => 5.4.0
    gatsby-transformer-sharp: ^5.3.1 => 5.4.0

Config Flags

No response

tiimgreen commented 10 months ago

@oorestisime did you find a solution to this?

uriklar commented 3 months ago

Having the same issue (v5)