webpack中tree shaking和merge的作用

tree shaking的作用：
当我们在将index.js作为打包文件的入口文件时，如果我们在index.js文件中引入了一个其它的js文件（例如counter.js文件），而在counter.js文件中我们定义了两个函数分别A和B，但是我们在index.js文件中只使用了A函数，而没有使用B函数，当我们的webpack进行打包的时候，它会将index.js文件中引入的counter.js文件整个进行打包进来放入出口文件中，此时，我们的打包文件就会变得很臃肿。如果我们使用了tree shaking这个模块，它就会对index.js文件进行识别，当它识别到我们的index.js文件只使用了A函数时，它就会只将A函数引入进来，而不是将整个counter.js文件引入进来，这样就可以减小我们打包文件的体积。
需要注意的一点是：我们的tree shaking模块只针对静态引入起作用，也就是只针对我们ES Module这种模块引入起作用（即通过import方式），对动态模块引入（即const 变量=require）这种方式引入不起作用。

merge的作用：
我们在配置打包文件时，在module exports中有一个配置项mode是配置我们的环境的（即开发环境或者生产环境），而在这两种环境中，我们的配置项有相同点，也有不同点，此时就需要我们写两个配置文件，而这两个配置文件中又会出现一些相同的配置项，此时就会让我们的代码看起来比较冗余。解决方案就是我们再写一个配置文件，然后将我们两个配置文件中的相同的配置项提取出来写入我们的公共配置文件，然后将这个公共配置文件分别在两个配置文件中引入，引入之后就会涉及到我们的公共配置代码与私有配置代码合并的问题，此时就需要用到我们的一个三方模块（webpack-merge），它的作用就是将我们的私有配置项和公共配置项进行合并，然后再通过module exports将合并后的配置导出。