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

浅谈一下Vue3的TreeShaking特性

在这里插入图片描述

什么是Treeshaking?

Treeshaking是一个术语,通常用于描述移除JavaScript中无用代码的过程。
在Vue3中,借助于它的编译优化,可以显著减少打包后的大小。

Vue3的Treeshaking实现

Vue3中的Treeshaking主要通过以下两点实现:

源码级的Tree-shaking

Vue3源码采用ES module编写。

这可以确保编译时只引入实际使用的代码,没有引入无用模块。

比如通过按需引入 Composition API,而不是全量引入等。

编译阶段的静态提升

Vue3的编译器可以检测在模板、JSX中没有被使用的模块,直接舍弃不打包这些模块。

同时还会执行常量提升、代码inline等优化。

大幅减少模块引用。

优势

相比Vue2有以下优势:

  • 提升了运行效率,减少内存消耗;

  • 减少打包后大小,加快应用加载;

  • 依赖更精确,编译效率更高。

编译比较

假设有一个组件库my-lib,包含按钮、弹窗、表单等20个组件。

vue2导入:

// 导入整个my-lib
import * as myLib from 'my-lib' // 注册2个组件
components: {'my-button': myLib.Button,'my-dialog': myLib.Dialog
}

打包后my-lib整个大小200kb,实际只用了2个组件。

vue3导入:

// 按需导入
import {Button, Dialog} from 'my-lib'components: {'my-button': Button,'my-dialog': Dialog 
}

打包后只包含用到的Button和Dialog代码,总大小仅为30kb。

结论及总结

打包体积比较

Vue2: 200kb
Vue3: 30kb

在这个例子中,Vue3的Tree-shaking使得打包体积减少了约85%,只包含实际用到的代码,而不是打包整个库。

这展示了在同样代码条件下,通过Tree-shaking,Vue3可以明显减小打包体积,起到很好的优化效果。

相关文章:

浅谈一下Vue3的TreeShaking特性

什么是Treeshaking? Treeshaking是一个术语,通常用于描述移除JavaScript中无用代码的过程。 在Vue3中,借助于它的编译优化,可以显著减少打包后的大小。 Vue3的Treeshaking实现 Vue3中的Treeshaking主要通过以下两点实现: 源码级的Tree-shaking Vue3源码采用ES mo…...

【牛牛送书 | 第二期】《ChatGPT 驱动软件开发:AI 在软件研发全流程中的革新与实践》

目录 前言: 本书目录: 内容简介: 专家评价: 适合对象: 送书规则: 前言: 现如今,随着计算机技术的不断发展和互联网的普及,我们已经迈入了一个高效的信息处理和传…...

Qt基础之三十九:Qt Creator调试技巧

目录 一.开始调试(F5) 二.调试dll 1.Attach to Running Application 2.Attach to Unstarted Application 3.Start and Debug External Application...

Docker Nginx安装使用以及踩坑点总结

Docker Nginx安装使用以及踩坑点总结 拉取nginx镜像 docker pull nginx:latest运行镜像 暂时不需要配置volume挂载 docker run --name nginx -p 80:80 -d nginx参数详解: --name nginx 指定容器的名称 -p 80:80 映射端口 -d 守护进程运行 创建volume目录 mk…...

单位建数字档案室的意义和作用

单位建立数字档案室的意义和作用包括: 1.提高档案管理效率。数字档案室可以高效地收集、整理和存储电子文档,通过数字化处理,文档的查找和检索速度大幅提升。 2.降低管理成本。数字档案室可以通过节约空间和人力成本,降低管理成本…...

JavaWeb——关于servlet种mapping地址映射的一些问题

6、Servlet 6.4、Mapping问题 一个Servlet可以指定一个映射路径 <servlet-mapping><servlet-name>hello</servlet-name><url-pattern>/hello</url-pattern> </servlet-mapping>一个Servlet可以指定多个映射路径 <servlet-mapping>&…...

NTRU 加密方案

参考文献&#xff1a; [Rivest97] Rivest R L. All-or-nothing encryption and the package transform[C]//Fast Software Encryption: 4th International Workshop, FSE’97 Haifa, Israel, January 20–22 1997 Proceedings 4. Springer Berlin Heidelberg, 1997: 210-218.[…...

第一章前端开发ES6基础

认识ES6 概述 ES6表示ECMAScript规范的第六版&#xff0c;正式名称为ECMAScript 2015&#xff0c;ECMAScript是由ECMA国际标准组织制定的一项脚本语言的标准规范化&#xff0c;引入了许多新特性和语法。 其中包括箭头函数、let和const声明、类、模板字符串、解构赋值、参数默…...

【算法练习Day30】无重叠区间 划分字母区间合并区间

​&#x1f4dd;个人主页&#xff1a;Sherry的成长之路 &#x1f3e0;学习社区&#xff1a;Sherry的成长之路&#xff08;个人社区&#xff09; &#x1f4d6;专栏链接&#xff1a;练题 &#x1f3af;长路漫漫浩浩&#xff0c;万事皆有期待 文章目录 无重叠区间划分字母区间合并…...

Linux部署Redis哨兵集群 一主两从三哨兵(这里使用Redis6,其它版本类似)

目录 一、哨兵集群架构介绍二、下载安装Redis2.1、选择需要安装的Redis版本2.2、下载并解压Redis2.3、编译安装Redis 三、搭建Redis一主两从集群3.1、准备配置文件3.1.1、准备主节点6379配置文件3.1.2、准备从节点6380配置文件3.1.3、准备从节点6381配置文件 3.2、启动Redis主从…...

VR结合|山海鲸虚拟展厅解决方案

方案背景 虚拟现实技术是另一项革命性的创新&#xff0c;它可以将用户带入一个完全虚拟的环境中。借助VR头盔和控制器&#xff0c;用户可以亲临虚拟现实中&#xff0c;与数字世界互动&#xff0c;仿佛置身于其中。 山海鲸根据用户实际需求变化将数字孪生与虚拟现实技术相结合…...

记一次企业微信的(CorpID)和密钥(Secret)泄漏的利用案例

文章目录 一、介绍二、利用过程1、获取AccessToken2、获取企业微信接口IP段3、获取企业微信回调IP段4、通过部门ID,查看返回的ID5、通过部门ID,查看用户列表6、通过便利ID,发现用户信息泄露,可以进行提交报告7、通过添加接口,添加企业账号8、登陆企业账号进行测试三、参考…...

使用Selenium和Java编写爬虫程序

以下是一个使用Selenium和Java编写的音频爬虫程序&#xff0c;该程序使用了proxy的代码。请注意&#xff0c;这个示例需要在IDE中运行&#xff0c;并且可能需要根据您的系统和需求进行调整。 import java.io.IOException; import java.util.List; import java.util.concurrent…...

【Java】PAT Basic Level 1023 组个最小数

题目 1024 组个最小数 作者 CAO, Peng 单位 Google 给定数字 0-9 各若干个。你可以以任意顺序排列这些数字&#xff0c;但必须全部使用。目标是使得最后得到的数尽可能小&#xff08;注意 0 不能做首位&#xff09;。例如&#xff1a;给定两个 0&#xff0c;两个 1&#xff…...

Redis中设置Hash数据类型的过期时间

1 方案 可以先对key进行赋值&#xff0c;然后对key设置一个过期时间。 &#xff08;1&#xff09;依赖 <dependency><groupId>redis.clients</groupId><artifactId>jedis</artifactId><version>2.7.3</version></dependency>…...

你真的了解CPU和GPU?

目录 先举个栗子 CPU 什么是CPU CPU的定义 CPU的组成 CPU的功能 GPU 什么是GPU GPU的定义 GPU的组成 GPU的功能 CPU和GPU的区别 先举个栗子 假设你正在编辑一份文档&#xff0c;这时可以将CPU和GPU的角色比喻为文档编辑过程中的两个不同任务。 1. CPU CPU就好比是…...

HarmonyOS开发:NodeJs脚本实现组件化动态切换

前言 上篇文章&#xff0c;我们使用NodeJs脚本完成了HarmonyOS项目的组件化运行&#xff0c;但是由于脚本是基于4.0.0.400版本的DevEco Studio开发的&#xff0c;可能在配置文件的修改上有些许差距&#xff0c;那么遇到这种情况怎么办&#xff0c;一种是再写一套针对性的脚本文…...

基于springboot实现就业信息管理系统项目【项目源码+论文说明】计算机毕业设计

基于springboot实现就业信息管理系统演示 摘要 随着信息化时代的到来&#xff0c;管理系统都趋向于智能化、系统化&#xff0c;就业信息管理系统也不例外&#xff0c;但目前国内仍都使用人工管理&#xff0c;市场规模越来越大&#xff0c;同时信息量也越来越庞大&#xff0c;人…...

Vue组件的本质和手写通过render渲染函数渲染组件

1.组件的本质 组件就是一组 DOM 元素的封装&#xff0c;本质就是一个对象 (mounted函数中打印一下组件即可看到打印的是一个对象) 如何利用javascript对象来描述一个组件&#xff1f; const MyComponent {render() {return {tag: div,props: {onClick: () > alert(hell…...

【优选算法系列】第一节.双指针(283. 移动零和1089. 复写零)

作者简介&#xff1a;大家好&#xff0c;我是未央&#xff1b; 博客首页&#xff1a;未央.303 系列专栏&#xff1a;优选算法系列 每日一句&#xff1a;人的一生&#xff0c;可以有所作为的时机只有一次&#xff0c;那就是现在&#xff01;&#xff01;&#xff01;&#xff01…...

浏览器访问 AWS ECS 上部署的 Docker 容器(监听 80 端口)

✅ 一、ECS 服务配置 Dockerfile 确保监听 80 端口 EXPOSE 80 CMD ["nginx", "-g", "daemon off;"]或 EXPOSE 80 CMD ["python3", "-m", "http.server", "80"]任务定义&#xff08;Task Definition&…...

Vim 调用外部命令学习笔记

Vim 外部命令集成完全指南 文章目录 Vim 外部命令集成完全指南核心概念理解命令语法解析语法对比 常用外部命令详解文本排序与去重文本筛选与搜索高级 grep 搜索技巧文本替换与编辑字符处理高级文本处理编程语言处理其他实用命令 范围操作示例指定行范围处理复合命令示例 实用技…...

三维GIS开发cesium智慧地铁教程(5)Cesium相机控制

一、环境搭建 <script src"../cesium1.99/Build/Cesium/Cesium.js"></script> <link rel"stylesheet" href"../cesium1.99/Build/Cesium/Widgets/widgets.css"> 关键配置点&#xff1a; 路径验证&#xff1a;确保相对路径.…...

【HarmonyOS 5.0】DevEco Testing:鸿蒙应用质量保障的终极武器

——全方位测试解决方案与代码实战 一、工具定位与核心能力 DevEco Testing是HarmonyOS官方推出的​​一体化测试平台​​&#xff0c;覆盖应用全生命周期测试需求&#xff0c;主要提供五大核心能力&#xff1a; ​​测试类型​​​​检测目标​​​​关键指标​​功能体验基…...

安宝特方案丨XRSOP人员作业标准化管理平台:AR智慧点检验收套件

在选煤厂、化工厂、钢铁厂等过程生产型企业&#xff0c;其生产设备的运行效率和非计划停机对工业制造效益有较大影响。 随着企业自动化和智能化建设的推进&#xff0c;需提前预防假检、错检、漏检&#xff0c;推动智慧生产运维系统数据的流动和现场赋能应用。同时&#xff0c;…...

ESP32 I2S音频总线学习笔记(四): INMP441采集音频并实时播放

简介 前面两期文章我们介绍了I2S的读取和写入&#xff0c;一个是通过INMP441麦克风模块采集音频&#xff0c;一个是通过PCM5102A模块播放音频&#xff0c;那如果我们将两者结合起来&#xff0c;将麦克风采集到的音频通过PCM5102A播放&#xff0c;是不是就可以做一个扩音器了呢…...

Spring Boot面试题精选汇总

&#x1f91f;致敬读者 &#x1f7e9;感谢阅读&#x1f7e6;笑口常开&#x1f7ea;生日快乐⬛早点睡觉 &#x1f4d8;博主相关 &#x1f7e7;博主信息&#x1f7e8;博客首页&#x1f7eb;专栏推荐&#x1f7e5;活动信息 文章目录 Spring Boot面试题精选汇总⚙️ **一、核心概…...

Unit 1 深度强化学习简介

Deep RL Course ——Unit 1 Introduction 从理论和实践层面深入学习深度强化学习。学会使用知名的深度强化学习库&#xff0c;例如 Stable Baselines3、RL Baselines3 Zoo、Sample Factory 和 CleanRL。在独特的环境中训练智能体&#xff0c;比如 SnowballFight、Huggy the Do…...

精益数据分析(97/126):邮件营销与用户参与度的关键指标优化指南

精益数据分析&#xff08;97/126&#xff09;&#xff1a;邮件营销与用户参与度的关键指标优化指南 在数字化营销时代&#xff0c;邮件列表效度、用户参与度和网站性能等指标往往决定着创业公司的增长成败。今天&#xff0c;我们将深入解析邮件打开率、网站可用性、页面参与时…...

智能分布式爬虫的数据处理流水线优化:基于深度强化学习的数据质量控制

在数字化浪潮席卷全球的今天&#xff0c;数据已成为企业和研究机构的核心资产。智能分布式爬虫作为高效的数据采集工具&#xff0c;在大规模数据获取中发挥着关键作用。然而&#xff0c;传统的数据处理流水线在面对复杂多变的网络环境和海量异构数据时&#xff0c;常出现数据质…...