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 相关文章推荐
解析Java异步之call future
Jun 14 Java/Android
Spring mvc是如何实现与数据库的前后端的连接操作的?
Jun 30 Java/Android
详解Java ES多节点任务的高效分发与收集实现
Jun 30 Java/Android
SpringBoot SpringEL表达式的使用
Jul 25 Java/Android
springboot 启动如何排除某些bean的注入
Aug 02 Java/Android
Log4j.properties配置及其使用
Aug 02 Java/Android
Java如何实现通过键盘输入一个数组
Feb 15 Java/Android
Java中的随机数Random
Mar 17 Java/Android
教你在 Java 中实现 Dijkstra 最短路算法的方法
Apr 08 Java/Android
Java 写一个简单的图书管理系统
Apr 26 Java/Android
Android中的Launch Mode详情
Jun 05 Java/Android
springboot 全局异常处理和统一响应对象的处理方式
Jun 28 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中的file_get_contents获取远程页面乱码的问题
2013/06/25 PHP
php的数组与字符串的转换函数整理汇总
2013/07/18 PHP
php实现在服务器端调整图片大小的方法
2015/06/16 PHP
PHP实现生成模糊图片的方法示例
2017/12/21 PHP
PHP生成短网址的思路以及实现方法的详解
2019/03/25 PHP
Ext面向对象开发实践(续)
2008/11/18 Javascript
关于html+ashx开发中几个问题的解决方法
2011/07/18 Javascript
js字符串转成JSON
2013/11/07 Javascript
jQuery点击自身以外地方关闭弹出层的简单实例
2013/12/24 Javascript
input标签内容改变的触发事件介绍
2014/06/18 Javascript
详解javascript高级定时器
2015/12/31 Javascript
jQuery短信验证倒计时功能实现方法详解
2016/05/25 Javascript
Html中 IFrame的用法及注意点
2016/12/22 Javascript
jQuery获取table下某一行某一列的值实现代码
2017/04/07 jQuery
一篇看懂vuejs的状态管理神器 vuex状态管理模式
2017/04/20 Javascript
mui框架移动开发初体验详解
2017/10/11 Javascript
JavaScript实现计算多边形质心的方法示例
2018/01/31 Javascript
JS回调函数简单易懂的入门实例分析
2019/09/29 Javascript
[02:37]2015国际邀请赛选手档案—LGD.Xiao8
2015/07/28 DOTA
《Python学习手册》学习总结
2018/01/17 Python
Django中Middleware中的函数详解
2019/07/18 Python
python爬虫模拟浏览器的两种方法实例分析
2019/12/09 Python
Python代码生成视频的缩略图的实例讲解
2019/12/22 Python
使用OpenCV获取图像某点的颜色值,并设置某点的颜色
2020/06/02 Python
详解numpy.ndarray.reshape()函数的参数问题
2020/10/13 Python
python实现粒子群算法
2020/10/15 Python
canvas生成带二维码海报的踩坑记录
2019/09/11 HTML / CSS
玖熙女鞋美国官网:Nine West
2016/10/06 全球购物
亚马逊西班牙购物网站:amazon西班牙
2017/03/06 全球购物
Mytheresa美国官网:德国知名的女性奢侈品电商
2017/05/27 全球购物
中式餐厅创业计划书范文
2014/01/23 职场文书
大四学生个人总结
2015/02/15 职场文书
2015年试用期自我评价范文
2015/03/10 职场文书
2015年房产经纪人工作总结
2015/05/15 职场文书
python中pandas.read_csv()函数的深入讲解
2021/03/29 Python
使用HBuilder制作一个简单的HTML5网页
2022/07/07 HTML / CSS