tree shaking（樹搖）是程式碼中的一種技術實現

我們現在實際工作中遇到的一個問題之一就是共享庫的數量問題。從簡單的自定義的庫，到企業級的標準庫，其實都是技術債務，其中最大的問題就是所有的應用程式或者模組，都在匯入這些庫，而實際上每一個模組本身只用到了其中的一小部分

tree shaking就可以幫我們解決

什麼是tree shaking？比如一個樹上有很多枯樹葉，此時我們要想把這些枯萎的樹葉從樹上分離下來，最好的辦法就是搖晃這個樹葉；我們從工作中考慮，冗餘的程式碼，就可以理解為枯萎的樹葉。

樹搖的概念就是去掉冗餘的、多餘、用不到、沒用的程式碼；

實現tree shaking 兩個先決條件

• mode為production模式（開發模式）
• js檔案引用要使用module模式（import ** form **）

此時的入口檔案是a.js檔案

import { fun} from "./b.js";
console.log(fun(1,2));

b.js

 export function fun (a,b){
    return a+b
}
export function minus(a, b) {
    return a - b;
  }
  

進行webpack打包之後發現，minus方法沒有打包進去

這就實現了tree shaking功能

程式碼會有副作用，因為我們的其他檔案，比如css檔案，此時如果我們沒有配置tree shaking，所有的檔案都會被引入

配置package.json檔案來決定忽略哪些檔案不參與樹搖

"sideEffects": false //沒有忽略，所有檔案都參與
"sideEffects": true//所有檔案都忽略，不參與樹搖

如果sideEffects為true了會有副作用，比如我們的css檔案，此時就不會進行顯示了

// 如果是陣列，則表示內部的檔案地址不參與樹搖，被忽略
"sideEffects": [
    "./15_tree shaking/src/a.js"
]

如果我們不希望css檔案參與樹搖，其他的檔案可以參與樹搖，單獨再loader中配置

rules: [
      {
        test: 
 
/\.css$/,
        use: [
         "style-loader",
          'css-loader'
        ],
        sideEffects: true
      }
    ]