tree-shaking

data

  • Your tree-shaking is not good for eggs
  • Tree-Shaking Performance Optimization Practices – Principles
  • A rollup online repl

What is a tree – sahking

Removes unreferenced code from the JS context

The tree – shaking principle

  • Based on ES6 module
  • Import Binding is immutable. ES6 module dependencies are deterministic, independent of runtime state, and can be reliably analyzed statically. This is the basis for tree-shaking
  • Analyze the program flow to determine which variables are not used or referenced, and then delete the code

PS: export default is not tree shaking, even if it is not called

The tree – shaking vue3

  • Function-based API
  • Global API tree – shaking
// vue2
import Vue from 'vue'

Vue.nextTick(() = > {
  // Something DOM related
})

// vue3
import { nextTick } from 'vue'

nextTick(() = > {
  // Something DOM related
})
Copy the code

Rollup

Rollup is really suitable for tree-shaking,

  • The ES module package can be exported
  • Support flow analysis to determine if the project’s own code has side effects

Babel

Babel takes ES6/ES7 code and converts it into code that specific browsers can support. Because of this, we front-end developers have the beautiful development environment we have today, with the ability to use the latest JavaScript language features without regard to browser compatibility.

Because Babel is compiled, some code that we don’t see as having side effects is converted to have side effects

UglifyJS

// maths.js
export function square ( x ) {
	return x.a
}
square({ a: 123 })

export function cube ( x ) {
	return x * x * x;
}

//main.js
import { cube } from './maths.js';
console.log( cube( 5));/ / 125


Copy the code

Pack the result

The problem was packing square in

function square ( x ) {
  return x.a
}
square({ a: 123 });

function cube ( x ) {
	return x * x * x;
}
console.log( cube( 5));/ / 125

Copy the code

conclusion

  • Function arguments that reference types can have adverse effects on operations on their attributes. Because it is a reference type in the first place, any changes to its properties actually change the data outside the function. Gets or modifies its propertiesgetterorsetterAnd thegetter,setterIt’s opaque and can cause side effects
  • Uglify has no perfect program flow analysis. It can simply judge whether a variable is referenced or modified later, but it cannot judge the complete modification process of a variable. We do not know whether it has pointed to external variables, so many codes that may have side effects can only be conservative and not deleted.
  • Rollup has flow analysis to better determine if the code is actually causing side effects.

conclusion

  1. Try not to write code with side effects. Such as writing a function that executes immediately and using external variables in the function.
  2. If you are not particularly strict about ES6 semantic features, you can turn Babel onlooseMode, which depends on your project, such as whether you really want an unenumerable class property.
  3. If you are developing a JavaScript library, use rollup. The ES6 Module version is also provided, and the entry file address is set to package.jsonmoduleField.
  4. If JavaScript library development inevitably produces side effects, you can package functions or components into separate files or directories that users can easily load from. If possible, you can also develop a separate Webpack-loader for your own library, so that users can load it on demand.
  5. In the case of engineering project development, it is only up to the component provider to see if they have optimizations corresponding to points 3 and 4 above for dependent components. For their own code, except 1, 2 points, for the ultimate requirements of the project, can be packaged first, and then compile.
  6. If you’re really sure about the project, you can use some of Uglify’sCompile the configuration, such as:pure_getters: trueDelete code that is forced to assume no side effects.