How to build tree-shakeable JavaScript libraries

• Chart.js

  184 63,549 7.8 JavaScript

  Simple HTML5 Charts using the <canvas> tag

  

In Chart.js, tree-shaking didn’t work as expected because of assignments to class properties (replaced with static properties).

• chartist

  5 13,319 0.0 TypeScript

  Simple responsive charts

  

(Full disclosure: this is a real-world design decision from Chartist, an open-source data visualization library I maintain and contribute to.)

• SurveyJS

  surveyjs.io featured

  Open-Source JSON Form Builder to Create Dynamic Forms Right in Your App. With SurveyJS form UI libraries, you can build and style forms in a fully-integrated drag & drop form builder, render them in your JS app, and store form submission data in any backend, inc. PHP, ASP.NET Core, and Node.js.

  

• size-limit

  6 6,420 8.5 JavaScript

  Calculate the real cost to run your JS app or lib to keep good performance. Show error in pull request if the cost exceeds the limit.

However, you can use the Size Limit library to control the size of a bundle or individual exports. Here’s an example configuration:

• terser

  28 8,432 8.9 JavaScript

  🗜 JavaScript parser, mangler and compressor toolkit for ES6+

  

You can see that the div function was copied “as is” and is not used in any way. When you run Webpack in production mode, it will remove this function. (Internally, Webpack relies on Terser for minification; Rollup performs tree-shaking and dead code elimination on its own.)

• Rollup

  69 24,834 9.5 JavaScript

  Next-generation ES module bundler

  

You can see that the div function was copied “as is” and is not used in any way. When you run Webpack in production mode, it will remove this function. (Internally, Webpack relies on Terser for minification; Rollup performs tree-shaking and dead code elimination on its own.)

• react-chartjs-2

  36 6,406 3.5 TypeScript

  React components for Chart.js, the most popular charting library

  

In react-chartjs-2, some exported entities are constructed by calling a factory method (marked as pure).

Suggest a related project