Greatly reduce your React app bundle size with Bit components

NPM is great, it allows developers to share codes across the globe, but it comes with a great expense. Many great Js frameworks and CSS framework have been created and distributed using NPM. We use many CSS frameworks like:

• Material Design
• Bootstrap
• Tailwind
• Semantic
• Bulma

Many frameworks have been created to enable us to use components out of the box with the CSS frameworks, they include:

• Material UI
• Semantic UI

These provide components that we can easily plug into our apps and use. These components include:

• Modals
• Buttons
• Tabs
• Tables
• etc …

To use these libraries requires us to pull in the library by running the NPM command:

npm i @material-ui/core
yarn add @material-ui/corenpm i @semantic-ui/core
yarn add @semantic-ui/core

These will pull in the entire library in our project:

The entire components in the Material UI library are downloaded, and there is a high possibility that you will need maybe only 5 of these components in your project and yet here they all are, adding to the weight and size of your app. If you finally finish building your app and publishes, other developers that want to contribute to the project will find themselves pulling in the library they will only need 5 components out ~20 components in it. It will waste the data of the developers.

Demo

Let’s say we want to build a React app that has a Tab.

First, we scaffold a React project:

create-react-app react-bit
cd react-bit

Next, we pull in the material-ui library:

npm i @material-ui/core
yarn add @material-ui/core// ...
    "dependencies": {
        "@material-ui/core": "^3.7.1",
        "react": "^16.7.0",
        "react-dom": "^16.7.0",
        "react-scripts": "2.1.2"
    },
    // ...

We create a TabsComponent and pour in the following:

import React from 'react';
import PropTypes from 'prop-types';
import { withStyles } from "@material/core/styles";
import Paper from "@material/core/paper";
import Tabs from "@material/core/tabs";
import Tab from "@material/core/tab";
  
const styles = {
  root: {
    flexGrow: 1
  }
};class TabsComponent extends React.Component {state = {
    value: 0
  };handleChange = (event, value) => {
    this.setState({ value });
  };render() {
    const { classes } = this.props;return <Paper className={classes.root}>
        <Tabs value={this.state.value} onChange={this.handleChange} indicatorColor="primary" textColor="primary" centered>
          <Tab label="Item One" />
          <Tab label="Item Two" />
          <Tab label="Item Three" />
        </Tabs>
      </Paper>;
  }
}TabsComponent.propTypes = {
  classes: PropTypes.object.isRequired
};TabsComponent = withStyles(styles)(TabExample)
export default TabsComponent;

Now, go to the node_modules/@material/core folder, you will see this:

All the components of Material UI are downloaded. I checked the properties of the core folder in my PC and found out that it has:

• Size on Disk: 7 MB
• No fo Files: 1356 files

We just needed only 4 components: withStyles, Tabs, Tab, Paper and we had to install a whopping 7 Mb worth of library. Can't we just single out and install the only 4 components we needed? Yes, it would reduce the size and weight of our project.

In comes Bit,

https://bit.dev

With Bit, we can split our components in repositories and publish them individually. We can create a collection in Bit and publish all our components to the collection, then developers can install our components use or develop for good.

Material UI saw the uniqueness and beauty of Bit, they opted to use the tool and publish their components to material-ui collection. With it, we can now install the components we need individually.

To see how to install the Material UI components, you need t visit their playground page on bit.dev and lookup the components you want to use. In our case the components Tabs, Tab, withStyles, Paper. We install them by running the following command:

// NPM
npm i @bit/mui-org.material-ui.tab
npm i @bit/mui-org.material-ui.tabs
npm i @bit/mui-org.material-ui.paper// yarn
yarn add @bit/mui-org.material-ui.tab
yarn add @bit/mui-org.material-ui.tabs
yarn add @bit/mui-org.material-ui.paper

This will install the components in the @bit namespace in node_modules folder.

Now, go to node_modules/@bit/, check on the properties you will see that the size is close 1.46 MB, more than one-fourth of the previous size when we installed the whole @material-ui/core library.

We can now, simply import the components and use them:

import React from 'react';
import PropTypes from 'prop-types';
import { withStyles } from "@bit/mui-org.material-ui.styles";
import Paper from "@bit/mui-org.material-ui.paper";
import Tabs from "@bit/mui-org.material-ui.tabs";
import Tab from "@bit/mui-org.material-ui.tab";
  
const styles = {
  root: {
    flexGrow: 1
  }
};class TabComponent extends React.Component {state = {
    value: 0
  };handleChange = (event, value) => {
    this.setState({ value });
  };render() {
    const { classes } = this.props;return <Paper className={classes.root}>
        <Tabs value={this.state.value} onChange={this.handleChange} indicatorColor="primary" textColor="primary" centered>
          <Tab label="Item One" />
          <Tab label="Item Two" />
          <Tab label="Item Three" />
        </Tabs>
      </Paper>;
  }
}TabComponent.propTypes = {
  classes: PropTypes.object.isRequired
};TabComponent = withStyles(styles)(TabComponent)
export default TabComponent;

Not only components, using utilities like lodash is also applicable. Lodash has a plethora of functions we can use in our JS project. Installing lodash using the conventional means installs all the functionalities/modules in the library.

But with the emergence of Bit, they have pulled all that to Bit, so we can only install the function that we sorely need.

Conclusion

What is the point here? We just showed how using Bit can greatly reduce the amount and size of components/libraries/utilities we install in our project. This will fasten the time other developers contribute to your project, ‘cos your project dependencies and size won’t be huge with unused components. Just imagine spending hours installing libraries that you won’t use 10% of their components or functionalities.

If you have any questions regarding this or anything I should add, correct or remove, feel free to comment, email, or DM me.

Thanks!!!