How to build tree-shakeable JavaScript libraries

1. Chart.js

   1 203 65,574 8.1 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).

2. CodeRabbit

   coderabbit.ai featured

   CodeRabbit: AI Code Reviews for Developers. Revolutionize your code reviews with AI. CodeRabbit offers PR summaries, code walkthroughs, 1-click suggestions, and AST-based analysis. Boost productivity and code quality across all major languages with each PR.

   

3. chartist

   2 5 13,357 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.)

4. size-limit

   3 6 6,670 8.0 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:

5. terser

   4 32 8,883 8.7 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.)

6. Rollup

   5 86 25,669 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.)

7. react-chartjs-2

   6 37 6,753 7.9 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