“This is the 11th day of my participation in the First Challenge 2022. For details: First Challenge 2022”

introduce

You’ll often hear the word tree shaking in interviews or official sources, but it’s actually a built-in optimization that WebPack2 is building to reduce packaging size. Since a module may have multiple methods, when one of them is used, the whole file is typed into the package folder. In short, Tree shaking is packaging the code that is actually used, and the code that is not used is wiped away during the Uglify phase. In this issue we’ll look at how it works and what to look out for when using it.

use

Webpack is currently supported by default, with modules:false set to.babelrc and enabled by default if mode is production.

To test this, let’s write a js file with a few functions in it.

// tools.js
export function toolA(){
    return "This is my tool-A"
}
export function toolB(){
    return "This is my tools-B"
}
export function toolC(){
    return "This is my tools-C"
}
Copy the code

Then we introduce the main logic app.js, toolA is not used, toolB is not used, and toolC is used normally.

// app.js
import { toolA,toolB,toolC } from ".. /utils/tools"
if(false) {console.log(toolB())
}
console.log(toolC())
Copy the code

We then change its mode mode to None to see how it behaves when packaged.

// webpack.config.js
module.exports = {
  mode:"none".entry: {
    "app": path.resolve(__dirname, "src/app.js")},// ... more config
}
Copy the code

We found that if we didn’t use it, we would put our unused code and invalid code into the package.

Next, let’s turn on Tree shaking, since it is a built-in feature of Webpack, so change mode to Production and use it, and see what happens.

// webpack.config.js
module.exports = {
  mode:"production".entry: {
    "app": path.resolve(__dirname, "src/app.js")},// ... more config
}
Copy the code

At this point, unused toolA and invalid toolB are not packaged, as we expected, and Tree Shaking is using it successfully.

Pay attention to

It is important to note that we are using Tree shaking for Webpack, the code syntax is not CommonJS, it must be ES6.

The principle of

Webpack Tree shaking goes through Babel compilation, webPack tree shaking identifies invalid code, compressing and erecting identified invalid code with UglifyJS code, and finally exporting compatible code. So the question is, how do we figure out what works and what doesn’t?

Elimination takes advantage of ES6 module features. Elimination takes advantage of the Elimination principle. For example, import occurs only on the top level of the module. The module names for import must be string constants and binging is immutable. Based on these tokens, we go to the Uglify phase to erase the tokens which are useless code.

conclusion

Webpack is already integrated with Tree shaking, so it is extremely easy to use, and many newcomers may not even realize that tree shaking has already been done in the packaged code. If you have the time, take a look at the source code.