webpack中的Tree Shaking功能

384 阅读1分钟

应用场景,引入了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了。