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
总结一下关于在Java8中使用stream流踩过的一些坑
Jun 24 Java/Android
用Java实现简单计算器功能
Jul 21 Java/Android
使用springMVC所需要的pom配置
Sep 15 Java/Android
Java数据开发辅助工具Docker与普通程序使用方法
Sep 15 Java/Android
使用Spring处理x-www-form-urlencoded方式
Nov 02 Java/Android
关于MybatisPlus配置双数据库驱动连接数据库问题
Jan 22 Java/Android
java项目构建Gradle的使用教程
Mar 24 Java/Android
Java实战之课程信息管理系统的实现
Apr 01 Java/Android
MyBatis配置文件解析与MyBatis实例演示
Apr 07 Java/Android
Spring Data JPA框架自定义Repository接口
Apr 28 Java/Android
基于Android10渲染Surface的创建过程
Aug 14 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编程效率 引入缓存机制提升性能
2010/02/15 PHP
PHP合并两个数组的两种方式的异同
2012/09/14 PHP
php上传大文件设置方法
2016/04/14 PHP
PHP开发实现快递查询功能详解
2019/04/08 PHP
php反射学习之不用new方法实例化类操作示例
2019/06/14 PHP
javascript String 对象
2008/04/25 Javascript
js 解决“options为空或不是对象”
2008/12/22 Javascript
通过javascript设置css属性的代码
2009/12/28 Javascript
js向上无缝滚动,网站公告效果 具体代码
2013/11/18 Javascript
javascript格式化指定日期对象的方法
2015/04/21 Javascript
浅谈Jquery核心函数
2015/06/18 Javascript
jQuery实现判断滚动条到底部
2015/06/23 Javascript
JS实现仿新浪微博发布内容为空时提示功能代码
2015/08/19 Javascript
原生js配合cookie制作保存路径的拖拽
2015/12/29 Javascript
Vue验证码60秒倒计时功能简单实例代码
2018/06/22 Javascript
在vue中更换字体,本地存储字体非引用在线字体库的方法
2018/09/28 Javascript
详解如何webpack使用DllPlugin
2018/09/30 Javascript
JS获取当前时间的实例代码(昨天、今天、明天)
2018/11/13 Javascript
浅析vue cli3 封装Svgicon组件正确姿势(推荐)
2020/04/27 Javascript
python用字典统计单词或汉字词个数示例
2014/04/22 Python
Python RuntimeError: thread.__init__() not called解决方法
2015/04/28 Python
python脚本开机自启的实现方法
2019/06/28 Python
基于Python下载网络图片方法汇总代码实例
2020/06/24 Python
python多线程semaphore实现线程数控制的示例
2020/08/10 Python
浅谈Html5多线程开发之WebWorkers
2018/05/02 HTML / CSS
Charlotte Tilbury英国官网:英国彩妆品牌
2017/05/26 全球购物
三陽商会官方网站:Sanyo iStore
2019/05/15 全球购物
数学专业推荐信范文
2013/11/21 职场文书
应用化学专业职业生涯规划书
2013/12/31 职场文书
视光学毕业生自荐书范文
2014/02/13 职场文书
技能竞赛活动方案
2014/02/21 职场文书
《忆江南》教学反思
2014/04/07 职场文书
2014年教师批评与自我批评思想汇报
2014/09/20 职场文书
走进科学观后感
2015/06/18 职场文书
探讨Java中的深浅拷贝问题
2021/06/26 Java/Android
Win10 最新稳定版本 21H2开始推送
2022/04/19 数码科技