Vue 3.0中Treeshaking特性(详细解析)

在这里插入图片描述


文章目录

  • 一、是什么
  • 二、如何做
    • Vue2 项目
    • Vue3 项目
  • 三、作用
  • 参考文献


一、是什么

Tree shaking 是一种通过清除多余代码方式来优化项目打包体积的技术,专业术语叫 Dead code elimination

简单来讲,就是在保持代码运行结果不变的前提下,去除无用的代码

如果把代码打包比作制作蛋糕,传统的方式是把鸡蛋(带壳)全部丢进去搅拌,然后放入烤箱,最后把(没有用的)蛋壳全部挑选并剔除出去

treeshaking则是一开始就把有用的蛋白蛋黄(import)放入搅拌,最后直接作出蛋糕

也就是说 ,tree shaking 其实是找出使用的代码

Vue2中,无论我们使用什么功能,它们最终都会出现在生产代码中。主要原因是Vue实例在项目中是单例的,捆绑程序无法检测到该对象的哪些属性在代码中被使用到

import Vue from 'vue'Vue.nextTick(() => {})

Vue3源码引入tree shaking特性,将全局 API 进行分块。如果您不使用其某些功能,它们将不会包含在您的基础包中

import { nextTick, observable } from 'vue'nextTick(() => {})

二、如何做

Tree shaking是基于ES6模板语法(importexports),主要是借助ES6模块的静态编译思想,在编译时就能确定模块的依赖关系,以及输入和输出的变量

Tree shaking无非就是做了两件事:

  • 编译阶段利用ES6 Module判断哪些模块已经加载
  • 判断那些模块和变量未被使用或者引用,进而删除对应代码

下面就来举个例子:

通过脚手架vue-cli安装Vue2Vue3项目

vue create vue-demo

Vue2 项目

组件中使用data属性

<script>export default {data: () => ({count: 1,}),};
</script>

对项目进行打包,体积如下图
在这里插入图片描述
为组件设置其他属性(compted、watch

export default {data: () => ({question:"", count: 1,}),computed: {double: function () {return this.count * 2;},},watch: {question: function (newQuestion, oldQuestion) {this.answer = 'xxxx'}
};

再一次打包,发现打包出来的体积并没有变化
在这里插入图片描述

Vue3 项目

组件中简单使用

import { reactive, defineComponent } from "vue";
export default defineComponent({setup() {const state = reactive({count: 1,});return {state,};},
});

将项目进行打包
加粗样式
在组件中引入computedwatch

import { reactive, defineComponent, computed, watch } from "vue";
export default defineComponent({setup() {const state = reactive({count: 1,});const double = computed(() => {return state.count * 2;});watch(() => state.count,(count, preCount) => {console.log(count);console.log(preCount);});return {state,double,};},
});

再次对项目进行打包,可以看到在引入computerwatch之后,项目整体体积变大了
在这里插入图片描述


三、作用

通过Tree shakingVue3给我们带来的好处是:

  • 减少程序体积(更小)
  • 减少程序执行时间(更快)
  • 便于将来对程序架构进行优化(更友好)

参考文献

  • https://segmentfault.com/a/1190000038962700

希望本文能够对您有所帮助!如果您有任何问题或建议,请随时在评论区留言联系 章挨踢(章IT)
谢谢阅读!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/648789.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

ctfshow-命令执行

大佬文章 L i n u x \rm Linux Linux 下空格绕过 无参数 r c e \rm rce rce 无字符 r c e \rm rce rce web29 通配符&#xff1a; *&#xff1a;匹配任意多个字符 ?&#xff1a;匹配任意一个字符 []&#xff1a;匹配某个范围的字符&#xff08; [ a d ] [ad] [ad] 表示 …

day05-盒子模型

01-选择器 结构伪类选择器 基本使用 作用&#xff1a;根据元素的结构关系查找元素。 li:first-child {background-color: green; } :nth-child(公式) 提示&#xff1a;公式中的n取值从 0 开始。 伪元素选择器 作用&#xff1a;创建虚拟元素&#xff08;伪元素&#xff09;…

基于单片机的感应自动门控制器的设计

摘要 现如今自动化、信息化程度越来越高&#xff0c; 单片机的应用领域也越来越广&#xff0c; 成为人们生活不可或缺的一部分。随省社会的发展、科技的进步以及人们生活水平的逐步提高&#xff0c;各种方便千生活的自动控制系统开始进入了人们的生活&#xff0c;以单片机为核…

vue项目中如何使用SVG图标

IconFont使用的不足&#xff1a;图标添加、修改、删除以后在线链接需要更新离线资源需要重新下载项目代码需要同步更新。 在项目不断更新和迭代的过程中&#xff0c;图标的增减变化还没有稳定的情况下&#xff0c;开发人员的工作效率会明显下降。 那么有没有一个图标应用方式…

【C++】list讲解及模拟

目录 list的基本介绍 list模拟实现 一.创建节点 二.迭代器 1.模版参数 2.迭代器的实现&#xff1a; a. ! b. c. -- d. *指针 e.&引用 整体iterator (与const复用)&#xff1a; 三.功能实现 1.模版参数 2.具体功能实现&#xff1a; 2.1 构造函数 2.2 begi…

【操作系统】实验九 写一个设备驱动程序

&#x1f57a;作者&#xff1a; 主页 我的专栏C语言从0到1探秘C数据结构从0到1探秘Linux &#x1f618;欢迎关注&#xff1a;&#x1f44d;点赞&#x1f64c;收藏✍️留言 &#x1f3c7;码字不易&#xff0c;你的&#x1f44d;点赞&#x1f64c;收藏❤️关注对我真的很重要&…

QT基础篇(17)QML编程基础

1.QML概述 QML&#xff08;Qt Meta-Object Language&#xff09;是一种声明性语言&#xff0c;它被用于描述Qt框架中用户界面的结构和行为。QML提供了一种简洁、灵活的方式来创建动态和交互式的界面。 QML基于JavaScript语法&#xff0c;通过使用QML类型和属性来定义界面的元…

6.【SpringBoot3】登录优化-redis

1. SpringBoot 集成 redis 示例 在之前实现的登录接口中&#xff0c;用户登录成功后会生成一个令牌响应给浏览器&#xff0c;之后浏览器访问其他接口时&#xff0c;都要携带该令牌&#xff0c;接受拦截器的检验&#xff0c;如果令牌有效就放行&#xff0c;允许访问后续接口&am…

短视频矩阵怎么玩?小魔推助力实体店做高效矩阵

在如今的互联网时代&#xff0c;每个行业的老板都在考虑转型发展的方向&#xff0c;特别是抖音短视频作为近年来日活用户量最高的平台&#xff0c;吸引了众多企业与实体店纷纷入局&#xff0c;想要通过短视频吸引更多的客户&#xff0c;带来更多的成交&#xff0c;但是短视频推…

uml时序图刻画多个线程的活动

使用box关键字圈入不同线程内的组件 使用loop关键字客刻画线程的定时活动 示例

SpringMVC-RESTFul

文章目录 RESTFul一、基础概念二、增删改查1.查询全部用户信息 &#xff08;GET&#xff09;2.根据id查询用户信息3.添加用户&#xff08;POST&#xff09;4.修改用户 &#xff08;PUT&#xff09;5.删除用户 &#xff08;DELETE&#xff09; RESTFul 一、基础概念 二、增删改…

GitHub 上传文件夹到远程仓库、再次上传修改文件、如何使用lfs上传大文件、github报错一些问题

按照大家的做法&#xff0c;把自己遇到的问题及解决方案写出来&#xff08;注意&#xff1a;Error里面有些方法有时候我用可以成功&#xff0c;有时候我用也不能成功&#xff0c;写出来仅供参考&#xff0c;实在不行重头再clone&#xff0c;add&#xff0c;commit&#xff0c;p…

Qt程序设计-修改系统时间(Windows和Linux)

本文讲解Qt程序设计-修改系统时间(windows) 1、实例 创建项目,添加DateEdit和TimeEdit控件和按钮 头文件 #ifndef MAINWINDOW_H #define MAINWINDOW_H#include <QMainWindow>namespace Ui { class MainWindow; }class MainWindow : public QMainWindow {Q_OBJECTpubl…

C#,生成图片的指定尺寸缩略图的源代码

编程的时候经常用到图像的缩略图。 本文发布一个用于生成指定尺寸的缩略图的简单方法。 1 文本格式 private void button1_Click(object sender, EventArgs e) { CreateThumbnail("demo.jpg", "demo_thumb.jpg", 128, 128); } private void CreateTh…

社交媒体与新闻:Facebook在信息传播中的角色

社交媒体的崛起不仅改变了人们的日常交流方式&#xff0c;也对新闻传播产生了深远的影响。在众多社交媒体平台中&#xff0c;Facebook以其庞大的用户基础和强大的社交网络机制&#xff0c;成为信息传播的中流砥柱。本文将深入探讨Facebook在社交媒体与新闻传播的交汇点上扮演的…

xshell无法连接linux,查询本机ip时出现<NO-CARRIER,BROADCAST,MULTICAST,UP>

在用xshell连接虚拟机VMware中的linux时&#xff0c;发现昨天还能连通的&#xff0c;今天连接不了了 我寻思应该是网卡配置出问题了&#xff0c;就去终端ip addr试了一下&#xff0c;果然发现问题&#xff0c;ip 查看网卡ens33就发现出现ens33:<NO-CARRIER,BROADCAST,MULTI…

Git学习笔记:版本回滚

文章目录 回到过去&#xff1a;开启新时间线&#xff0c;时间分叉路口1. 回溯开发2. 临时恢复特性3. 实验性开发4. 分支维护和发布5. 调试历史问题类比推理&#xff1a; 方法&#xff1a;1. 临时查看旧版本2. 永久回滚到旧版本3. 创建新的分支指向旧版本 回到过去&#xff1a;开…

git安装步骤

安装环境&#xff1a;Windows10 64bit 下载 Git网址 &#xff1a;Git - Downloading Package 版本&#xff1a;Git-2.21.0-64-bit 第一步&#xff1a;双击下载后的Git-2.21.0-64-bit.exe&#xff0c;开始安装 安装开始 第二步&#xff1a;选择安装路径&#xff0c;点击[next]…

以史为鉴:1997 年香港股市保卫战对当前 A 股投资的启示与思考

文章目录 惊心动魄:1997 年香港股市保卫战,港府与索罗斯的巅峰对决!以史为鉴:1997 年香港股市保卫战对当前 A 股投资的启示与思考!为什么是8月28日决战?为什么是7829点获胜?香港股市保卫战对判断 A 股底部的启示市场情绪反转指标期货指数先行性其他惊心动魄:1997 年香港…

35.搜索插入位置(力扣LeetCode)

文章目录 搜索插入位置题目描述二分查找暴力 搜索插入位置 题目描述 给定一个排序数组和一个目标值&#xff0c;在数组中找到目标值&#xff0c;并返回其索引。如果目标值不存在于数组中&#xff0c;返回它将会被按顺序插入的位置。 请必须使用时间复杂度为 O(log n) 的算法…