What is? tree-shaking

Don't call it shaking tree , The first is the Rollup Realization , It is a technology that optimizes the volume of code by deleting unnecessary additional code
tree-shaking During the packaging process Static analysis Import and export between modules , Determine which module export values are not marked with a pie , And delete it , Thus, the optimization of packaging products is realized .

tree-shaking The foundation that can be achieved

Before CommonJs、AMD、CMD In the modular scheme of , This import and export is dynamic Of , Unpredictable , So in the packaging phase , It is impossible to analyze which modules are used , for example ：

if(someTrue){
  require('./bar');
  exports.foo = 'foo';
}

and ES static state module Under the plan , The dependencies between modules are highly deterministic and static , It has nothing to do with the running state , Reliable static analysis , So the whole dependency tree can be statically derived from the parse syntax tree , You can do it at compile time analysis ESM Module , You can infer from the literal amount of code which modules are not used , This is it. tree-shaking Necessary conditions for realization .

tree-shaking Examples of the role of

You can see in the example ,bar.js We have derived bar、foo, And only bar stay index.js Used in ,foo Never used , after tree-shaking After processing ,foo Variables will be deleted as useless code .

// index.js
import {bar} from './bar';
console.log(bar);

// bar.js
export const bar = 'bar';
export const foo = 'foo';

tree shaking What is the principle of ?

After reading the above analysis , I believe here you can easily get the answer to the question ：

• ES6 Module Introduce static analysis , So when compiling, you should correctly judge which modules are loaded
• Static analysis program flow , Determine which modules and variables are not used or referenced , And then delete the corresponding code