tree shaking对打包体积优化及作用


Posted in Java/Android onJuly 07, 2022

背景

大家平时在查 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打包体积优化的资料请关注三水点靠木其它相关文章!


Tags in this post...

Java/Android 相关文章推荐
SpringCloud的JPA连接PostgreSql的教程
Jun 26 Java/Android
详解Java ES多节点任务的高效分发与收集实现
Jun 30 Java/Android
Java中多线程下载图片并压缩能提高效率吗
Jul 01 Java/Android
Java 实战项目之家居购物商城系统详解流程
Nov 11 Java/Android
聊聊Lombok中的@Builder注解使用教程
Nov 17 Java/Android
JPA 通过Specification如何实现复杂查询
Nov 23 Java/Android
Java中try catch处理异常示例
Dec 06 Java/Android
Android基于Fresco实现圆角和圆形图片
Apr 01 Java/Android
springboot应用服务启动事件的监听实现
Apr 06 Java/Android
Spring IOC容器Bean的作用域及生命周期实例
May 30 Java/Android
Spring Security动态权限的实现方法详解
Jun 16 Java/Android
SpringBoot使用ip2region获取地理位置信息的方法
Jun 21 Java/Android
MyBatis在注解上使用动态SQL方式(@select使用if)
Jul 07 #Java/Android
一文了解Java动态代理的原理及实现
Jul 07 #Java/Android
Java实现字符串转为驼峰格式的方法详解
Jul 07 #Java/Android
Spring中bean集合注入的方法详解
java中如何截取字符串最后一位
Jul 07 #Java/Android
Java 中的 Lambda List 转 Map 的多种方法详解
Jul 07 #Java/Android
SpringBoot项目多数据源及mybatis 驼峰失效的问题解决方法
Jul 07 #Java/Android
You might like
php简单实现数组分页的方法
2016/04/30 PHP
php reset() 函数指针指向数组中的第一个元素并输出实例代码
2016/11/21 PHP
PHP大文件切割上传功能实例分析
2019/07/01 PHP
JavaScript脚本语言在网页中的简单应用
2007/05/13 Javascript
JavaScript 编程引入命名空间的方法与代码
2007/08/13 Javascript
解读IE和firefox下JScript和HREF的执行顺序
2008/01/12 Javascript
javascript 放大镜效果js组件 qsoft.PopBigImage.v0.35 加入了chrome支持
2009/04/07 Javascript
使用jQuery实现的掷色子游戏动画效果
2014/03/14 Javascript
javascript实现动态改变层大小的方法
2015/05/14 Javascript
nodejs导出excel的方法
2015/06/30 NodeJs
javascript数据类型验证方法
2015/12/31 Javascript
JS实现支持Ajax验证的表单插件
2016/03/24 Javascript
animate 实现滑动切换效果【实例代码】
2016/05/05 Javascript
HTML5+jQuery插件Quicksand实现超酷的星际争霸2兵种分类展示效果(附demo源码下载)
2016/05/25 Javascript
JS中mouseover和mouseout多次触发问题如何解决
2016/06/06 Javascript
jQuery层次选择器用法示例
2016/09/09 Javascript
Vue.js系列之vue-router(上)(3)
2017/01/03 Javascript
jQuery实现列表的增加和删除功能
2018/06/14 jQuery
详解使用mocha对webpack打包的项目进行"冒烟测试"的大致流程
2020/04/27 Javascript
详解JavaScript执行模型
2020/11/16 Javascript
python输出当前目录下index.html文件路径的方法
2015/04/28 Python
浅谈Python中数据解析
2015/05/05 Python
在Mac OS上搭建Python的开发环境
2015/12/24 Python
Python turtle绘画象棋棋盘
2019/08/21 Python
python打开使用的方法
2019/09/30 Python
解决Pycharm 导入其他文件夹源码的2种方法
2020/02/12 Python
css3中仿放大镜效果的几种方式原理解析
2020/12/03 HTML / CSS
Currentbody德国站:健康与美容技术专家
2020/04/05 全球购物
什么是makefile? 如何编写makefile?
2012/08/08 面试题
商务英语专业应届毕业生求职信
2013/10/28 职场文书
终端业务员岗位职责
2013/11/27 职场文书
社区务虚会发言材料
2014/10/20 职场文书
办公室主任岗位职责范本
2015/03/31 职场文书
2015年安全生产管理工作总结
2015/05/25 职场文书
爱国主义主题班会
2015/08/14 职场文书
教你用eclipse连接mysql数据库
2021/04/22 MySQL