DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’»

DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’» is a community of 964,423 amazing developers

We're a place where coders share, stay up-to-date and grow their careers.

Create account Log in
Cover image for How one CSS-in-JS library cut 56 KB from my bundle
Max Rozen
Max Rozen

Posted on • Updated on • Originally published at perfbeacon.com

How one CSS-in-JS library cut 56 KB from my bundle

Like many people working within the React ecosystem, I use a CSS in JS solution for implementing styles.

The two CSS-in-JS libraries I've used most in my projects are Emotion and Styled Components. They became quite popular as they let you define JSX components via an intuitive API:

const Button = styled.button`
  background: transparent;
  border-radius: 3px;
  border: 2px solid palevioletred;
  color: palevioletred;
  margin: 0 1em;
  padding: 0.25em 1em;
`
Enter fullscreen mode Exit fullscreen mode

Performance overhead

These libraries have a great developer experience, but they do have some performance overhead.

On library size alone:

As well as the additional bundle size, these libraries generate your styles at runtime. In other words, your user's browser is the one doing the work to generate the CSS you declared via the amazing developer experience.

What if I told you it was possible to have both an amazing developer experience AND be performant?

Introducing Compiled CSS-in-JS

Compiled CSS in JS (npm package: @compiled/css-in-js) does what it says on the box - it generates the styles you define at build time, so your user's browser has no extra work to perform to load your page properly.

On top of that, @compiled/css-in-js is only 964B (minified + gzipped), and results in around 300B being added to your bundle thanks to tree-shaking.

Compiled CSS in JS supports both the styled component and the css prop, so adopting it is as simple as installing a couple of packages, removing the old packages, and a quick search and replace.

I didn't have particularly complicated styled components, so migration was seamless. There are some cases where you'd have to re-write your code, but I haven't had to.

Compiled CSS in JS is still pretty early in its development, so if you don't consider yourself an early adopter, you might want to wait until it's more mature/widely adopted.

Definitely a package you'd want to watch though!

How to use Compiled CSS-in-JS

To get started with Compiled CSS-in-JS, we head over to the docs.

I wasn't using TypeScript on the personal projects I added Compiled CSS-in-JS to, but there are instructions in the docs to help TypeScript users too.

  • Install the library
npm install @compiled/css-in-js
or
yarn add @compiled/css-in-js
Enter fullscreen mode Exit fullscreen mode
  • Install the Babel plugin
npm install @compiled/babel-plugin-css-in-js
or 
yarn add @compiled/babel-plugin-css-in-js
Enter fullscreen mode Exit fullscreen mode
  • Search and replace

    Depending on the CSS-in-JS library you use, your search and replace could be one of the following:

    • import styled from 'styled-components'; for import { styled } from '@compiled/css-in-js';
    • import styled from '@emotion/styled'; for import { styled } from '@compiled/css-in-js';

Each time I swapped to Compiled CSS in JS my bundle size dropped considerably, and First Contentful Paint (FCP) dropped by at least 100ms.

If you'd like more tips on how to improve your frontend's web performance, you can follow me on Twitter or subscribe to my newsletter as I regularly post articles there.

Top comments (2)

Collapse
 
emma profile image
Emma Goto πŸ™

Nice post!

Collapse
 
ben profile image
Ben Halpern

Really interesting

🌚 Life is too short to browse without dark mode