What is the use of Tree-shaking? Simply put it!

foreword

Hello everyone, I'm Lin Sanxin, uses the most simple and easy-to-understand words to describe the most difficult knowledge points. is my motto. is the foundation of advanced

background

Everyone is usually checking webpack build volume optimization , and they may find tree-shaking . Many people see this thing, and they will memorize it to deal with the situation that the interviewer may ask in the future.

However, how many people really know about tree-shaking ? Practice it yourself to see what role does tree-shaking play? How much optimization is there for our packaging size?

What's the use?

The Chinese meaning of Tree Shaking is tree shaking. In webpack, it refers to shaking the useless code during packaging to optimize the packaging results.

And webpack5 already comes with this function. When the packaging environment is production , the tree-shaking function is enabled by default.

practice

pre-preparation

Prepare two files main.js、util.js

• util.js

  function a () {
  console.log('a')
  }
  function b () {
  console.log('b')
  }
  export default {
  a, b
  }

• main.js

  import a from './util'
  
  // 使用a变量，调用文件里面的a函数，不使用b函数
  console.log(a.a())
  console.log('hello world')
  
  // 不可能执行的代码
  if (false) {
  console.log('haha')
  }
  
  // 定义了但是没用的变量
  const m = 1

Bale

As mentioned earlier, if webpack5 is packaged in the environment production , tree-shaking is enabled by default, then we run npm run build to package it and see what the packaged code looks like:

(()=>{"use strict";
const o=function(){console.log("a")};
console.log(o())
console.log("hello world")}
)();

Conclusion: It can be seen that after packaging, the b function, impossible code, and undefined variables are all eliminated. This can reduce a lot of code in a project, thereby reducing the size of the packaged file.

sideEffects

side effect

Let's talk about one thing first - the side effect of , what is it? Side effects refer to things that are done in addition to exporting members. For example, the following a.js has no side effects, and b.js has side effects:

• a.js

  function console () {
  console.log('console')
  }
  export default {
  console
  }

• b.js

  function console () {
  console.log('console')
  }
  
  // 这个就是副作用，会影响全局的数组
  Array.prototype.func = () => {}
  
  export default {
  console
  }

The judgment of whether there are side effects of can determine the degree of optimization of tree-shaking , for example:

• I now introduce a.js but I don't use his console function, so I can completely omit the a.js file in the optimization stage.
• I now introduce b.js but I don't use his console function, but I can't pack the file b.js , because it has the side effect of , so I can't pack it.

Use of sideEffects

sideEffects can be set in package.json :

// 所有文件都有副作用，全都不可 tree-shaking
{
 "sideEffects": true
}
// 没有文件有副作用，全都可以 tree-shaking
{
 "sideEffects": false
}
// 只有这些文件有副作用，
// 所有其他文件都可以 tree-shaking，
// 但会保留这些文件
{
 "sideEffects": [
  "./src/file1.js",
  "./src/file2.js"
 ]
}

optimized volume

When I set sideEffects to true , the entire package volume increased by 100k , indicating that the default false is still useful. .

Epilogue

I'm Lin Sanxin, an enthusiastic front-end rookie programmer. If you are motivated, like the front-end, and want to learn the front-end, then we can make friends and fish together haha, touch the fish group, add me, please note [Si No]