Splittable Javascript

[jimrandomh]

Loading the front page (or a post page) involves downloading, parsing and initializing a lot of Javascript. Most of it comes from frameworks, and a fair amount of it is avoidable. Here are some things that particularly want to be split out, or otherwise eliminated (sizes are un-minified):

• 393kb: draft-js. This is already mostly split out, in that the CommentEditor and PostEditor have async loading in order to avoid loading it, but MessageItem and DraftJSRenderer import it for convertFromRaw.
• 1MB: algoliasearch, algoliasearch-helper, and react-instantsearch: Can be deferred until you first interact with a search bar, or at least until all other rendering is complete.
• 106kb: simpl-schema
• 150kb: react-google-maps
• 184kb: cloudinary-core, cloudinary-react

┆Issue is synchronized with this Trello card by Unito

[Discordius]

We probably just want to get rid completely of the cloudinary libraries, by replacing calls to image with cloudinary links (pretty straightforward).

simpl-schema is the hardest of these, since I think it's used in Vulcan's schema generation, which is used all over the place for practically everything.

react-google-maps can definitely be deferred into an async map component algoliasearch can also definitely be deferred

The draft-js thing is also quite easy to fix. Just need to create an async draft-js-renderer component.

[jimrandomh]

immutable (148kb) seems to be making it to the client but only used/imported from inside async/editor-plugins. Not sure what's going on there.

[jimrandomh]

The top 50:

852455 node_modules/react-dom 822184 node_modules/lodash 604626 node_modules/material-ui 559842 node_modules/@material-ui 480827 node_modules/graphql 459433 node_modules/algoliasearch-helper 403228 node_modules/react-instantsearch 393141 node_modules/draft-js 250568 node_modules/react-bootstrap 239311 node_modules/core-js 183149 node_modules/apollo-client 151700 node_modules/moment 150726 node_modules/react-google-maps 147851 node_modules/immutable 142004 node_modules/cloudinary-core 138088 node_modules/algoliasearch 117337 node_modules/mingo 107698 node_modules/simpl-schema 97375 node_modules/react-router 96389 node_modules/fbjs 94872 node_modules/@babel 88215 node_modules/popper.js 85492 node_modules/he 84036 node_modules/jss 60698 node_modules/lodash.merge 60350 node_modules/underscore 59088 node_modules/draft-convert 57508 node_modules/react 56446 node_modules/react-redux 51522 node_modules/history 51434 node_modules/ua-parser-js 49972 node_modules/react-sortable-hoc 49259 node_modules/buffer 45306 node_modules/recompose 44379 node_modules/mongo-object 43821 node_modules/react-geosuggest 41701 node_modules/cloudinary-react 41443 node_modules/speakingurl 40345 node_modules/url 40015 node_modules/react-helmet 39982 node_modules/formsy-react-components 37478 node_modules/crypto-js 36838 node_modules/underscore.string 36396 node_modules/inline-style-prefixer 35946 node_modules/react-autowhatever 35242 node_modules/react-datetime 34115 node_modules/marked 33918 node_modules/lodash.template 33637 node_modules/react-transition-group 33597 node_modules/react-apollo

[jimrandomh]

Based on grepping through node_modules, I think cloudinary is probably responsible for most of the 822kb of lodash.

[Discordius]

Cool, another reason to kill it. Among the other 50 problems I've had with it (it's currently also the biggest reason for why SSR isn't fully isomorphic between client and server)

On Fri, Aug 31, 2018 at 6:55 PM James Babcock notifications@github.com wrote:

Based on grepping through node_modules, I think cloudinary is probably responsible for most of the 822kb of lodash.

— You are receiving this because you commented.

Reply to this email directly, view it on GitHub https://github.com/LessWrong2/Lesswrong2/issues/914#issuecomment-417824787, or mute the thread https://github.com/notifications/unsubscribe-auth/AIq25R5QhxfasS-fsAjXf3SfJ9mmpFPtks5uWekcgaJpZM4WWBCW .

[jimrandomh]

Looks like cloudinary-core fixed the import-all-of-lodash problem in 2.5.0 (changelog). Looking at what it's actually providing, it looks like the two things we're getting out of it are (1) dpi detection for images, and (2) an image-upload widget on the New Sequence page.

[Discordius]

The image upload widget should be loaded asynchronously and I think shouldn't be part of it, or require it.

On Mon, Sep 3, 2018 at 1:53 PM James Babcock notifications@github.com wrote:

Looks like cloudinary-core fixed the import-all-of-lodash problem in 2.5.0 (changelog https://github.com/cloudinary/pkg-cloudinary-core/releases). Looking at what it's actually providing, it looks like the two things we're getting out of it are (1) dpi detection for images, and (2) an image-upload widget on the New Sequence page https://www.lessestwrong.com/sequencesnew.

— You are receiving this because you commented.

Reply to this email directly, view it on GitHub https://github.com/LessWrong2/Lesswrong2/issues/914#issuecomment-418191540, or mute the thread https://github.com/notifications/unsubscribe-auth/AIq25YgDJtwQ4LLa1p2RHO7roM1vUbOcks5uXZbbgaJpZM4WWBCW .

[Discordius]

I think we can do DPI detection without the library. We basically just need to adjust the links to the images to have the DPR keyword in the correct place:

https://cloudinary.com/blog/how_to_automatically_adapt_website_images_to_retina_and_hidpi_devices

On Mon, Sep 3, 2018 at 1:56 PM Oliver Habryka panisnecis@gmail.com wrote:

The image upload widget should be loaded asynchronously and I think shouldn't be part of it, or require it.

On Mon, Sep 3, 2018 at 1:53 PM James Babcock notifications@github.com wrote:

Looks like cloudinary-core fixed the import-all-of-lodash problem in 2.5.0 (changelog https://github.com/cloudinary/pkg-cloudinary-core/releases). Looking at what it's actually providing, it looks like the two things we're getting out of it are (1) dpi detection for images, and (2) an image-upload widget on the New Sequence page https://www.lessestwrong.com/sequencesnew.

— You are receiving this because you commented.

Reply to this email directly, view it on GitHub https://github.com/LessWrong2/Lesswrong2/issues/914#issuecomment-418191540, or mute the thread https://github.com/notifications/unsubscribe-auth/AIq25YgDJtwQ4LLa1p2RHO7roM1vUbOcks5uXZbbgaJpZM4WWBCW .