webpack 中 Tree Shaking 概念详解_15

前提

代码内容如下，webpack配置采用前面文章积累的配置

math.js 文件中导出了add以及minus两个方法，在index.js文件中通过ES Module的方式导入其中的add方法。
执行npx webpack命令进行打包

查看打包后生成的dist文件夹下面的main.js文件，我们可以看见虽然我们没有使用 minus方法，但是打包的时候还是将整个 math.js文件的内容进行了打包。其实这是没有必要的，我们的业务代码中只有 add 方法，如果将 minus 方法也打包进来，其实会很大，最理想的打包方法是：我引入什么，webpack帮我打包什么。

Tree Shaking

webpack2.0后提出了 Tree Shaking 的概念，中文意思就是摇树的意思，把模块中没用的东西给摇晃掉。

首先，Tree Shaking只支持 ES Module模块的引入，因为这种方式底层采用的是静态引入的方式。而CommonJS底层是动态引入的方式
开发环境下是没有 Tree Shaking的配置的，因此我们需要配置开发环境下的优化项 optimization: true

接着需要在 package.json文件中配置 sideEffects

简单解释下 sideEffects的作用。 打包的时候就会对导入的模块进行tree shaking。检查具体导出了哪些内容。但是导入的 babel/polyfill内容，实际上是挂载在全局上的，比如window.promise。除此之外，如果在我们的业务代码中引入了css文件。只要是导入了一个模块，Tree shaking就会去看这个模块导出了什么内容。但是css文件实际上没有导出任何内容。因此可以做如下配置

但是我们这个 demo里面直接设置为 false就好了"sideEffects": false所有的模块都进行 tree shaking
执行npx webpack命令进行打包，这次多了下面的提示，导出只用到了 add方法。但是这个文件中依然有minus方法并不会删除掉，这是因为我们在开发环境下需要做一些调试，如果 Tree shaking 删除掉了一些代码，source-map 定位问题对应的行数就错了。

所以开发环境下Tree shaking 会保留代码，如果把 mode: 'production' 设置为生产环境，这个时候 tree shaking 就会生效了。此时 optimization 优化项就可以不用配置

执行npx webpack命令打包。可以看到生成的生产环境代码中，只能搜索到 add 方法的 console.log。而 minus 方法并没有被打包进来