Vue3中说说Tree shaking特性?举例说明一下?

提起Vue3里面的Tree shaking时候,需要提到它是通过构建工具和模块导入方式实现的。然后我们再说说Tree shaking是什么和作用

一、通过构建工具和模块导入方式实现

1.配置构建工具:

Vue 3 项目中,通常使用 webpack 进行构建。为了启用 Tree-Shaking 特性,确保你的 webpack 配置满足以下要求:

  • 使用 webpack 4 及以上版本,因为 Tree-Shaking 功能更强大且更高效。

  • 确保在生产环境中设置 mode: ‘production’,以启用生产模式下的优化功能。

2.按需导入组件:
在 Vue 3 中,推荐使用按需导入(按需加载)的方式引入第三方组件库,而不是直接导入整个库。这可以减小最终构建产物的体积,并实现 Tree-Shaking。

以使用 Element Plus 组件库为例,假设我们只需要使用其中的 Button 和 Input 组件,可以按如下方式进行导入:


import { ElButton, ElInput } from 'element-plus';

这样,只有 Button 和 Input 组件的代码会被打包到最终构建产物中,未使用到的其他组件的代码将会被省略。

3.注册所需组件:
在 Vue 3 中,可以使用 app.component 方法来注册所需的组件:


import { createApp } from 'vue';
import { ElButton, ElInput } from 'element-plus';import App from './App.vue';const app = createApp(App);// 注册所需的组件
app.component('ElButton', ElButton);
app.component('ElInput', ElInput);app.mount('#app');

在上述代码中,我们通过 app.component 方法分别注册了 Button 和 Input 组件,使其可以在模板中使用。

通过以上步骤,Tree-Shaking 将会自动检测到只有 Button 和 Input 被使用到,而其他未被使用的组件将会被消除,从而减小了最终构建产物的体积。

需要注意的是,不是所有的库或框架都支持 Tree-Shaking,因此请确保你使用的第三方组件库对 Tree-Shaking 进行了适配或提供了相应的按需导入方式。

二、Tree shaking是什么?

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

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

1、举例说明:

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

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 模板语法(import 与 exports),主要是借助 ES6 模块
的静态编译思想
,在编译时就能确定模块的依赖关系,以及输入和输出的变量

Tree shaking做的两件事:

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

举例说明:

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,};},
});

将项目进行打包
在这里插入图片描述
在组件中引入 computed 和 watch

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,};},
});

再次对项目进行打包,可以看到在引入 computer 和 watch 之后,项目整体体积变
大了

在这里插入图片描述

三、作用

通过 Tree shaking,Vue3 给我们带来的好处是:

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

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

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

相关文章

百度CTO王海峰:文心一言用户规模破1亿

▶ 写在前面▶ 飞桨开发者已达1070万▶ 文心一言用户规模破亿&#xff0c;日提问量快速增长 ▶ 写在前面 “文心一言用户规模突破 1 亿。”12 月 28日&#xff0c;百度首席技术官、深度学习技术及应用国家工程研究中心主任王海峰在第十届 WAVE SUMMIT 深度学习开发者大会上宣布…

数据结构--查找

目录 1. 查找的基本概念 2. 线性表的查找 3. 树表的查找 3.1 二叉排序树 3.1.1 定义: 3.1.2 存储结构&#xff1a; 3.1.3 二叉排序树的查找 3.1.4 二叉排序树的插入 3.1.5 二叉排序树删除 3.2 平衡二叉树&#xff08;AVL 3.2.1 为什么要有平衡二叉树 3.2.2 定义 3.3 B-树 3.3.1…

【《设计模式之美》】如何取舍继承与组合

文章目录 什么情况下不推荐使用继承&#xff1f;组合相比继承有哪些优势&#xff1f;使用组合、继承的时机 本文主要想了解&#xff1a; 为什么组合优于继承&#xff0c;多用组合少用继承。如何使用组合来替代继承哪些情况适用继承、组合。有哪些设计模式使用到了继承、组合。 …

【Spring Security】快速入门之案例实操

目录 一、简介 1、什么是安全框架 2、主流的安全框架 3、为什么使用Spring Security 二、引言 1、什么是Spring Security 2、Spring Security工作原理 3、特点 三、快速入门 1、引入依赖 2、配置 3、启动测试 4、配置自定义账号密码 四、Web安全配置类 1.HttpSe…

c++输入输出流和文件操作总结

目录 一、c的输入输出流——> 指的是字节流的数据传送;具有类型安全和可扩展性。 二、流的出入路径 三、c流类库 ①概览 ②标准输出流&#xff1a; ③标准输入流&#xff1a; 四、文件操作&#xff08;ascii文件和二进制文件&#xff09; 五、字符串流&#xff08;或称…

企业数据可视化-亿发数据化管理平台提供商,实现一站式数字化运营

近些年来&#xff0c;国内企业数据化管理升级进程持续加速&#xff0c;以物联网建设、人工智能、大数据和5G网络等新技术的发展&#xff0c;推动了数字经济的蓬勃发展&#xff0c;成为维持经济持续稳定增长的重要引擎。如今许多国内中小型企业纷纷摒弃传统管理模式&#xff0c;…

Json和Xml

一、前言 学习心得&#xff1a;C# 入门经典第8版书中的第21章《Json和Xml》 二、Xml的介绍 Xml的含义&#xff1a; 可标记性语言&#xff0c;它将数据以一种特别简单文本格式储存。让所有人和几乎所有的计算机都能理解。 XML文件示例&#xff1a; <?xml version"1.…

AGV智能搬运机器人-替代人工工位让物流行业降本增效

在当今快速发展的世界中&#xff0c;物流业面临着巨大的挑战&#xff0c;包括提高效率、降低成本和优化工作流程。为了应对这些挑战&#xff0c;一种新型的自动化设备——智能搬运机器人正在崭露头角。本文将通过一个具体的案例来展示富唯智能转运机器人在实际应用中的价值。 案…

Flask登陆后登陆状态及密码的修改和处理

web/templates/common 是统一布局 登录成功 后flask框架服务器默认由login.html进入仪表盘页面index.html(/),该页面的设置在 (web/controllers/user/index.py)&#xff0c;如果想在 该仪表盘页面 将 用户信息 展示出来&#xff0c;就得想办法先获取到 当前用户的 登陆状态。…

【项目】玩具租赁博客测试报告

目录 一、项目背景 二、项目功能 三、功能测试 一、项目背景 玩具租赁系统采用前后端分离的方法来实现&#xff0c;同时使用了数据库来存储相关的数据&#xff0c;同时将其部署到云服务器上。前端主要有十五个页面构成&#xff1a;用户注册、管理员注册、登录页、用户和管理…

1.倒排索引 2.逻辑斯提回归算法

1.倒排索引 https://help.aliyun.com/zh/open-search/retrieval-engine-edition/introduction-to-inverted-indexes 倒排索引&#xff08;Inverted Index&#xff09;是一种数据结构&#xff0c;用于快速查找包含某个特定词或词语的文档。它主要用于全文搜索引擎等应用&#…

Flask 与微信小程序对接

Flask 与微信小程序的对接 在 web/controllers/api中增建py文件&#xff0c;主要是给微信小程序使用的。 web/controllers/init.py # -*- coding: utf-8 -*- from flask import Blueprint route_api Blueprint( api_page,__name__ )route_api.route("/") def ind…

移动端Vant中的Calendar日历增加显示农历(节日、节气)功能

核心&#xff1a; 使用 js-calendar-converter 库实现 npm地址&#xff1a;js-calendar-converter 内部使用原生calendar.js&#xff0c; 中国农历&#xff08;阴阳历&#xff09;和西元阳历即公历互转JavaScript库&#xff0c;具体实现感兴趣的可自行查看其实现源码。 原日…

ElementUI的Table组件行合并上手指南

ElementUI的Table组件行合并 &#xff0c;示例用官网vue3版的文档 <el-table :data"tableData" :span-method"objectSpanMethod" border style"width: 100%; margin-top: 20px"><el-table-column prop"id" label"ID&qu…

【轻松入门】OpenCV4.8 + QT5.x开发环境搭建

引言 大家好&#xff0c;今天给大家分享一下最新版本OpenCV4.8 QT5 如何一起配置&#xff0c;完成环境搭建的。 下载OpenCV4.8并解压缩 软件版本支持 CMake3.13 或者以上版本 https://cmake.org/ VS2017专业版或者以上版本 QT5.15.2 OpenCV4.8源码包 https://github.com/op…

英语学习软件欧路词典 Eudic mac特点说明

欧路词典 Eudic mac是一款英语学习工具&#xff0c;它包含了丰富的英语词汇、短语和例句&#xff0c;并提供了发音、例句朗读、单词笔记等功能。 欧路词典 Eudic mac软件特点 多语种支持&#xff1a;欧路词典支持多种语言&#xff0c;包括英语、中文、日语、法语等等&#xff…

Havenask 分布式索引构建服务 --Build Service

Havenask 是阿里巴巴智能引擎事业部自研的开源高性能搜索引擎&#xff0c;深度支持了包括淘宝、天猫、菜鸟、高德、饿了么在内几乎整个阿里的搜索业务。本文针对性介绍了 Havenask 分布式索引构建服务——Build Service&#xff0c;主打稳定、快速、易管理&#xff0c;是在线系…

第27关 在K8s集群上使用Helm3部署最新版本v2.10.0的私有镜像仓库Harbor

------> 课程视频同步分享在今日头条和B站 大家好&#xff0c;我是博哥爱运维。 在前面的几十关里面&#xff0c;博哥在k8s上部署服务一直都是用的docker hub上的公有镜像&#xff0c;对于企业服务来说&#xff0c;有些我们是不想把服务镜像放在公网上面的&#xff1b; 同时…

【习题】运行Hello World工程

判断题 1. DevEco Studio是开发HarmonyOS应用的一站式集成开发环境。 正确(True)错误(False) 正确(True) 2. main_pages.json存放页面page路径配置信息。 正确(True)错误(False) 正确(True) 单选题 1. 在stage模型中&#xff0c;下列配置文件属于AppScope文件夹的是&am…

Docker自建私人云盘系统

Docker自建私人云盘系统。 有个人云盘需求的人&#xff0c;主要需求有这几类&#xff1a; 文件同步、分享需要。 照片、视频同步需要&#xff0c;尤其是全家人都是用的同步。 影视观看需要&#xff08;分为家庭内部、家庭外部&#xff09; 搭建个人网站/博客 云端OFFICE需…