Tree shaking data collection and learning

zeroone001 2021-09-15 09:48:30



What is? tree-sahking

remove JS Unreferenced code in context

tree-shaking principle

  • be based on ES6 Module implementation
  • Can only appear as a statement at the top of the module import The module name of can only be a string constant import binding yes immutable Of ES6 Module dependencies are deterministic , It has nothing to do with the state of the runtime , Reliable static analysis , This is it. tree-shaking The basis of
  • Analyzer flow , Determine which variables are not used 、 quote , And then delete this code

PS:export default The object is import after , Hang on default Properties or methods on the , Even if not called , I can't tree-shaking

vue3 Medium tree-shaking

  • Function based API
  • overall situation API tree-shaking
// vue2
import Vue from 'vue'
Vue.nextTick(() => {
// Some and DOM Something about it 
// vue3
import { nextTick } from 'vue'
nextTick(() => {
// Some and DOM Something about it 
 Copy code 


Rollup It's really suitable for tree-shaking,

  • Support export ES Module package
  • Support program flow analysis , Be able to judge whether the code of the project itself has side effects


Babel No need for me to explain , It can ES6/ES7 The code is converted into the code that the specified browser can support . It's because of it , We front-end developers can have today's beautiful development environment , To be able to 、 Enjoy the latest JavaScript Linguistic characteristics .

because babel Compilation of , Some code that we don't seem to have side effects , It turns into a with side effects


// maths.js
export function square ( x ) {
return x.a
square({ a: 123 })
export function cube ( x ) {
return x * x * x;
import { cube } from './maths.js';
console.log( cube( 5 ) ); // 125
 Copy code 

Packing results

problem , Out of the hand square Packed in

function square ( x ) {
return x.a
square({ a: 123 });
function cube ( x ) {
return x * x * x;
console.log( cube( 5 ) ); // 125
 Copy code 


  • If the parameter of the function is a reference type , For the operation of its properties , All of them may have side effects . Because first it's a reference type , Any modification of its properties actually changes the data outside the function . Second, get or modify its properties , Will trigger getter perhaps setter, and gettersetter It's opaque , There may be side effects
  • uglify There is no perfect program flow analysis . It can simply determine whether the variable is referenced later 、 modify , But we can't judge the complete modification process of a variable , I don't know if it already points to an external variable , So a lot of code that can have side effects , Can only be conservative not to delete .
  • rollup It has the function of program flow analysis , It's better to judge whether the code really has side effects .


  1. Try not to write code with side effects . Such as writing an immediate function , The external variables are used in the function .
  2. If the ES6 Semantic features are not very strict , Can be opened babel Of loose Pattern , This should be judged according to the project itself , Such as : Is it true that you can't lift it class Properties of .
  3. If it's development JavaScript library , Please use rollup. And to provide ES6 module Version of , The entry file address is set to package.json Of module Field .
  4. If JavaScript Library Development , It's hard to avoid all kinds of side effect code , You can put function or component , Package as a separate file or directory , So that users can load through the directory . If there is any condition , You can also develop separate webpack-loader, It is convenient for users to load on demand .
  5. If it's an engineering project development , For dependent components , It can only be seen whether the component provider has corresponding to the above 3、4 Point optimization . For your own code , except 1、2 Two o'clock away , If there are extreme requirements for the project , You can pack it first , And finally, compile .
  6. If you are very confident about the project , Can pass uglify Some of Compile configuration , Such as :pure_getters: true, Remove code that is forced to think it won't have side effects .
Please bring the original link to reprint ,thank
Similar articles