一文大白话讲清楚webpack基本使用——17——Tree Shaking
文章目录
- 一文大白话讲清楚webpack基本使用——17——Tree Shaking
- 1. 建议按文章顺序从头看,一看到底,豁然开朗
- 2. 啥叫Tree Shaking
- 3. 什么是死代码,怎么来的
- 3. Tree Shaking的流程
- 3.1 标记
- 3.2 利用Terser摇起来
- 4. 具体使用方式
- 4.1 适用前提
- 4.2 使用流程
- 5. 副作用代码
- 5.1 通过webpack.config.js中sideEffects指定
- 5.2 通过package.json中sideEffects配置
一文大白话讲清楚webpack基本使用——17——Tree Shaking
1. 建议按文章顺序从头看,一看到底,豁然开朗
- 第一篇:
- 一文大白话讲清楚啥是个webpack
- 第二篇:
- 一文大白话讲清楚webpack基本使用——1——完成webpack的初步构建
- 第三篇
- 一文大白话讲清楚webpack基本使用——2——css相关loader的配置和使用
- 第四篇
- 一文大白话讲清楚webpack基本使用——3——图像相关loader的配置和使用
- 第五篇
- 一文大白话讲清楚webpack基本使用——4——vue-loader的配置和使用
- 第六篇
- 一文大白话讲清楚webpack基本使用——5——babel的配置和使用
- 第七篇
- 一文大白话讲清楚webpack基本使用——6——热更新及其原理
- 第八篇
- 一文大白话讲清楚webpack基本使用——7——代码分离和懒加载
- 第九篇
- # 一文大白话讲清楚webpack基本使用——8——开发环境和生产环境的配置和区别
- 第十篇
- 一文大白话讲清楚webpack基本使用——9——预加载之prefetch和preload以及webpackChunkName的使用
- 第十一篇
- 一文大白话讲清楚webpack基本使用——10——使用CDN优化加载速度
- 第十二篇
- 一文大白话讲清楚webpack基本使用——11——chunkIds和runtimeChunk
- 第十三篇
- 一文大白话讲清楚webpack基本使用——12——文件指纹和缓存机制
- 第十四篇
- 一文大白话讲清楚webpack基本使用——13——Js代码压缩
- 第十五篇
- 一文大白话讲清楚webpack基本使用——14——CSS代码压缩
- 第十六篇
- 一文大白话讲清楚webpack基本使用——15——HTML代码压缩
- 第十七篇
- 一文大白话讲清楚webpack基本使用——16——图片压缩
- 然后看本篇,Tree Shaking
2. 啥叫Tree Shaking
- Tree,就是树,Shaking就是摇,摇树,为啥要摇树,让我们想起一件事
- 果农秋收的时候,发现树上的果实有点已经烂了,有的还新鲜着,果农就想,我把这个树上不好的果子都去掉,怎么去呢,大力摇树,因为坏了的果子根部不牢固了,稍微用力摇就能掉下来。
- 经过一番摇动之后,剩下的果实就是我们需要的好果实了。
- 这就是Tree Shaking。
- 回到webpack中,Tree Shaking就是在构建的时候把无用的代码(死代码)去掉,只保留有用的代码,这样就能缩减构建包的体积
3. 什么是死代码,怎么来的
- 啥是死代码,就是在程序运行的生命周期内(webpack认为的,不是全部的)始终不被执行的代码
- 为啥始终得不到执行呢,这是因为在ES6模块出,我们通过export暴露外部接口,如果有些程序体既没有被暴露出去,内部有没有引用依赖,那么他讲永远无法被调用执行,这时,他就成了死代码
- 比如我们在一个js文件里面写了两个方法,一个add,一个reduce
function add(x,y){return x+y
}
function reduce(x,y){return x-y
}
export{add
}
- 我们通过export之暴露了add,没有暴露reduce,那么reduce将无法被执行,就成了死代码
- 或者我们通过import导入了add 和reduce,但是只用了add,没用reduce,也是一样的
import {add ,reduce} from 'xxx'
add()
// recuce()//一直未使用,也是死代码
- 可是,问题来了,为什么我们说这仅是webpack认为的死代码
- 因为者设计一个概念,我们举个例子,你给我钱了,我没要;和你给我钱了,我没花;这两个最终的结果都是我没花你的钱,但是后者需要我用完钱了,我才能知道你到底花没花你的钱。而前者不一样,我一开始就知道我没花,因为我压根就没要你钱。
- 放在程序里面,正常情况下,只有程序运行完了,我们才知道哪些代码没有被执行。之所以能提前知道有些代码不能被执行,是因为程序压根就没引入这些代码。为啥能知道呢,就是因为ES6模块没有暴露这个接口,这个事情,我们在编译的时候就能知道,不用等到运行时。
- 这也是为什么webpack在构建时就可以识别出来有用和无用的代码
3. Tree Shaking的流程
3.1 标记
- webpack会从入口文件出发,递归的分析代码中的模块依赖,标记处用到的模块和导出的函数和变量
- 具体标记如下:
- 所有import标记为/* harmony import*/
- 所有用到的export标记为/* harmony export([type]) */其中type和webpack内部有关,可能值为binding,immutable等
- 没被使用过的import标记为/* unused harmony export [FunctionName] */ 其中FunctionName为export的方法名称
3.2 利用Terser摇起来
- 通过Terser删除掉没有被用到的到导出语句
4. 具体使用方式
4.1 适用前提
- 前面讲过了,Tree Shaking的适用前提是我们通过ES6模块实现接口暴露,而不能是CommonJS(我们之前就是这么写的,不要改)
- 另外就是一般在production环境下,默认开启Tree Shaking
- 配置optimization.usedExports:true
- 最后,要配置JS代码压缩,因为Tree Shaking发生在代码压缩阶段(我们之前讲JS代码压缩,已经配置过了,不要改)
4.2 使用流程
-
首先,我们修改mode为production
-
然后配置optimization.usedExports:true
-
为了验证TreeShaking是否生效,我们在src/modulejs/add.js里面新增一个addThird方法,函数体长一些,暴露
-
然后我们在main.js里面倒入addTHird,并使用
-
构建打包
npm run build
-
看构建后bundle体积
91KB -
然后在main.js里面注销addTRhird的调用
-
可以看到在编辑器里面倒入的时候addTRhird变量变灰了,说明未使用
-
然后重新构建打包
npm run build
- 看看体积
90KB了,说明addTRhird没有被打包进来 - 有人会问了,为啥不在打包的js里面查看一下是否打包了addTRhird方法,因为我们把代码压缩了,找起来比较麻烦,谢谢
- ok ,摇完了
5. 副作用代码
- 简单点,啥叫副作用,就是函数除了返回值还干了点别的
let a=0;
function add (x,y){a=2;return x+y
}
add(1,2)
- add除了返回x+y,还修改了外部变量,所以他是副作用函数
- 为啥要讲副作用,就是有些代码没用但是又不想删除
- 明白没有,就是比如这个add函数可能我们最后在main.js没引用,构建的时候本该删除,但是删了他影响了a,所以我们要考虑一下要不要删
- 如果不想删,我们可以指定配置,有副作用的代码的不删除
5.1 通过webpack.config.js中sideEffects指定
- 在webpack.config.js里面配置sideEffects数组,数组元素是具有副作用的模块js
module.exports={sideEffects:['./xxx.js']
}
5.2 通过package.json中sideEffects配置
{sideEffects:true//所有导入文件都视为有副作用sideEfeects:false//都没有副作用sideEffects:['sss/jx']//指定哪些有副作用
}
相关文章:

一文大白话讲清楚webpack基本使用——17——Tree Shaking
文章目录 一文大白话讲清楚webpack基本使用——17——Tree Shaking1. 建议按文章顺序从头看,一看到底,豁然开朗2. 啥叫Tree Shaking3. 什么是死代码,怎么来的3. Tree Shaking的流程3.1 标记3.2 利用Terser摇起来 4. 具体使用方式4.1 适用前提…...
【C++ 区间位运算】3209. 子数组按位与值为 K 的数目|2050
本文涉及知识点 位运算、状态压缩、枚举子集汇总 LeetCode3209. 子数组按位与值为 K 的数目 给你一个整数数组 nums 和一个整数 k ,请你返回 nums 中有多少个子数组 满足:子数组中所有元素按位 AND 的结果为 k 。 示例 1: 输入:…...
8 比例缩放(scale.rs)
scale.rs代码是几何变换库euclid中典型的数据结构和方法的例子,用于处理二维和三维空间中的缩放变换。 一、scale.rs文件源码 //! A type-checked scaling factor between units.use crate::num::One;use crate::approxord::{max, min}; use crate::{Box2D, Box3D…...

二分 机器人的跳跃问题
二段性:找到一个值,大于此值的时候都成立,小于的时候都不成立 更新的方式只有两种,左边的mid更新不需要1;右边的mid更新需要1 //对能量进行二分,确定能量的范围 //特判防止溢出int #include<bits/stdc.h> using…...

Hive:复杂数据类型之Map函数
Map函数 是Hive里面的一种复杂数据类型, 用于存储键值对集合。Map中的键和值可以是基础类型或复合类型,这使得Map在处理需要关联存储信息的数据时非常有用。 定义map时,需声明2个属性: key 和 value , map中是 key value 组成一个元素 key-value, key必须为原始类…...
R 字符串:深入理解与高效应用
R 字符串:深入理解与高效应用 引言 在R语言中,字符串是数据处理和编程中不可或缺的一部分。无论是数据清洗、数据转换还是数据分析,字符串的处理都是基础技能。本文将深入探讨R语言中的字符串概念,包括其基本操作、常见函数以及高效应用方法。 字符串基本概念 字符串定…...

设计模式Python版 桥接模式
文章目录 前言一、桥接模式二、桥接模式示例三、桥接模式与适配器模式的联用 前言 GOF设计模式分三大类: 创建型模式:关注对象的创建过程,包括单例模式、简单工厂模式、工厂方法模式、抽象工厂模式、原型模式和建造者模式。结构型模式&…...

记5(一元逻辑回归+线性分类器+多元逻辑回归
目录 1、一元逻辑回归2、线性可分&线性不可分3、Iris数据集实现多元逻辑回归4、绘制分类图5、鸢尾花分类图6、多分类问题:(softmax回归)6.1、编码:自然顺序码、独热编码、独冷编码6.2、二/多分类问题:6.3、softmax…...

【Python】第七弹---Python基础进阶:深入字典操作与文件处理技巧
✨个人主页: 熬夜学编程的小林 💗系列专栏: 【C语言详解】 【数据结构详解】【C详解】【Linux系统编程】【MySQL】【Python】 目录 1、字典 1.1、字典是什么 1.2、创建字典 1.3、查找 key 1.4、新增/修改元素 1.5、删除元素 1.6、遍历…...
Nginx 运维开发高频面试题详解
一、基础核心问题 原文链接:https://blog.csdn.net/weixin_51146329/article/details/142963853 1、什么是Nginx? Nginx 是一个高性能的 HTTP 和反向代理服务器,它以轻量级和高并发处理能力而闻名。Nginx 的反向代理功能允许它作为前端服务…...

下载OpenJDK
由于Oracle需要付费,并且之前我在寻找openJDK的时候,我不知道网址,并且也不知道在这个openjdk这个网址里点击哪个模块进行下载。最近我在看虚拟机相关的书籍的时候,找到了相关的网址。 注意:下面的下载都是基于可以科…...
Web3.js详解
Web1&Web2&Web3 以下是Web1、Web2和Web3的详细介绍,以及一个对比表格: Web1 定义:Web1指的是有着固定内容的非许可的开源网络。特点:在Web1时代,网站内容主要由网站管理员或创建者提供,用户只能…...

学习串行通信
本文来源: [8-1] 串口通信_哔哩哔哩_bilibili 智谱清言 ------------ 串口(Serial Port): 串口是一种应用非常广泛的通讯接口,串口成本低,容易使用,通信线路简单,可实现两个设…...

【leetcode强化练习·二叉树】同时运用两种思维解题
本文参考labuladong算法笔记[【强化练习】同时运用两种思维解题 | labuladong 的算法笔记] 有的题目可以同时用「遍历」和「分解问题」两种思路来解,你可以利用这些题目训练自己的思维。 559. N 叉树的最大深度 | 力扣 | LeetCode | 给定一个 N 叉树,…...

Rank-analysis-1.2——一款基于LCU API的排位分析工具,大四学生独立开发
LOL Rank Record Analysis:一款基于LCU API的排位分析工具,大四学生独立开发! 大家好!我是河南科技学院的大四学生,今天给大家分享一个我自己开发的软件——LOL Rank Record Analysis。这是一个基于 Riot 提供的 LCU …...

什么是门控循环单元?
一、概念 门控循环单元(Gated Recurrent Unit,GRU)是一种改进的循环神经网络(RNN),由Cho等人在2014年提出。GRU是LSTM的简化版本,通过减少门的数量和简化结构,保留了LSTM的长时间依赖…...

Google Chrome-便携增强版[解压即用]
Google Chrome-便携增强版 链接:https://pan.xunlei.com/s/VOI0OyrhUx3biEbFgJyLl-Z8A1?pwdf5qa# a 特点描述 √ 无升级、便携式、绿色免安装,即可以覆盖更新又能解压使用! √ 此增强版,支持右键解压使用 √ 加入Chrome增强…...

智慧园区综合管理系统如何实现多个维度的高效管理与安全风险控制
内容概要 在当前快速发展的城市环境中,智慧园区综合管理系统正在成为各类园区管理的重要工具,无论是工业园、产业园、物流园,还是写字楼与公寓,都在积极寻求如何提升管理效率和保障安全。通过快鲸智慧园区管理系统,用…...

【PyTorch】7.自动微分模块:开启神经网络 “进化之门” 的魔法钥匙
目录 1. 梯度基本计算 2. 控制梯度计算 3. 梯度计算注意 4. 小节 个人主页:Icomi 专栏地址:PyTorch入门 在深度学习蓬勃发展的当下,PyTorch 是不可或缺的工具。它作为强大的深度学习框架,为构建和训练神经网络提供了高效且灵活…...
从0开始使用面对对象C语言搭建一个基于OLED的图形显示框架(协议层封装)
目录 协议层设计,以IIC为例子 关于软硬件IIC 设计的一些原则 完成协议层的抽象 刨析我们的原理 如何完成我们的抽象 插入几个C语言小技巧 完成软件IIC通信 开始我们的IIC通信 结束我们的IIC通信 发送一个字节 (重要)完成命令传递和…...
uniapp 对接腾讯云IM群组成员管理(增删改查)
UniApp 实战:腾讯云IM群组成员管理(增删改查) 一、前言 在社交类App开发中,群组成员管理是核心功能之一。本文将基于UniApp框架,结合腾讯云IM SDK,详细讲解如何实现群组成员的增删改查全流程。 权限校验…...
[2025CVPR]DeepVideo-R1:基于难度感知回归GRPO的视频强化微调框架详解
突破视频大语言模型推理瓶颈,在多个视频基准上实现SOTA性能 一、核心问题与创新亮点 1.1 GRPO在视频任务中的两大挑战 安全措施依赖问题 GRPO使用min和clip函数限制策略更新幅度,导致: 梯度抑制:当新旧策略差异过大时梯度消失收敛困难:策略无法充分优化# 传统GRPO的梯…...
DockerHub与私有镜像仓库在容器化中的应用与管理
哈喽,大家好,我是左手python! Docker Hub的应用与管理 Docker Hub的基本概念与使用方法 Docker Hub是Docker官方提供的一个公共镜像仓库,用户可以在其中找到各种操作系统、软件和应用的镜像。开发者可以通过Docker Hub轻松获取所…...

遍历 Map 类型集合的方法汇总
1 方法一 先用方法 keySet() 获取集合中的所有键。再通过 gey(key) 方法用对应键获取值 import java.util.HashMap; import java.util.Set;public class Test {public static void main(String[] args) {HashMap hashMap new HashMap();hashMap.put("语文",99);has…...

《通信之道——从微积分到 5G》读书总结
第1章 绪 论 1.1 这是一本什么样的书 通信技术,说到底就是数学。 那些最基础、最本质的部分。 1.2 什么是通信 通信 发送方 接收方 承载信息的信号 解调出其中承载的信息 信息在发送方那里被加工成信号(调制) 把信息从信号中抽取出来&am…...
土地利用/土地覆盖遥感解译与基于CLUE模型未来变化情景预测;从基础到高级,涵盖ArcGIS数据处理、ENVI遥感解译与CLUE模型情景模拟等
🔍 土地利用/土地覆盖数据是生态、环境和气象等诸多领域模型的关键输入参数。通过遥感影像解译技术,可以精准获取历史或当前任何一个区域的土地利用/土地覆盖情况。这些数据不仅能够用于评估区域生态环境的变化趋势,还能有效评价重大生态工程…...
Pinocchio 库详解及其在足式机器人上的应用
Pinocchio 库详解及其在足式机器人上的应用 Pinocchio (Pinocchio is not only a nose) 是一个开源的 C 库,专门用于快速计算机器人模型的正向运动学、逆向运动学、雅可比矩阵、动力学和动力学导数。它主要关注效率和准确性,并提供了一个通用的框架&…...
JavaScript基础-API 和 Web API
在学习JavaScript的过程中,理解API(应用程序接口)和Web API的概念及其应用是非常重要的。这些工具极大地扩展了JavaScript的功能,使得开发者能够创建出功能丰富、交互性强的Web应用程序。本文将深入探讨JavaScript中的API与Web AP…...

【C++特殊工具与技术】优化内存分配(一):C++中的内存分配
目录 一、C 内存的基本概念 1.1 内存的物理与逻辑结构 1.2 C 程序的内存区域划分 二、栈内存分配 2.1 栈内存的特点 2.2 栈内存分配示例 三、堆内存分配 3.1 new和delete操作符 4.2 内存泄漏与悬空指针问题 4.3 new和delete的重载 四、智能指针…...

基于IDIG-GAN的小样本电机轴承故障诊断
目录 🔍 核心问题 一、IDIG-GAN模型原理 1. 整体架构 2. 核心创新点 (1) 梯度归一化(Gradient Normalization) (2) 判别器梯度间隙正则化(Discriminator Gradient Gap Regularization) (3) 自注意力机制(Self-Attention) 3. 完整损失函数 二…...