tree shaking对打包体积优化及作用
背景
大家平时在查 webpack构建体积优化 ，可能都会查到 tree-shaking 这个东西，很多人看到这个东西，就会把它背下来，用来应付以后面试官可能会问到的情况。
但是，又有多少人去真的了解一下 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函数、不可能执行的代码、定义未用的变量通通都剔除了，这在一个项目中，能减少很多的代码量，进而减少打包后的文件体积。
sideEffects
副作用
先来讲讲一个东西——副作用，是什么东西呢？副作用指的是：除了导出成员之外所做的事情，我举个例子，下面的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的使用
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对打包体积优化及作用的详细内容，更多关于tree shaking打包体积优化的资料请关注脚本之家其它相关文章！
相关文章
这篇文章主要介绍了微信小程序 wxapp导航 navigator详解的相关资料,并附简单实例代码，需要的朋友可以参考下2016-10-10
构造函数就是初始化一个实例对象，对象的prototype属性是继承一个实例对象。本文给大家分享javascript构造函数详解，对js构造函数相关知识感兴趣的朋友一起学习吧2021-08-08
这篇文章主要介绍了Javascript设计模式之原型模式，原型模式用于在创建对象时，通过共享某个对象原型的属性和方法，从而达到提高性能、降低内存占用、代码复用的效果。下面小编将详细介绍 ,需要的朋友可以参考下2021-09-09
这篇文章主要介绍了详解微信小程序设置底部导航栏目方法的相关资料,需要的朋友可以参考下2017-06-06
requestAnimationFrame定时动画屏幕刷新率节流示例浅析
这篇文章主要为大家介绍了requestAnimationFrame定时动画屏幕刷新率节流示例浅析，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2023-02-02
这篇文章主要为大家介绍了qiankun 找不到入口问题彻底解决，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2022-08-08
JavaScript Broadcast Channel API使用学习
这篇文章主要为大家介绍了JavaScript的api学习之Broadcast Channel API使用方法详解,有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2023-05-05
这篇文章主要介绍了微信小程序之前台循环数据绑定的相关资料,这里提供实例帮助大家学习理解这部分内容，需要的朋友可以参考下2017-08-08
这篇文章主要为大家介绍了Selection与Range 对象操作示例指南，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2022-09-09
Project Reference优化TypeScript编译性能示例
这篇文章主要为大家介绍了Project Reference优化TypeScript编译性能示例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2022-08-08
最新评论