browser - Is it ok to store a 95kb JSON file on the front-end in the src folder (create-react-app)

Question

I have a React app created with "Create React App". I have some data that I show on the UI, this data will never change.

If I store it on a JSON file within the front-end src folder, will this affect performance enough to worry about?

The JSON file is 95kb. Will this increase my bundle size by 95kb? Does anyone have a better idea?

The alternative is getting it from the DB but that is really slow and i cannot control it. I've seen similar questions to this, but none that reference an actual file size. They are all too broad.

EDIT: I just used the 'source-map-explorer' library and noticed that adding the file does increase my bundle size by about 50kb. (not sure why it doesn't increase it by 95kb). Either way this is unnacceptable to me so i am still looking for a better way to do this. I've considered using jsonbin.io to store it, but not sure how good of an idea that is.

question from:https://stackoverflow.com/questions/65850884/is-it-ok-to-store-a-95kb-json-file-on-the-front-end-in-the-src-folder-create-re

Answer 1

First of all, it surely does increase the bundle size because Webpack considers that file as an asset imported in bundle.

Secondly, Not only isn't 95K that big to worry about but also as you have seen, it will be much smaller because bundles are optimized and minimized during the build.

Finally, as @Justinas said in the comments section, it is suggested to serve files as zipped. So a JSON file would be a completely valid option