当前位置: 首页 > news >正文

一文大白话讲清楚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会从入口文件出发,递归的分析代码中的模块依赖,标记处用到的模块和导出的函数和变量
  • 具体标记如下:
  1. 所有import标记为/* harmony import*/
  2. 所有用到的export标记为/* harmony export([type]) */其中type和webpack内部有关,可能值为binding,immutable等
  3. 没被使用过的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: 输入&#xff1a…...

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…...

二分 机器人的跳跃问题

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

Hive:复杂数据类型之Map函数

Map函数 是Hive里面的一种复杂数据类型, 用于存储键值对集合。Map中的键和值可以是基础类型或复合类型&#xff0c;这使得Map在处理需要关联存储信息的数据时非常有用。 定义map时,需声明2个属性: key 和 value , map中是 key value 组成一个元素 key-value, key必须为原始类…...

R 字符串:深入理解与高效应用

R 字符串:深入理解与高效应用 引言 在R语言中,字符串是数据处理和编程中不可或缺的一部分。无论是数据清洗、数据转换还是数据分析,字符串的处理都是基础技能。本文将深入探讨R语言中的字符串概念,包括其基本操作、常见函数以及高效应用方法。 字符串基本概念 字符串定…...

设计模式Python版 桥接模式

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

记5(一元逻辑回归+线性分类器+多元逻辑回归

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

【Python】第七弹---Python基础进阶:深入字典操作与文件处理技巧

✨个人主页&#xff1a; 熬夜学编程的小林 &#x1f497;系列专栏&#xff1a; 【C语言详解】 【数据结构详解】【C详解】【Linux系统编程】【MySQL】【Python】 目录 1、字典 1.1、字典是什么 1.2、创建字典 1.3、查找 key 1.4、新增/修改元素 1.5、删除元素 1.6、遍历…...

Nginx 运维开发高频面试题详解

一、基础核心问题 原文链接&#xff1a;https://blog.csdn.net/weixin_51146329/article/details/142963853 1、什么是Nginx&#xff1f; Nginx 是一个高性能的 HTTP 和反向代理服务器&#xff0c;它以轻量级和高并发处理能力而闻名。Nginx 的反向代理功能允许它作为前端服务…...

下载OpenJDK

由于Oracle需要付费&#xff0c;并且之前我在寻找openJDK的时候&#xff0c;我不知道网址&#xff0c;并且也不知道在这个openjdk这个网址里点击哪个模块进行下载。最近我在看虚拟机相关的书籍的时候&#xff0c;找到了相关的网址。 注意&#xff1a;下面的下载都是基于可以科…...

Web3.js详解

Web1&Web2&Web3 以下是Web1、Web2和Web3的详细介绍&#xff0c;以及一个对比表格&#xff1a; Web1 定义&#xff1a;Web1指的是有着固定内容的非许可的开源网络。特点&#xff1a;在Web1时代&#xff0c;网站内容主要由网站管理员或创建者提供&#xff0c;用户只能…...

学习串行通信

本文来源&#xff1a; [8-1] 串口通信_哔哩哔哩_bilibili 智谱清言 ------------ 串口&#xff08;Serial Port&#xff09;&#xff1a; 串口是一种应用非常广泛的通讯接口&#xff0c;串口成本低&#xff0c;容易使用&#xff0c;通信线路简单&#xff0c;可实现两个设…...

【leetcode强化练习·二叉树】同时运用两种思维解题

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

Rank-analysis-1.2——一款基于LCU API的排位分析工具,大四学生独立开发

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

什么是门控循环单元?

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

Google Chrome-便携增强版[解压即用]

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

智慧园区综合管理系统如何实现多个维度的高效管理与安全风险控制

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

【PyTorch】7.自动微分模块:开启神经网络 “进化之门” 的魔法钥匙

目录 1. 梯度基本计算 2. 控制梯度计算 3. 梯度计算注意 4. 小节 个人主页&#xff1a;Icomi 专栏地址&#xff1a;PyTorch入门 在深度学习蓬勃发展的当下&#xff0c;PyTorch 是不可或缺的工具。它作为强大的深度学习框架&#xff0c;为构建和训练神经网络提供了高效且灵活…...

从0开始使用面对对象C语言搭建一个基于OLED的图形显示框架(协议层封装)

目录 协议层设计&#xff0c;以IIC为例子 关于软硬件IIC 设计的一些原则 完成协议层的抽象 刨析我们的原理 如何完成我们的抽象 插入几个C语言小技巧 完成软件IIC通信 开始我们的IIC通信 结束我们的IIC通信 发送一个字节 &#xff08;重要&#xff09;完成命令传递和…...

C++_核心编程_多态案例二-制作饮品

#include <iostream> #include <string> using namespace std;/*制作饮品的大致流程为&#xff1a;煮水 - 冲泡 - 倒入杯中 - 加入辅料 利用多态技术实现本案例&#xff0c;提供抽象制作饮品基类&#xff0c;提供子类制作咖啡和茶叶*//*基类*/ class AbstractDr…...

渲染学进阶内容——模型

最近在写模组的时候发现渲染器里面离不开模型的定义,在渲染的第二篇文章中简单的讲解了一下关于模型部分的内容,其实不管是方块还是方块实体,都离不开模型的内容 🧱 一、CubeListBuilder 功能解析 CubeListBuilder 是 Minecraft Java 版模型系统的核心构建器,用于动态创…...

el-switch文字内置

el-switch文字内置 效果 vue <div style"color:#ffffff;font-size:14px;float:left;margin-bottom:5px;margin-right:5px;">自动加载</div> <el-switch v-model"value" active-color"#3E99FB" inactive-color"#DCDFE6"…...

WEB3全栈开发——面试专业技能点P2智能合约开发(Solidity)

一、Solidity合约开发 下面是 Solidity 合约开发 的概念、代码示例及讲解&#xff0c;适合用作学习或写简历项目背景说明。 &#x1f9e0; 一、概念简介&#xff1a;Solidity 合约开发 Solidity 是一种专门为 以太坊&#xff08;Ethereum&#xff09;平台编写智能合约的高级编…...

OPenCV CUDA模块图像处理-----对图像执行 均值漂移滤波(Mean Shift Filtering)函数meanShiftFiltering()

操作系统&#xff1a;ubuntu22.04 OpenCV版本&#xff1a;OpenCV4.9 IDE:Visual Studio Code 编程语言&#xff1a;C11 算法描述 在 GPU 上对图像执行 均值漂移滤波&#xff08;Mean Shift Filtering&#xff09;&#xff0c;用于图像分割或平滑处理。 该函数将输入图像中的…...

七、数据库的完整性

七、数据库的完整性 主要内容 7.1 数据库的完整性概述 7.2 实体完整性 7.3 参照完整性 7.4 用户定义的完整性 7.5 触发器 7.6 SQL Server中数据库完整性的实现 7.7 小结 7.1 数据库的完整性概述 数据库完整性的含义 正确性 指数据的合法性 有效性 指数据是否属于所定…...

【无标题】路径问题的革命性重构:基于二维拓扑收缩色动力学模型的零点隧穿理论

路径问题的革命性重构&#xff1a;基于二维拓扑收缩色动力学模型的零点隧穿理论 一、传统路径模型的根本缺陷 在经典正方形路径问题中&#xff08;图1&#xff09;&#xff1a; mermaid graph LR A((A)) --- B((B)) B --- C((C)) C --- D((D)) D --- A A -.- C[无直接路径] B -…...

现有的 Redis 分布式锁库(如 Redisson)提供了哪些便利?

现有的 Redis 分布式锁库&#xff08;如 Redisson&#xff09;相比于开发者自己基于 Redis 命令&#xff08;如 SETNX, EXPIRE, DEL&#xff09;手动实现分布式锁&#xff0c;提供了巨大的便利性和健壮性。主要体现在以下几个方面&#xff1a; 原子性保证 (Atomicity)&#xff…...

基于IDIG-GAN的小样本电机轴承故障诊断

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

Selenium常用函数介绍

目录 一&#xff0c;元素定位 1.1 cssSeector 1.2 xpath 二&#xff0c;操作测试对象 三&#xff0c;窗口 3.1 案例 3.2 窗口切换 3.3 窗口大小 3.4 屏幕截图 3.5 关闭窗口 四&#xff0c;弹窗 五&#xff0c;等待 六&#xff0c;导航 七&#xff0c;文件上传 …...