How does the tree shaking mechanism work in code bundlers and how to prevent it from being blocked by third-party libraries?

Tree shaking is an optimization technique for reducing the size of the final JavaScript bundle, which consists of removing unused code during the build phase. The term comes from the metaphor of shaking a tree so that dried leaves fall off. This mechanism relies on static analysis of the static structure of ES6 modules, such as the import and export keywords, allowing bundlers to precisely determine which specific functions or variables are imported and used in the project.

However, the effectiveness of tree shaking can be significantly reduced due to how code is written by third-party libraries or the developer themselves. One of the main issues is side effects. If a module executes code upon import, for example, modifying a global object or adding prototypes, the bundler cannot safely remove that module for fear of breaking the application's logic.

Following these rules can significantly reduce the amount of JavaScript code transmitted over the network. This directly reduces its loading and parsing time by the browser, which is especially noticeable on mobile devices with limited computing resources.