Tree-shaking
Explore tree shaking as a method to optimize Vue applications by eliminating unused code to reduce bundle size. Understand practical examples with lodash, Font Awesome icons, and UI frameworks to enhance app performance by only including necessary components and assets.
We'll cover the following...
Tree shaking is a technique used by module bundlers to remove unused code from an application to reduce the final bundle size. This feature relies on the static structure of the ES2015 module syntax
This is a great way to optimize applications because less code means that browsers need to spend less time on parsing and processing the application.
Let’s look at three examples.
First example - lodash
If a library like lodash is included in our project, then here’s what should and shouldn’t be done. Also, remember that tree-shaking is syntax-sensitive. See examples below:
Not tree-shakeable
- The
import _