3

Currently my website only uses HTML, CSS, and JavaScript.

I know that the React JS library is about 30 KB.

I am wondering if that 30 KB will be downloaded from my server by every user who visits my website, or if it will already be cached by users who have visited any different website in the past that may have also used react.

Please let me know if React JS can be retrieved from the browser cache for a different website's use of React, since then it is unlikely to affect my website load time.

3 Answers 3

2

To protect user privacy, modern browsers have a separate cache per site. They call this state partitioning. So even if two websites use the same JavaScript library loaded from the same URL from the same CDN, browsers will download two copies, one for each site. Before browsers did this, sites could try downloading files from other sites and see how quickly they loaded to know if those files were cached which would tell them whether or not the other sites had been visited.

Every user to your website will have to download 30 KB of React JavaScript to be able to use your site the first time they visit.

2

While it is possible to serve React from a CDN, I've never seen anyone do that without also doing client-side compilation of JSX into JS which comes at a heavy performance cost. (As Stephen Ostermiller points out, browsers are not sharing local caches of CDN loaded resources between sites now, so the benefit of using a CDN is reduced to geographical proximity, highly tuned cache-control headers, and server performance tuning.)

A typical website using React will provide its own local copy of React (and will be built with tools like Webpack that perform tree shaking to optimise the files that are delivered).

The network loading costs for the React library are trivial and usually not worth considering.

0

If you are afraid to consume your bandwidth, server load and whatnot, you can just call the library from facebook, they offer the library to be called in the compressed and the uncompressed version, anytime a user will request your page, they will pull the library from fb.me and not from your server.

CDN is not something to use with React since it's 30kb, cdn are for bigger streaming data and file management.

Use these script tags to load React, they are offered by Facebook:

React 0.14.3 (development)

<script src="https://fb.me/react-with-addons-0.14.3.min.js"></script>
<script src="https://fb.me/react-dom-0.14.3.min.js"></script>

React 0.14.3 (production)

<script src="https://fb.me/react-0.14.3.min.js"></script>
<script src="https://fb.me/react-dom-0.14.3.min.js"></script>

React with Add-Ons 0.14.3 (production)

<script src="https://fb.me/react-with-addons-0.14.3.min.js"></script>
<script src="https://fb.me/react-dom-0.14.3.min.js"></script>

If you are interested in being more efficient, write code that consumes less bandwidth, by reducing functions, less repeating, more algorithmic ways and include less files.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.