CODEWITHSUNDEEP
reactjs
rhodes
rhodes

Reputation: 179

How can I reduce reactjs file size in production?

I’ve built a simple react app fetching data from a REST API using axios.

Only three packages are imported

import React from 'react';
import ReactDOM from 'react-dom';
import axios from 'axios';

However, when I run “npm run build” to create my production package I was astonished to see a main.xxxx.js file with 137 kb in size and an additional main.xxx.js.map with 606 kb.

Why are these files so huge? Is there a way to reduce the file sizes?

Upvotes: 1

Views: 2166

Answers (1)

Roy Wang
Roy Wang

Reputation: 11260

The official source stated that v16.0 is 109 KB.
axios.min.js is 13 KB, so 137 KB sounds about right if you are at v16.3.

We should be looking at the size with since that's what your clients will be served.
Here's a comparison with other popular frameworks:

Name          | Size (gzipped)
------------- | -------------
Angular 2     | 111 KB
React 16.2    | 32 KB
Vue 2.5       | 21 KB

If you are still concerned with the size, you can try out preact, which is only about 4 KB and has near identical API as React (with a few features stripped).

Upvotes: 1

Related Questions