[React] Tree Shake Your React Application Modules

Sometimes one line of code can eliminate 50% of your bundle size. As you'll see in this video, we can remove "dead code" from modules we are working with by correctly tree shaking.

Tree shaking is a term commonly used in the JavaScript context for dead-code elimination. It relies on the static structure of ES2015 module syntax, i.e. import and export.

 

// NO
import _ from "lodash";
import {debounce} from "lodash";

// DO
import debounce from "lodash/debounce"