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.

[Bug?] out of the box vendor bundle too big?

See original GitHub issue

the basic out of the box build generates bundle size warnings - we should either reduce the size or relax the warnings.

yarn run v1.12.1
$ react-static build

=> Info: No 'siteRoot' is defined in 'static.config.js'. This is suggested for absolute urls and a sitemap.xml to be automatically generated.

=> Cleaning dist...
=> [✓] Dist cleaned
=> Building Routes...
=> [✓] Routes Built (0.4s)
=> Building Templates
=> [✓] Templates Built
=> Copying public directory...
=> [✓] Public directory copied
=> Bundling App...
Version: webpack 4.28.1
Time: 12832ms
Built at: 02/17/2019 11:10:33 PM
                                        Asset       Size  Chunks             Chunk Names
                             main.bef1af56.js   5.09 KiB       0  [emitted]  main
                         main.bef1af56.js.map   17.9 KiB       0  [emitted]  main
                          styles.2b9466ab.css  336 bytes       6  [emitted]  styles
    templates/src-containers-Post.c07eae44.js  444 bytes       1  [emitted]  src-containers-Post
templates/src-containers-Post.c07eae44.js.map   1.11 KiB       1  [emitted]  src-containers-Post
          templates/src-pages-404.3615cab5.js  306 bytes       2  [emitted]  src-pages-404
      templates/src-pages-404.3615cab5.js.map  633 bytes       2  [emitted]  src-pages-404
        templates/src-pages-about.5c3ba58e.js  325 bytes       3  [emitted]  src-pages-about
    templates/src-pages-about.5c3ba58e.js.map  653 bytes       3  [emitted]  src-pages-about
         templates/src-pages-blog.4eb91e84.js  537 bytes       4  [emitted]  src-pages-blog
     templates/src-pages-blog.4eb91e84.js.map   1.32 KiB       4  [emitted]  src-pages-blog
        templates/src-pages-index.fdada6b1.js  343 bytes       5  [emitted]  src-pages-index
    templates/src-pages-index.fdada6b1.js.map  828 bytes       5  [emitted]  src-pages-index
                 templates/styles.2b9466ab.js  126 bytes       6  [emitted]  styles
             templates/styles.2b9466ab.js.map  105 bytes       6  [emitted]  styles
           templates/vendors~main.0355e671.js    277 KiB       7  [emitted]  vendors~main
       templates/vendors~main.0355e671.js.map    941 KiB       7  [emitted]  vendors~main
  [0] /Users/swyx/Work/testbeds/templplsdelete/plsdelete/basicsite/node_modules/react-hot-loader/index.js 676 bytes {7} [built]
  [1] /Users/swyx/Work/testbeds/templplsdelete/plsdelete/basicsite/node_modules/react/index.js 189 bytes {7} [built]
  [2] /Users/swyx/Work/testbeds/templplsdelete/plsdelete/basicsite/node_modules/@babel/runtime/helpers/typeof.js 817 bytes {7} [built]
  [3] (webpack)/buildin/module.js 552 bytes {7} [built]
  [4] ./react/index.js 189 bytes {7} [built]
  [6] /Users/swyx/Work/testbeds/templplsdelete/plsdelete/basicsite/node_modules/path-browserify/index.js 6.02 KiB {7} [built]
  [9] ../lib/browser/index.js 25.8 KiB {7} [built]
 [16] ../lib/browser/components/StaticInfo.js 3.02 KiB {7} [built]
 [26] /Users/swyx/Work/testbeds/templplsdelete/plsdelete/basicsite/dist/react-static-browser-plugins.js 167 bytes {0} [built]
 [34] /Users/swyx/Work/testbeds/templplsdelete/plsdelete/basicsite/dist/react-static-templates.js 3.22 KiB {0} [built]
 [47] multi ../lib/bootstrapPlugins.js ../lib/bootstrapTemplates.js ../lib/bootstrapApp.js 52 bytes {0} [built]
 [48] ../lib/bootstrapPlugins.js 942 bytes {7} [built]
 [75] ../lib/bootstrapTemplates.js 966 bytes {7} [built]
 [83] ../lib/bootstrapApp.js 1.98 KiB {7} [built]
[108] /Users/swyx/Work/testbeds/templplsdelete/plsdelete/basicsite/src/index.js + 1 modules 1.02 KiB {0} [built]
      | /Users/swyx/Work/testbeds/templplsdelete/plsdelete/basicsite/src/index.js 581 bytes [built]
      | /Users/swyx/Work/testbeds/templplsdelete/plsdelete/basicsite/src/App.js 436 bytes [built]
    + 95 hidden modules

WARNING in asset size limit: The following asset(s) exceed the recommended size limit (244 KiB).
This can impact web performance.
Assets:
  templates/vendors~main.0355e671.js (277 KiB)

WARNING in entrypoint size limit: The following entrypoint(s) combined asset size exceeds the recommended limit (244 KiB). This can impact web performance.
Entrypoints:
  main (283 KiB)
      styles.2b9466ab.css
      templates/styles.2b9466ab.js
      templates/vendors~main.0355e671.js
      main.bef1af56.js

Child extract-css-chunks-webpack-plugin ../../css-loader/dist/cjs.js??ref--4-oneOf-2-1!../../postcss-loader/src/index.js??postcss!../../../src/app.css:
    [0] /Users/swyx/Work/testbeds/templplsdelete/plsdelete/basicsite/node_modules/css-loader/dist/cjs.js??ref--4-oneOf-2-1!/Users/swyx/Work/testbeds/templplsdelete/plsdelete/basicsite/node_modules/postcss-loader/src??postcss!/Users/swyx/Work/testbeds/templplsdelete/plsdelete/basicsite/src/app.css 624 bytes {0} [built]
    [1] /Users/swyx/Work/testbeds/templplsdelete/plsdelete/basicsite/node_modules/css-loader/dist/runtime/api.js 2.35 KiB {0} [built]

=> There were WARNINGS during the prod build stage. Your site will still function, but you may achieve better performance by addressing the warnings above.

=> [✓] App Bundled (13.6s)
=> Fetching Site Data...
=> [✓] Site Data Downloaded
=> Fetching Route Data...
=> [========================================================================================================] 104/104 100% 13000/s 0.0s
=> [✓] Route Data Downloaded (0.1s)
=> Exporting HTML across 4 threads...
=> [========================================================================================================] 104/104 100% 874/s 0.0s
=> [✓] HTML Exported (2.1s)
✨  Done in 19.12s.

Environment


 System:
    OS: macOS High Sierra 10.13.4
    CPU: (4) x64 Intel(R) Core(TM) i7-7660U CPU @ 2.50GHz
    Memory: 3.71 GB / 16.00 GB
    Shell: 5.3 - /bin/zsh
  Binaries:
    Node: 10.13.0 - ~/.nvm/versions/node/v10.13.0/bin/node
    Yarn: 1.12.1 - /usr/local/bin/yarn
    npm: 6.4.1 - ~/.nvm/versions/node/v10.13.0/bin/npm
  Browsers:
    Chrome: 72.0.3626.109
    Safari: 11.1
  npmPackages:
    react: ^16.8.1 => 16.8.2
    react-dom: ^16.8.1 => 16.8.2
    react-hot-loader: ^4.3.12 => 4.6.5
    react-static: ^6.0.18 => 6.3.6
    react-static-plugin-typescript: ^3.1.0 => 3.1.1
  npmGlobalPackages:
    react-static: 6.3.6

Steps to Reproduce the problem

Base your steps off of any freshly installed react-static template!

  1. react-static create
  2. cd site
  3. yarn build

Expected Behavior

no warnings during build, decent vendor bundle size

i looked into the vendor bundle and it has a lot of weird references to @tannerlinsley’s own setup:

image

Issue Analytics

  • State:closed
  • Created 5 years ago
  • Reactions:5
  • Comments:20 (16 by maintainers)

github_iconTop GitHub Comments

2reactions
sw-yxcommented, Mar 6, 2019

it’d be nice to have an idea of what exactly is in the 277kb. @tannerlinsley any idea why there are so many hardcoded references to your filesystem inside of compiled react static code? theres got to be something stupid easy there.

2reactions
ScriptedAlchemycommented, Mar 3, 2019

It might be worth writing a custom split chunks function which would allow us to code split as we want and chunk assets as needed? Ive used this to code-split node modules and some folders as i need.

Can throw together a basic function that can be modified as you see fit? Wrote one for Starbucks that might be helpful

Read more comments on GitHub >

github_iconTop Results From Across the Web

[Bug?] out of the box vendor bundle too big? #1028 - GitHub
the basic out of the box build generates bundle size warnings - we should either reduce the size or relax the warnings.
Read more >
Webpack and large vendor bundles - Stack Overflow
Size information for the unminified versions is useful to find out roughly the proportions of the bundles taken up by different modules.
Read more >
Slimming down your bundle size - LogRocket Blog
If a package has taken a lot of space, we might consider strategies like replacing it with a lighter version library (like we...
Read more >
Here's how I reduced my bundle size by 90% | by Ajay Poshak
Bundle size was huge. So I looked for some optimizations. On the front of performance also, it was taking 3.25 secs for first...
Read more >
jss - Angular Bundle size issue - Sitecore Stack Exchange
The bundle size with module concatenation off is about 50k larger than with it on, so the optimization is definitely doing something.
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