michaeldimmitt / attempt_create_react_app_43k_or_bust Goto Github PK

This would have been the case by default if the files were being gzip-ped. Currently not occuring.

1) react loadable implementation.
2) react router implementation.
3) implement material-ui
4) remove material-ui
5) add tachyonss css
6) code splitting implementation.

package-lock.json shows nodemodules used.

Code splitting: https://www.youtube.com/watch?v=hqUiu4dKbBw
10kOrBust talk: https://www.youtube.com/watch?v=hqUiu4dKbBw
BeginnerGuidetoCodeSplitting(better at the end): https://www.youtube.com/watch?v=bb6RCrDaxhw

1. Investigate "create react app scripts 2.0"
   2) Ensure cra2.0 uses @babel/preset-env
   3) Ensure cra2.0 uses transpile with babel twice by setting modules:false in babelrc
   4) Ensure cra2.0 supports only browsers relavent to your users utilize.
   5) Ensure cra2.0 supports only browsers relavent to your users.
   6) Ensure cra2.0 uses babel7.0
   7) Ensure cra2.0 uses loosemode
2. Ensure cra2.0 is gzipping your files for production. Currently is not but implemented a workaround
3. Ensure cra2.0 doesnt ship SourceMaps for production.Dont believe it does but see num10
   10) SourceMaps, dont ship them. Regardless, I manually remove in the workaround. script alternate
4. CODE-SPLITTING, implement react-loadable (component based code splitting.)
5. Try to put all of this logic in a test suite.
6. Automatically upgrade cra and run test suite reporting results each time.
7. Investigate how to improve the milisecond delay when browser is translating javascript.
8. Conditional patterns for component code splitting where mobile is suported and upgrade for additional components for desktop users that require additional features.

Keep bundle below 40 KB, realistically 50 KB

I would like to have react and a skeleton website for different entrypoints in the bundle.js they have to be gzipped to have it at that size. Additional javascript files get brought in with react-loadable code splitting for the rest of the project. Try to limit waterfalling to often in the network tab.

** Having manually gzip'ed the files **
Oct29: manually gzip'ing files is required to get the javascript this small.
Current achived bundle.js or chunk.js size is 35.1 KB.

Another measurement to keep in mind is the overall size of data transfered on the network tab when on an incognito window with cache disabled. Currently 38.3 KB. ** Having manually gzip'ed the files **

1. Verified, cra2.0 is using @babel/preset-env and compiling twice by using modules:false
   here at master or here_prev_commit
2. Verified, supports only browsers relavent to your users. the package.json allows you to put your own config using
   browserslist
3. Verified, cra2.0 is NOT gzipping by default. links: gzipissue1 gzipissue2
4. Made a workaround for gzipping production, which is the alternative script in the package.json.
5. Verified, cra2.0 is using loosemode here at master or here at the pr