应用场景,引入了test.js,里面有两个方法function a(){},function b(){},但是只是用了一个a,另一个b没有用到,其实就没必要打包进项目里面。
1. Tree Shaking 只支持ES module 语法
2. webpack的配置文件中 optimization :{ usedExports:true },代表启用Tree Shaking,其实production模式下中,模式也已经开启。
3. package.json 中添加属性
"sideEffects":false。
sideEffects 可以写成数组形式,用来忽略对某些库或者文件进行Tree Shaking sideEffects:['@babel/poly-fill','./style/css'], 因为代码写法可能是这样:
import '@babel/poly-fill'
并没有用变量形式来接住。
4. webpack的配置文件中
mode: 'production'
当mode为developent模式时,其实开发中,打包出来的文件中,并不会把test.js文件的b也剔除掉,原因是方便开发时候进行调试。 当mode为production模式时,打包出来的项目里面就没有b了。