What is tree shaking

Tree shaking is a code optimization technique commonly used to describe removing dead-code from a JavaScript context. It relies on the statically structured features of ES2015 module syntax, such as import and export. This term and concept was actually popularized by the ES2015 module packaging tool rollup.

The official webPack 2 version has built-in support for ES2015 modules (also known as Harmony Modules) and unused module detection. The new official release of WebPack 4 extends this detection capability.

The tree shaking effect

Its function is to delete the code that is not used in the program when it is packaged and compiled, which can reduce the size of the file after the package and reduce the execution time of the program.

What code is dead-code

  • Code will not be executed, not reachable

  • The results of code execution are not used

  • The code only affects dead variables (write, not read)

// a.js export const a = 'a'; export const b = 'b'; // export const c = 'c'; // index.js import {a, c} from './a.js'; console.log(a); If (false) {// Code that will not execute, delete console.log('delete'); }Copy the code

The tree – shaking characteristics

  • Tree Shaking is based on ES6 modules, which means that if you reference different files you need to follow the ES6 module specification.

  • ES6’s module introductions are statically analyzed, so you can determine exactly what code is loaded at compile time.

  • Analyze the program flow to determine which variables are not used or referenced, and then delete the code.

Development environment

You don’t need tree-shaking, Optimization to configure usedExports: true in your development environment. The package file will show the variables provided by the module and the variables used, and will not exclude Dead Code.

optimization: {
    usedExports: true
}
Copy the code
/***/ "./src/index.js": /*! * * * * * * * * * * * * * * * * * * * * * *! * \! *** ./src/index.js ***! A \ * * * * * * * * * * * * * * * * * * * * * * / / *! no exports provided */ /*! all exports used */ /***/ "./src/utils.js": /*! * * * * * * * * * * * * * * * * * * * * * *! * \! *** ./src/utils.js ***! A \ * * * * * * * * * * * * * * * * * * * * * * / / *! exports provided: a, cadfadsfadffafdasfadsfsdf, c */ /*! exports used: a */Copy the code

What is the sideEffects

SideEffects lets webpack remove tree shaking code that causes sideEffects.

SideEffects usage

A “side effect “is defined as code that performs special behavior when importing, rather than just exposing one or more exports. For example, polyfill, which affects the global scope, usually does not provide export.

Note that all imported files are affected by Tree shaking. This means that if you use something like CSS-Loader in your project and import a CSS file, you need to add it to the Side Effect list to avoid accidentally removing it in production mode:

{
  "name": "your-project",
  "sideEffects": ["./src/some-side-effectful-file.js", "*.css"]
}
Copy the code

Refer to the article

Your tree-shaking is not good for eggs