What are some examples of tree shaking in JavaScript?

What are some examples of tree shaking in JavaScript?

Tree shaking is a term commonly used in JavaScript to describe the process of removing unused code. A popular example is using Webpack with ES6 modules. When you import only the functions you need, Webpack can eliminate the rest during the build process.

Can you give me a specific code example?

Sure! Here's a simple example:

// utils.js
export const usedFunction = () => { console.log('This function is used!'); };
export const unusedFunction = () => { console.log('This function is not used!'); };

// main.js
import { usedFunction } from './utils';

usedFunction();

In this case, if you configure Webpack correctly, unusedFunction will be removed from the final bundle.

What tools can I use for tree shaking?

You can use tools like Webpack, Rollup, and Parcel. They all support tree shaking when you use ES6 module syntax.

Are there any limitations to tree shaking?

Yes, tree shaking works best with ES6 modules. It may not effectively remove unused code from CommonJS modules or if the code is not statically analyzable.