Tree-shake-this NPM

Tree Shake This

This is a cli package to tree shake imports of the libraries that are used in your projects, in order to reduce the build time and bundle size as well as enhance performance in some cases.

What is tree shaking?

Well MUI has an extensive description about it here

how ever here is the tldr;

// ❌ Bad
import { Add } from "@mui/icons-material";
import { Tabs } from "@mui/material";

// ✅ Good
import AddIcon from "@mui/icons-material/Add";
import Tabs from "@mui/material/Tabs";

where what bad means, importing all the of the package, which increases the bundle size, thus increasing loading time, and more work for garbage collector which means bad for performance

Usage

you can use it in the cli as such

npx tree-shake-this <...paths>

where path is either a directory or a specific file that you want to shake the imports with, for example you

# shake all js, ts, & tsx files in the `src` that exists in the current directory
npx tree-shake-this src

# shake a specific file
npx tree-shake-this pages/home.tsx


# shake with a glob pattern
npx tree-shake-this src/components/**/*.js


# shake with multiple paths 
npx tree-shake-this src pages/home.tsx src/components/**/*.js