这篇“tree shaking对打包体积优化及作用实例分析”文章的知识点大部分人都不太理解，所以小编给大家总结了以下内容，内容详细，步骤清晰，具有一定的借鉴价值，希望大家阅读完这篇文章能有所收获，下面我们一起来看看这篇“tree shaking对打包体积优化及作用实例分析”文章吧。
Tree Shaking中文含义是摇树，在webpack中指的是打包时把无用的代码摇掉，以优化打包结果。
而webpack5已经自带了这个功能了，当打包环境为production时，默认开启tree-shaking功能。
准备两个文件main.js、util.js
util.js
计算
安全
数据库
网络和加速
企业服务
function a () {
console.log('a')
}
function b () {
console.log('b')
}
export default {
a, b
}main.js
import a from './util'
// 使用a变量，调用文件里面的a函数，不使用b函数
console.log(a.a())
console.log('hello world')
// 不可能执行的代码
if (false) {
console.log('haha')
}
// 定义了但是没用的变量
const m = 1前面说了webpack5在环境production下打包的话，默认开启tree-shaking，那我们运行npm run build进行一下打包，看看打包后的代码长啥样：
(()=>{"use strict";
const o=function(){console.log("a")};
console.log(o())
console.log("hello world")}
)();结论：可以看到打包后，把b函数、不可能执行的代码、定义未用的变量通通都剔除了，这在一个项目中，能减少很多的代码量，进而减少打包后的文件体积。
先来讲讲一个东西——副作用，是什么东西呢？副作用指的是：除了导出成员之外所做的事情，我举个例子，下面的a.js是没副作用的，b.js是有副作用的：
a.js
function console () {
console.log('console')
}
export default {
console
}b.js
function console () {
console.log('console')
}
// 这个就是副作用，会影响全局的数组
Array.prototype.func = () => {}
export default {
console
}有无副作用的判断，可以决定tree-shaking的优化程度，举个例子：
我现在引入a.js但是我不用他的console函数，那么在优化阶段我完全可以不打包a.js这个文件。
我现在引入b.js但是我不用他的console函数，但是我不可以不打包b.js这个文件，因为他有副作用，不能不打包。
sideEffects可以在package.json中设置：
// 所有文件都有副作用，全都不可 tree-shaking
{
"sideEffects": true
}
// 没有文件有副作用，全都可以 tree-shaking
{
"sideEffects": false
}
// 只有这些文件有副作用，
// 所有其他文件都可以 tree-shaking，
// 但会保留这些文件
{
"sideEffects": [
"./src/file1.js",
"./src/file2.js"
]
}当我把sideEffects设置成true之后，整个打包体积增加了100k，说明默认的false还是有用的。
以上就是关于“tree shaking对打包体积优化及作用实例分析”这篇文章的内容，相信大家都有了一定的了解，希望小编分享的内容对大家有帮助，若想了解更多相关的知识内容，请关注亿速云行业资讯频道。
亿速云「云服务器」，即开即用、新一代英特尔至强铂金CPU、三副本存储NVMe SSD云盘，价格低至29元/月。点击查看>>
免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：is@yisu.com进行举报，并提供相关证据，一经查实，将立刻删除涉嫌侵权内容。
