search

kriasoft / react-starter-kit

The web's most popular Jamstack front-end template (boilerplate) for building web applications with React
https://reactstarter.com
MIT License
22.71k stars 4.16k forks source link

Build gets pretty big #306

Closed codeorelse closed 3 years ago

codeorelse commented 8 years ago

Hi,

When I build the react-starter-kit without any adjustments, the client app.js is over 280KB. I think this is quite huge, especially when using it in a mobile app. What are your thoughts on this? What can we do to optimise it?

Cheers!

Want to back this issue? Post a bounty on it! We accept bounties via Bountysource.

ChrisCinelli commented 8 years ago

React with add ons alone is 140Kb

codeorelse commented 8 years ago

When we serve the JS gzipped, it's getting very acceptable :). But still I think 140KB on top of the 140KB (React+addons) is quite a lot..

doug-orchard commented 8 years ago

Any big eCommerce site on a mobile phone will be a minimum 250kb in .js files. That's not considering extra external scripts and the monolithic CSS files they force you to download. To me, this is a trade off. No one said isomorphic sites were slim, or any site using a framework of any kind. Anyway, that's my two-cents.

koistya commented 8 years ago

To reduce this file size, you may want to use code splitting, making sure that only the code which is actually is going to be used on the page is loaded at the initial load.

mimimimichael commented 8 years ago

I just downloaded the boilerplate and did an npm run build. The main.js in build/public is 3.33 MB in file-size. For real? Or am I doing something wrong here?

codeorelse commented 8 years ago

@alotov-agina The production build is a lot smaller.

$ npm run build -- --release
Bogdaan commented 8 years ago

Note that build includes CSS, you can make it even faster and less with:

  1. code-splitting (https://github.com/webpack/webpack/tree/master/examples/code-splitting)
  2. plugins transform-react-remove-prop-types transform-react-constant-elements transform-react-inline-elements (see https://github.com/kriasoft/react-starter-kit/pull/440)
  3. use NODE_ENV=production
mimimimichael commented 8 years ago

Thank you guys!

ulani commented 3 years ago

@codeorelse thank you very much for crating this issue! Unfortunately, we have close it due to inactivity. Feel free to re-open it or join our Discord channel for discussion.

NOTE: The main branch has been updated with React Starter Kit v2, using JAM-style architecture.