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实践之抽象工厂模式
Jun 18 Java/Android
Java数据结构之链表相关知识总结
Jun 18 Java/Android
java中重写父类方法加不加@Override详解
Jun 21 Java/Android
Java数组与堆栈相关知识总结
Jun 29 Java/Android
Eclipse+Java+Swing+Mysql实现电影购票系统(详细代码)
Jan 18 Java/Android
Java实现经典游戏泡泡堂的示例代码
Apr 04 Java/Android
Android Flutter实现图片滑动切换效果
Apr 07 Java/Android
Android Rxjava3 使用场景详解
Apr 07 Java/Android
详解Alibaba Java诊断工具Arthas查看Dubbo动态代理类
Apr 08 Java/Android
Spring Boot 实现 WebSocket
Apr 30 Java/Android
SpringBoot全局异常处理方案分享
May 25 Java/Android
Java结构型设计模式之组合模式详解
Sep 23 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
是否存在第一台收音机的说法
2021/03/01 无线电
PHP数据库开发知多少
2006/10/09 PHP
php session 错误
2009/05/21 PHP
php更新修改excel中的内容实例代码
2014/02/26 PHP
php获取域名的google收录示例
2014/03/24 PHP
php smarty模板引擎的6个小技巧
2014/04/24 PHP
Laravel搭建后台登录系统步骤详解
2016/07/26 PHP
laravel migrate初学常见错误的解决方法
2017/10/11 PHP
PHP数组对象与Json转换操作实例分析
2019/10/22 PHP
语义化 H1 标签
2008/01/14 Javascript
JS+DIV实现鼠标划过切换层效果的实例代码
2013/11/26 Javascript
Javascript 多物体运动的实现
2014/12/24 Javascript
JavaScript中数组成员的添加、删除介绍
2014/12/30 Javascript
客户端验证用户名和密码的方法详解
2016/06/16 Javascript
Javascript的动态增加类的实现方法
2016/10/20 Javascript
jQuery插件HighCharts实现的2D面积图效果示例【附demo源码下载】
2017/03/15 Javascript
微信小程序实现折叠面板
2018/01/31 Javascript
深入浅析var,let,const的异同点
2018/08/07 Javascript
使用vue实现HTML页面生成图片的方法
2020/03/12 Javascript
[59:36]2018DOTA2亚洲邀请赛 4.3 突围赛 Secret vs VG 第二场
2018/04/04 DOTA
用python实现的可以拷贝或剪切一个文件列表中的所有文件
2009/04/30 Python
Python 的描述符 descriptor详解
2016/02/27 Python
python 网络爬虫初级实现代码
2016/02/27 Python
用十张图详解TensorFlow数据读取机制(附代码)
2018/02/06 Python
python 读取dicom文件,生成info.txt和raw文件的方法
2019/01/24 Python
Python如何在循环内使用list.remove()
2020/06/01 Python
PyQt5的QWebEngineView使用示例
2020/10/20 Python
html5指南-3.如何实现html元素拖拽功能
2013/01/07 HTML / CSS
HTML5 Canvas 实现圆形进度条并显示数字百分比效果示例
2017/08/18 HTML / CSS
Exoticca英国:以最优惠的价格提供豪华异国情调旅行
2018/10/18 全球购物
介绍Ibatis的核心类
2013/11/18 面试题
职工代表大会主持词
2014/04/01 职场文书
普通党员个人对照检查材料
2014/09/18 职场文书
在职证明书范本(2014新版)
2014/09/25 职场文书
交通事故和解协议书
2015/01/27 职场文书
Oracle更换为MySQL遇到的问题及解决
2021/05/21 Oracle