preface

Hello everyone, I am Lin Sanxin, with the most easy to understand the most difficult knowledge points is my motto, the basis is advanced premise is my initial mind

background

If you’re looking for WebPack build volume optimization, you’ll probably see tree-shaking. When you see it, you’ll learn it by heart and use it for everything your interviewer might ask you about it.

But how many people actually understand tree-shaking? See for yourself how tree-shaking works. How much optimization is there for our packaging volume?

Have a purpose?

Tree Shaking in Chinese is Shaking the Tree, in Webpack it means Shaking away useless code when packaging to optimize the results.

Webpack5 already has this functionality, and tree-shaking is enabled by default when the packaging environment is production.

practice

Lead to

Prepare two files main.js and util.js

  • util.js
function a () {
  console.log('a')}function b () {
  console.log('b')}export default {
  a, b
}
Copy the code
  • main.js
import a from './util'

// Use a variable to call a function in the file, not b function
console.log(a.a())
console.log('hello world')

// Impossible to execute code
if (false) {
  console.log('haha')}// A variable is defined but not used
const m = 1
Copy the code

packaging

If webPack5 is packaged in production, tree-shaking is enabled by default. If webpack5 is packaged in production, tree-shaking is enabled by default.

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

Conclusion: You can see that removing b functions, code that is impossible to execute, and variables that are not defined can reduce the amount of code in a project and thus reduce the size of the packaged file.

sideEffects

Side effects

Let’s start with one thing — what are side effects? Side effects refer to things that are done in addition to exporting members. For example, the following a.js does not have side effects and the following B. js does have side effects:

  • a.js
function console () {
  console.log('console')}export default {
  console
}
Copy the code
  • b.js
function console () {
  console.log('console')}// This is a side effect that affects the global array
Array.prototype.func = () = > {}

export default {
  console
}
Copy the code

The level of optimization for tree-shaking is determined by the presence or absence of side effects. For example:

  • I’m going to introducea.jsBut I don’t use hisconsoleFunction, so I don’t have to package at all during the optimization phasea.jsThis file.
  • I’m going to introduceb.jsBut I don’t use hisconsoleFunction, but I can’t not packb.jsThis file, because he had itSide effectsCan’t afford not to pack.

The use of sideEffects

SideEffects can be set in package.json:

// All files have side effects, all are not tree-shaking
{
 "sideEffects": true
}
// No file has side effects, all can tree-shaking
{
 "sideEffects": false
}
// Only these files have side effects,
// All other files can be tree-shaking,
// These files will be kept
{
 "sideEffects": [
  "./src/file1.js"."./src/file2.js"]}Copy the code

Optimization of volume

When I set sideEffects to True, the total package volume increased by 100K, indicating that the default false is still useful.

conclusion

I am Lin Sanxin, an enthusiastic front-end novice programmer. If you progress, like the front end, want to learn the front end, then we can make friends, touch fish ha ha, touch fish, point this –> touch fish boiling point