The opening takeaway

This article will take you to the big picture and take a look at what tree-Sharking really is. Is it mysterious? No, let’s expose him for what he is

What is tree-sharking

Let’s translate it literally: Tree is a Tree, sharking is to shake. Then when the tree shakes, it must ‘shake’ down some useless leaves. From a programming point of view, if we assume that our code is a Tree, what are the useless leaves that we shake off? Useless code, of course. The technical term for it is dead-code.

The origin of technology

If you want to understand a technology, it is necessary to see how it develops. Let’s take a look at what Tree Sharking is

So what are these three things

  • Rollup: It is also a packaging tool, but it has a clearer syntax than WebPack, which makes it more suitable for packaging some libraries. React and Vue use rollup for packaging
  • Webpack: You know what this is, but it’s better to package large applications
  • Google Closure Compiler: Google’s JAVASCRIPT compression tool for developers is the first to do tree-Sharking

Why can tree-sharking be performed

As you know, Js is a dynamically typed language, or what we often call a weakly typed language, which makes dependency analysis very difficult

In fact, tree-Sharking takes advantage of one of the ES Module features, which is called Static Module structure

It literally means static module structure, so what was it before?

The module management tool we used earlier was require (” “), where module dependencies are dynamic. By dynamic, we mean that we only know what module is required when the code is running. The ES Module feature, static analysis, makes tree-sharking possible, which is why webpack has an official explanation:

Static structure of the ES Module

Tree-sharking Tree- Sharking Tree- Sharking Tree- Sharking Tree- Sharking Tree- Sharking Tree- Sharking Tree- Sharking Tree- Sharking Tree- Sharking Tree- Sharking Tree- Sharking Tree- Sharking Tree- Sharking Tree- Sharking Tree- Sharking Tree- Sharking Tree- Sharking Tree- Sharking Tree- Sharking Tree- Sharking Tree- Sharking Tree- Sharking Tree- Sharking Tree- Sharking Tree- Sharking Tree- Sharking Tree- Sharking Tree

4.1 Dynamic Structure

The first sentence of the opening paragraph reads:

Current JavaScript module formats have a dynamic structure: What is imported and exported can change at runtime

Modern JavaScript modules are dynamic: this means that we can modify imported and exported at run time

I’m sorry, but I don’t think so.

if (Math.random()) {
    my_lib = require('foo');
} else {
    my_lib = require('bar');
}
Copy the code

You can see that the require above introduces different modules based on the math.random () variable. So let’s say the code has a lot of this syntax, and if you were to analyze the dependencies of a module, what would you do? I’m gonna have to be alone

4.2 Static Structure

At this time posted a picture of the front end of Baidu takeout (lazy)

Looking at the dynamic structure defects above, you should understand what the bottom of the diagram means: the dependencies are defined, independent of the runtime state, can be reliably static analyzed, and then eliminated

4.3 Advantages of static structure

ES officials offer several advantages

  • dead code elimination during bundling

  • compact bundling, no custom bundle format

  • faster lookup of imports

  • variable checking

  • ready for macros

  • ready for types

  • supporting other languages

  • Source of this section

  • Source of this section

We will write an article to explain what these things are, and we will post a link here for those who are interested to see them. Now we just need to know why static analysis can do tree-sharking

V. What time period did tree-Sharking take place

It happens when WebPack packages chunks into bundles

What is chunk and what is bundle

A chunk of a chunk of a chunk of a chunk of a chunk of a chunk of a chunk of a chunk of a chunk

So what does bundle mean in English? Bundle

When you bundle chunks into bundles, you bundle chunks together. Yes, that’s true

In the process of packaging one block at a time, we need to clean up useless code to optimize the size of the package file. So that’s our tree-sharking function

Well, here we have a macro understanding of tree-Sharking, and the following will be a further in-depth interpretation of tree-Sharking, I hope you are happy to see a thumbs-up support! (Welcome to correct mistakes)