webpack-tree shaking

介绍

tree shaking的作用：去除无用代码，减少代码体积

开启的前提：

1、必须使用es6模块化

2、在production环境中运行

测试

test.js中创建3个方法，并且test和test2方法在index.js中引用并使用，而test3没有地方使用

console.log('test.js执行了')

export function test() {
    const value = 'hello world'
    console.log('test value: ', value)
}

export function test2(arr) {
    if (!arr || arr.length <= 0) {
        console.log('test2 传参错误')
        return
    }
    const result = arr.reduce((sum, current) => sum += current, 0)
    console.log('test2  result: ', result)
}
export function test3(a, b) {
    console.log('test3 执行力')
    return a + b
}

执行webpack之后查看输出文件built.js文件。

因为是生产环境，所以代码被压缩了，直接搜索test,test2,test3

搜索test:

搜索test2:

 搜索test3:

 从搜索结果可以看出，test，test2都被打包了，而test3因为没有地方引用，所以没有被打包进built.js中。

所以tree shaking可以去除无用代码，减少代码体积，从而提升构建速度。

通过sideEffects控制被tree shaking的文件”

在package.json文件中设置sideEffects属性

设置"sideEffects":false

删除build文件之后重新执行webpack命令之后会发现输出文件中没有css文件夹，也就是所有的css，less文件都没有打包。

 

解释：设置sideEffects为false意味着告诉webpack所有的代码都没有副作用，都可以进行tree shaking。

所以当设置siedeEffects为false时，会将一些只需引用不需要调用的代码也作为无用文件处理了，例如样式文件等

排序需要的文件

既然直接设置sideEffects为false会将样式文件等一些需要的文件作为无用文件处理，我们可以排除这些文件，设置"sideEffects":["*.css","*.less"]

这样重新运行webpack命令，就会发现打包输出文件中有css文件夹中了。

设置  "sideEffects":true 

设置  "sideEffects":true和不设置sideEffects是一样的效果