本文详细介绍了Tree-Shaking的概念及其实现原理，解释了如何利用Webpack等工具进行Tree-Shaking，从而有效地移除未使用的代码，减少代码体积，提高前端应用的性能。
什么是tree-shaking呢?
可以理解为：通过工具"摇"我们的JS文件，将其中用不到的代码"摇"掉，是一个性能优化的范畴。
具体的来说，在 前端项目中，webpack配置文件中有一个入口文件，相当于一棵树的主干，入口文件有很多依赖的模块，相当于树枝。实际情况中，虽然依赖了某个模块，但其实只使用其中的某些功能。通过 tree-shaking，将没有使用的模块摇掉，这样来达到删除无用代码的目的。
作用
去除无用代码，减少代码体积
使用tree-shaking的前提
- 必须使用es6模块化
- 开启production模式
但是这个也有问题，可能因为webpack版本的问题。比如我们在package.json中配置：
// 表示所有代码都没有副作用，都可以进行tree shaking
sideEffects: false 问题：可能会在构建过程中干掉某些文件比如css文件（干掉没有引用的文件）
改为：
// 就不会把css文件干掉了。[]中标记不要被tree shaking的文件类型
sideEffects: ["*.css"]
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
