Webpack_（高级概念4.1）_Tree Shaking 概念详解

梦里梦外; 2023-06-24 08:05 126阅读 0赞

Tree Shaking 概念详解  
Tree Shaking指的是什么？  
打开项目进入index.js文件中，清空代码，然后打包项目，不会报错，但是实际上会报一个警告  
![在这里插入图片描述][201912211420090.png]  
在这个webpack版本下，如果在webpack.config.js配置了babel-loader的内容（我们已经将配置单独放在babelrc文件里），在preset-env中配置`"useBuiltIns": "usage"`这样的配置参数，实际上之前的代码不引入`import '@babel/polyfill';`也是一样的，所以这个警告是告诉我们，用了`"useBuiltIns": "usage"`babel/polyfill 会自动的去引入，也就没有必要在业务代码里去引入babel/polyfill了。

创建一个js文件，导出两个方法：

export const add = (a, b) => {
      console.log(a + b);
    }
    
    export const minus = (a, b) => {
      console.log(a - b);
    }

在index.js文件中引入`import { add } from './math.js'`  
在index.js中调用add方法，`add (1, 2);`控制台就输出了 3 ，说明代码正确运行  
在index.js文件中，我们引入了math.js中的add方法，但是并没有引入minus这个方法，但是打包生成的代码main.js中，minus方法也被打包了，index.js虽然只引入了add这一个方法，但是却把math里所有的方法都打包了，这是没有必要的，这样的打包会使main.js文件很大，最好是根据业务代码，按需打包，要实现这个功能，就使用Tree Shaking  
Tree Shaking的含义是把一个模块里没用的东西都摇晃掉。一个模块可以理解为一个文件，例如math.js，里面会导出很多内容，当我们去引入这个树的一部分，那么引用的部分做打包，不引入的部分剔除掉，这就是tree shaking概念  
在webpack中要想是现在tree shaking，该怎么做呢，**首先Tree Shaking只支持ES Moudule的引入**，也就是支持import模块的引入，如果使用`const add = require('./math.js)`这种Common JS的引入方式，那么Tree Shaking是不支持的，这是因为import这种ES Moudule的引入方式，它的底层是一个静态引入的方式，而Common JS是一种动态引入的方式，Tree Shaking只支持静态引入的方式。那么Tree Shaking如何做配置呢？  
在webpack.config.js文件中  
在development模式当中，默认是没有Tree Shaking这个功能的，要是想把它加上，要配置optimization

optimization: {
        usedExports: true
      }

usedExports顾名思义，哪些导出的模块被使用了再做打包，在开发环境中配置Tree Shacking就可以了  
接着，我们在package.json中写一个配置项`"sideEffects": false,`  
“sideEffects”: false,的意思是如果你配置了Tree Shaking，那么webpack只要打包一个模块就会运用Tree Shaking这种方式进行模块打包，假如引入了import ‘@babel/polly-fill’，babel/polly-fill实际上并没有导出任何内容，babel/polly-fill内部是在window对象上绑定了一些全局变量，并没有直接导出模块，但是假如用了Tree Shaking,发现没有导出任何东西，那么可能把babel/polly-fill打包的时候忽略掉了，那么打包就会出错，所以有的时候对这种文件要做特殊的设置，package.json的sideEffects就是做这样的设置来使用的，如果我们不想要对@babel/polly-fill Tree Shaking ,那么就在sideEffects写一个数组，把@babel/polly-fill加上去。`"sideEffects": ["@babel/polly-fill"]`，那么在打包的时候，Tree Shaking就不会对它有任何的作用。  
`"sideEffects": false,`的意思是项目中不需要引用@babel/polly-fill这种包，没有不需要做Tree Shaking的就需要这样配置，Tree Shaking正常的对所有的模块Tree Shaking。  
一般来说需要配置sideEffects的有css样式（import ‘./style.css’）

"sideEffects": ["
    "*.css"
    @babel/polly-fill"]

做好Tree Shaking的配置好再打包，我们发现minus方法依然存在，好像是没有生效，其实已经生效了，在development环境下，不会直接在打包生成的main.js去除掉，它只是会在文件里提示你  
![在这里插入图片描述][20200227174013678.png]  
之所以是这样的，是因为开发环境生成的代码还会做一些调试，如果Tree Shaking把一些代码删除掉的话，那么在做调试的时候sourcemap对应的行数会错了，所以开发环境下Tree Shaking还是会保留这些代码，那如果代码要打包上线，那要怎么配置  
把mode改为production, devtool 改为cheap-module-source-map  
其实在production环境下，reeshaking自动的就写好了一些配置，甚至不用写optimization这个配置项，但是package.json下的sideEffects还是要配置一下的  
这样线上treeshaking就生效了

[201912211420090.png]: https://img-blog.csdnimg.cn/201912211420090.png
[20200227174013678.png]: https://img-blog.csdnimg.cn/20200227174013678.png