One, foreword

Last time I talked about handling JS syntax, this article will take a look at Tree Shaking.

// math.js
const add = (a, b) = > a + b;
const minus = (a, b) = > a - b;
export {
  add, minus
}

// main.js
const { add } from 'math.js'
console.log(add(1.2));
Copy the code

We often import code from other modules in the main file or component file, but we only use part of it. The rest of the code doesn’t need to be imported. By default, however, it is still all imported and packaged.

Now, to weed out the rest, use “Tree Shaking.”

Tree Shaking is not an example.

When I was a child, in order to eat the fruit on the tree, we will be naughty to shake a tree, in a thousand ways, dead leaves will fall to the ground, mature fruit will also, these are not supposed to stay on the tree. In the same way, if you’re Tree Shaking, extra code that shouldn’t be in your code is shaken away (for example, in the above example, minus in the math.js module is shaken off and not part of the packaging), thus reducing the amount of code and improving performance.

Tree Shaking can be used in different ways.

First, let’s be clear: Tree Shaking only supports ESM imports, not Common JS imports.

  • ESM: export + import
  • Common JS: module.exports + require

If you want to Tree Shaking a piece of code, avoid importing the entire library into a JS object. If you do, Webpack will assume that you need the whole library and will not do Tree Shaking.

Here is an example of importing LoDash. If you are importing part of LoDash, you can Tree Shaking.

// Import everything (NOT TREE-SHAKABLE)
import _ from 'lodash';

// Import named export (CAN BE TREE SHAKEN)
import { debounce } from 'lodash';

// Import the item directly (CAN BE TREE SHAKEN)
import debounce from 'lodash/lib/debounce';
Copy the code

4. Basic configuration

1. Configuration in the development environment

// webpack.config.js
module.exports = {
  // ...
  mode: 'development'.optimization: {
    usedExports: true,}};Copy the code

2. Configuration in the production environment

// webpack.config.js
module.exports = {
  // ...
  mode: 'production'};Copy the code

In a production environment, Webpack adds the Tree Shaking configuration by default, so just write a line of mode: ‘Production’.

Webpack.js.org/guides/tree…

3. sideEffects: false

Once configured for your environment, you also need to add a field in package.json: **sideEffects: false, ** to tell Webpack what code can be processed.

{
  "name": "webpack-demo-1"."sideEffects": false.// ...
}
Copy the code

Five, the sideEffects

  • SideEffects defaults to true, telling Webpack that all files have sideEffects and that they cannot be shaken by Tree.
  • When sideEffects is false, tell Webpack that no files have sideEffects and they can all Tree Shaking.
  • When sideEffects is an array, tell Webpack that those files in the array should not be Tree Shaking, and the rest should be Tree Shaking.
// All files have side effects, and none can be tree-shaken
{
 "sideEffects": true
}

// No files have side effects, all can be tree-shaken
{
 "sideEffects": false
}

// Only these files have side effects, all other files can be tree-shaken, but these must be kept
{
 "sideEffects": [
  "./src/file1.js"."./src/file2.js"]}Copy the code

SideEffects on global CSS

Files that are imported directly into JS files, such as global CSS, are not converted into a CSS module.

/* reset.css */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html.body {
  background-color: #eaeaea;
}
Copy the code
// main.js
import "./styles/reset.css"
Copy the code

Such code, when packaged, opens the page and you find that the style is not applied because: When we set sideEffects to false above, all files are Tree Shaking, and CSS imported through import is treated as useless code.

To solve this problem, add sideEffects: true to the Loader rule configuration to tell Webpack not to Tree Shaking these files.

// webpack.config.js
module.exports = {
  // ...
    module: {
    rules: [{test: /\.css$/i,
        use: ["style-loader"."css-loader"].sideEffects: true}]}};Copy the code

Note: This field can be configured in all module rules.

summary

That’s all for this article.

  • -Rufus: Tree Shaking
  • Import, ESM: The key to tree shaking
  • Optimization, usedExports: Basic configuration in a development environment
  • sideEffects: Scope of tree shaking
    • Configuration in package.json: sideEffects: false (all shaken)
    • Field in rule configuration: sideEffects: true (keeps global files from being shaken out)