tree shaking

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
      }
    ]