react-static: [Bug?] out of the box vendor bundle too big?

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

About this issue

  • Original URL
  • State: closed
  • Created 5 years ago
  • Reactions: 5
  • Comments: 20 (18 by maintainers)

Most upvoted comments

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.

+2
swyxio on Mar 6, 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

+2
ScriptedAlchemy on Mar 3, 2019

I’ve just found out a very quick way to optimise bundle. Apparently the build command does not use a NODE_ENV of “production”

Doing `NODE_ENV=production yarn build" reduces the vendor bundle to half the size (mainly because it includes react-dom.prod.min.js instead of react-dom.development.js

I’ll investigate further in the next few days, but it seems as if by just setting the env in the build command we get a low hanging fruit

+1
cortopy on Jul 8, 2019

This issue seems to be getting worse. I’ve just done a build on an out-of-the-box new project and I got the following:

Built at: 07/08/2019 8:24:44 PM
                             Asset       Size  Chunks             Chunk Names
                  main.90de6bee.js   7.81 KiB       0  [emitted]  main
               styles.aeeeeccc.css  336 bytes       1  [emitted]  styles
      templates/styles.aeeeeccc.js   82 bytes       1  [emitted]  styles
templates/vendors~main.ff1c564b.js    520 KiB       2  [emitted]  vendors~main

More than 500kb in a hello-world type of application seems beyond excessive. How can this be reduced?

+1
cortopy on Jul 8, 2019
Read more comments on GitHub
← react-static: [Bug] Out of Memory with basic template
react-static: [Bug] Path with dot doesn't work →