Compare the Market
Published in

Compare the Market

Putting our Component library on a diet.

Performance matters, and “Houston, we have a problem.”

Photo by Bernard Hermant on Unsplash

Introduction

A (cropped) screenshot of the network chart from WebPageTest.org
A (cropped) screenshot from the Chrome DevTools

Page Size Matters

Experiment Driven Development

On the left: The out-of-the-box app. On the right: With a single component added.
Photo by Markus Spiske on Unsplash

Tree Shaking / Dead code elimination

A better bundler… with rollup.js

On the left: Create-react-app using our library packaged with Webpack, on the right: using the library packaged with rollup.
File sizes after gzip:

287.02 KB (-430.7 KB) build/static/js/main.5978ff57.js

Summary

Key Takeaways

  • Javascript syntax patterns, such as CommonJS, have different side effects when it comes to dead-code elimination in your code bundler.
  • Webpack is good for bundling projects, but Rollup is better for libraries.
  • You’re still going to need Babel, regardless of whether you’re working with Webpack or Rollup. It’s the Babel configuration which has the biggest effect on the outcome.
  • Test, test and test again, and do it in an environment that is representative of your anticipated customers’ workspace.

Bonus: Create-React-App 2 & Webpack 4

On the left: Create-react-app 2, on the right: with our library added
File sizes after gzip:  188.49 KB  build/static/js/main.53169928.js
112.37 KB build/static/js/BasicQuestions.9168ec4c.chunk.js
110.43 KB build/static/js/ComplexQuestions.5706b399.chunk.js
110.4 KB build/static/js/SubQuestions.194d1d33.chunk.js
110.3 KB build/static/js/CustomQuestions.736521d5.chunk.js
File sizes after gzip: 255.75 KB build/static/js/main.b68bc851.js
846 B build/static/css/main.a86b8cd7.css
File sizes after gzip:  112.58 KB              build/static/js/7.58c36855.chunk.js
66.56 KB build/static/js/0.72b13458.chunk.js
65.62 KB (-122.87 KB) build/static/js/main.20b9faa3.chunk.js
40.56 KB build/static/js/1.ac53a9a6.chunk.js
3.32 KB (-109.06 KB) build/static/js/BasicQuestions.6df1fce5.chunk.js
1.47 KB (-108.96 KB) build/static/js/ComplexQuestions.61562335.chunk.js
1.44 KB (-108.97 KB) build/static/js/SubQuestions.d5066422.chunk.js
1.24 KB (-109.06 KB) build/static/js/CustomQuestions.b2e5a8af.chunk.js
1.24 KB build/static/js/runtime~main.6da60b22.js
File sizes after gzip: 156.02 KB build/static/js/1.c932bec8.chunk.js
89.89 KB (-165.86 KB) build/static/js/main.2f744215.chunk.js
837 B (-9 B) build/static/css/main.8ee9f0fa.chunk.css
763 B build/static/js/runtime~main.229c360f.js

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
James Ford

Front-end, Javascript, React, Agile Software Engineer. Constantly tinkering with technology. Technical Lead @ comparethemarket