复习webpack4之Tree Shaking

之前学习过webpack3的知识,但是webpack4升级后还是有很多变动的,所以这次重新整理一下webpack4的知识点,方便以后复习。

这次学习webpack4不仅仅要会配置,记住核心API,最好还要理解一下webpack更深层次的知识,比如打包原理等等,所以可能会省略一些比较基础的内容,但是希望我可以通过此次学习掌握webpack,更好地应对以后的工作。

1.不使用Tree Shaking

首先新建一个工具函数js,里面写入两个方法。

在index.js中只引入其中一个函数并调用,然后进行打包。

我们现在查看打包后的js,发现两个函数都被打包进去了。

这样会把没有使用的代码一起打包进最终的js,所以我们需要利用Tree Shaking来优化打包。

2.Tree Shaking

注意:Tree Shaking只支持ES Module引入方式。因为持ES Module底层是静态引用的方式,而commonjs是动态引入的方式。

webpack.config.js中,如果mode模式设为development,默认是不进行Tree Shaking的,需要加一个配置项来开启。在plugins同级加一个optimization,增加图中的配置项。

接着,在package.json中再加一个配置项"sideEffects": false。

加这个配置项原因是,如果引入的库没有export,Tree Shaking可能会直接忽略掉这个库,比如引入import "@babel/polly-fill",而babel/polly-fill没有任何export,就会不打包这个库,为了避免这个情况,我们需要把"sideEffects"的值填上["@babel/polly-fill"],这样Tree Shaking在打包过程中,就会忽略优化@babel/polly-fill。

我们设为false的原因是,我们的代码中没有需要忽略的库,所以都需要Tree Shaking。

除了一些库,如果我们引入css的话,Tree Shaking同样会不打包css文件,所以我们一般还会加上这样的配置。

接下来我们重新打包,发现webpack只使用了add方法。

可是为什么minus方法还存在呢?因为在development模式下,即使用了Tree Shaking,也不会在打包文件中删除minus,避免调试的时候,因为删除了代码,导致代码行数错误。

如果mode是production,Tree Shaking是自动配置好的,我们也不用配置optimization,但是package.json中的sideEffects还是需要写,并且在production模式下,没有用到的代码会被删除。

转载于:https://juejin.im/post/5cced839e51d453b222b795d

你可能感兴趣的:(复习webpack4之Tree Shaking)