[Bug?] out of the box vendor bundle too big?
See original GitHub issuethe 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!
react-static create
cd site
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:
Issue Analytics
- State:
- Created 5 years ago
- Reactions:5
- Comments:20 (16 by maintainers)
Top 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 >
Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free
Top Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
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.
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