扫码关注官方微信

扫码下载APP
返回顶部
首页 > 资讯 > 前端开发 > JavaScript >Vue中的Tree-Shaking介绍及原理
  • 685

0
分享到

Vue中的Tree-Shaking介绍及原理

Vue中的Tree-ShakingVueTree-Shaking 2023-05-18 05:05:13 685人浏览 八月长安
摘要

目录什么是Tree-ShakingTree-shaking的原理和支持可以被Tree-shaking不可以被Tree-shakingVue中的应用什么是Tree-Shaking Tr

什么是Tree-Shaking

Tree-Shaking这个概念在前端领域是因为rollup.js而起，后来webpack等也加入支持Tree-Shaking的行列中。简单来说就是移除掉项目中永远不会被执行的代码（dead code），实际情况中，代码虽然依赖了某个模块，但其实只使用其中的某些功能。通过Tree-shaking，将没有使用的模块代码移除掉，这样来达到删除无用代码的目的。

Tree-shaking的原理和支持

  • 实现tree-shaking的基础是依赖于es6的模块特性，即模块必须是ESM（ES Module）。这是因为ES6模块的依赖关系是确定的、静态的，和运行的时的状态无关，可以进行静态分析。
  • 现在主流的打包工具都支持Tree-shaking，例如最早支持的rollup，后来支持的WEBpack，以及vite等等。

可以被Tree-shaking

有以下代码，其中工具函数文件中包含了foo与bar，在shaking文件中只使用了foo，在main文件中引用了foo，但没有使用：

// utils.js
export const foo = () => {
    console.log('foo')
}
export const bar = () => {
    console.log('bar')
}
// shaking.js
import { foo } from './utils.js'
const fn = () => {
    console.log('fn')
    foo()
}
fn()
// main.js
import { foo, bar } from './utils.js'
const main = () => {
    console.log('main')
    bar()
}
main()

现在分包使用rollup.js打包shaking.js与main.js文件

# 打包shaking文件
npx rollup shaking.js -f esm -o bundle.js
# 打包main文件
npx rollup main.js -f esm -o mian-bundle.js

先来看bundle.js文件的内容,utils文件中foo打包进去，而bar没有被引用，则被移除。

const foo = () => {
    console.log('foo');
};
const fn = () => {
    console.log('fn');
    foo();
};
fn();

再来看main-bundle.js文件的内容,utils文件中bar打包进去，而foo虽然被引用，但是没有在main.js文件中使用，则被移除。

const bar = () => {
    console.log('bar');
};
const main = () => {
    console.log('main');
    bar();
};
main();

不可以被Tree-shaking

有些代码看着无用，但是确不能被Tree-shaking移除，例如我们对上面的代码进行重写

// utils.js
// 新增以下代码
export default {
    name: function () {
        console.log('绝对零度')
    },
    age: () => {
        console.log(18)
    }
}
// shaking.js
import userInfo,  { foo } from './utils.js'
const fn = () => {
    console.log('fn')
    userInfo.name()
    foo()
}
fn()

再次使用rollup.js打包文件

const foo = () => {
    console.log('foo');
};
var userInfo = {
    name: function () {
        console.log('绝对零度');
    },
    age: () => {
        console.log(18);
    }
};
const fn = () => {
    console.log('fn');
    userInfo.name();
    foo();
};
fn();

有意思的问题来了，这次我们仅仅使用name方法，而age方法也被打包进来，说明Tree-shaking没有生效。究其原因，export default导出的是一个对象，无法通过静态分析判断出一个对象的哪些变量未被使用，所以tree-shaking只对使用export导出的变量生效。

另外一个问题是，如果一个函数被调用的时候会产生副作用，那么就不会被移除。再次在utils文件中增加下面代码

// utils.js新增的代码
export const empty = () => {
    const a = 1
}
export const effect = (obj) => {
    obj && obj.a
}

再次导入使用然后打包

// shaking.js文件
import userInfo,  { foo, empty, effect } from './utils.js'
const fn = () => {
    console.log('fn')
    userInfo.name()
    empty()
    effect()
    foo()
}
fn()

打包后发现新增加了一个effect函数，而同时新增的empty函数被移除，分析原因发现effect函数就是一个纯读取函数，但是这个函数可能会产生副作用。试想一下，如果obj对象是一个通过Proxy创建的代理对象，那么当我们读取对象属性时，就会触发代理对象的get方法，在get方法中是可能产生副作用的，比如调用其它的方法或者修改一些变量等等。

const foo = () => {
    console.log('foo');
};
const effect = (obj) => {
    obj && obj.a;
};
var userInfo = {
    name: function () {
        console.log('绝对零度');
    },
    age: () => {
        console.log(18);
    }
};
const fn = () => {
    console.log('fn');
    userInfo.name();
    effect();
    foo();
};
fn();

由于rollup.js分析静态代码很困难，所以他们给我们提供一个机制，明确告诉rollup，这部分代码没有副作用可以移除。就是解决这个问题的办法，只需要在effect方法前面加上上面的代码，程序运行的时候就会认为他是没有副作用的，可以放心的进行Tree-shaking。

const effect = (obj) => {
    obj && obj.a;
};

Vue中的应用

在Vue的框架源码中，存在这大量的特性开关，打包编译或者使用的时候通过配置特性开关可以通过Tree-shaking机制让代码资源最优化。
比如vue3为了支持Vue2的options api，写了大量的兼容代码，但是如果我们再使用Vue3中不使用options Api，就可以通过一个叫做__VUE_OPTIONS_API__的特性开关去关闭这个特性，这样最终打包的Vue代码就不会包含这部分，进而减少代码体积。

到此这篇关于理解Vue中的Tree-Shaking的文章就介绍到这了,更多相关Vue中的Tree-Shaking内容请搜索编程网以前的文章或继续浏览下面的相关文章希望大家以后多多支持编程网！

--结束END--

本文标题: Vue中的Tree-Shaking介绍及原理

本文链接: https://lsjlt.com/news/211643.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

猜你喜欢
  • Vue中的Tree-Shaking介绍及原理
    目录什么是Tree-ShakingTree-shaking的原理和支持可以被Tree-shaking不可以被Tree-shakingVue中的应用什么是Tree-Shaking Tr...
    99+
    2023-05-18
    Vue中的Tree-Shaking Vue Tree-Shaking
  • openGauss的SCHEMA的原理及管理介绍
    目录 1.何为Schema摘要： 2.Schema语法✨ 2.1 创建SCHEMA✨ 2.2 修改SCHEMA✨ 2.3 删除SCHEMA 3.Schema赋权 1.何为Schema...
    99+
    2023-02-13
    openGauss SCHEMA管理 openGauss SCHEMA原理
  • xtrabackup介绍及备份原理
    1. Xtrabackup介绍xtrabackup就percona公司基于innodb公司的ibbackup（收费）实现的一个开源软件，完全覆盖了ibbackup的功能，而且完全免费，可谓是业界良心。xtr...
    99+
    2024-04-02
  • Vue指令的实现原理介绍
    这篇文章主要介绍“Vue指令的实现原理介绍”，在日常操作中，相信很多人在Vue指令的实现原理介绍问题上存在疑惑，小编查阅了各式资料，整理出简单好用的操作方法，希望对大家解答”Vue指令的实现原理介绍”的疑惑有所帮助！接下来，请跟着小编一起来...
    99+
    2023-06-20
  • vue混入mixin的介绍及理解
    目录一、mixin是什么二、使用场景三、原理分析四、mixin的理解一、mixin是什么 mixin是面向对象程序设计语言中的类，提供了方法的实现。其他类可以访问mixin类的方法而...
    99+
    2022-11-13
    vue mixin vue mixin原理
  • MySql事务原理介绍及特性
    目录1. 什么是事务2. 事务是如何做到同时成功失败3. 如何提交回滚事务1. mysql 中默认的事务行为是怎样的2. 回滚事务3. 提交事务4. 事务的4个特性5. 事务的隔离性1. 什么是事务 一个事务就是一个完整...
    99+
    2024-04-02
  • Pinia介绍及工作原理解析
    目录什么是Pinia如何使用Pinia安装创建store在组件中使用store在模板中使用storePinia是如何工作的什么是Pinia Pinia是Vue 3的状态管理库，它提...
    99+
    2023-03-06
    Pinia工作原理 Pinia原理
  • ThreadLocal原理介绍及应用场景
    本次给大家介绍重要的工具ThreadLocal。讲解内容如下，同时介绍什么场景下发生内存泄漏，如何复现内存泄漏，如何正确使用它来避免内存泄漏。 ThreadLocal是什么...
    99+
    2024-04-02
  • AJAX工作原理及优缺点介绍
    本篇内容主要讲解“AJAX工作原理及优缺点介绍”，感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷，实用性强。下面就让小编来带大家学习“AJAX工作原理及优缺点介绍”吧!一、ajax所包含的技术大家都知道...
    99+
    2024-04-02
  • 文件包含漏洞（原理及介绍）
    文件包含漏洞（原理及介绍） File inclusion，文件包含（漏洞）。程序开发人员通常出于灵活性的考虑，会将被包含的文件设置成变量，然后动态调用这些文件。但正是因为调用的灵活性导致用户可能调用一...
    99+
    2023-09-05
    php 安全 web安全
  • TIDB简介及TIDB部署、原理和使用介绍
    TiDB简介及TiDB部署、原理和使用介绍 从MySQL架构到TiDB 数据库分类 ​ 介绍TiDB数据库之前，先引入使用场景。如今的数据库种类繁多，RDBMS（关系型数据库）、NoSQL（Not Only SQL）、NewSQL，在数据库...
    99+
    2023-08-17
    tidb 数据库 mysql 大数据 etl工程师
  • Go语言中的Base64编码原理介绍以及使用
    目录前言Go Base64编码什么是Base64编码为什么需要Base64编码Base64编码原理编码步骤位数不足情况Base64解码原理Base64标准编码变种总结前言 在网络中传...
    99+
    2024-04-02
  • Java NIO的的介绍及工作原理是什么
    这篇文章主要讲解了“Java NIO的的介绍及工作原理是什么”，文中的讲解内容简单清晰，易于学习与理解，下面请大家跟着小编的思路慢慢深入，一起来研究和学习“Java NIO的的介绍及工作原理是什么”吧！针对传统I/O 工作模式的不足，NIO...
    99+
    2023-06-17
  • mysql复制的原理介绍
    这篇文章主要讲解了“mysql复制的原理介绍”，文中的讲解内容简单清晰，易于学习与理解，下面请大家跟着小编的思路慢慢深入，一起来研究和学习“mysql复制的原理介绍”吧！ 图中m...
    99+
    2024-04-02
  • GoldenGate的基本原理介绍
    本篇内容介绍了“GoldenGate的基本原理介绍”的有关知识，在实际案例的操作过程中，不少人都会遇到这样的困境，接下来就让小编带领大家学习一下如何处理这些情况吧！希望大家仔细阅读，能够学有所成！什么是Go...
    99+
    2024-04-02
  • Spring的工作原理介绍
    本篇内容主要讲解“Spring的工作原理介绍”，感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷，实用性强。下面就让小编来带大家学习“Spring的工作原理介绍”吧!spring原理内部最核心的就是IOC了，动态注入，让一个对象的创建不用...
    99+
    2023-05-30
    spring
  • chatgpt的算法原理介绍
    chatgpt的算法原理是基于GPT-3，先通过人工标注方式训练出强化学习的冷启动模型与reward反馈模型，最后通过强化学习的方式...
    99+
    2023-02-09
    chatgpt
  • 详细介绍Golang编译的过程及其原理
    Golang是一种新的编程语言，十分快速的发展，得到越来越多开发者的关注和使用。Golang除了拥有诸如并发编程、垃圾回收、强类型等自身特性外，还具有编译速度快、能生成单独静态链接的可执行文件等优势。但是，Golang的编译过程却不简单。在...
    99+
    2023-05-14
  • Java中枚举的实现原理介绍
    目录基本概述使用方式条件选择循环遍历集合映射常用方法总结基本概述 在 JDK1.5 之前，通过定义常量使用的都是：public static fianl。而枚举的设计，就是把相关的常...
    99+
    2024-04-02
  • MySQL中B+ Tree的原理分析
    这篇文章主要介绍MySQL中B+ Tree的原理分析，文中介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们一定要看完！前言由于MySQL的索引中最重要的数据结构就是B+树，所以前面我们先大概讲讲B+树的...
    99+
    2024-04-02
软考高级职称资格查询
热门wiki
近期文章
推荐阅读
热门问答
热门标签
编程网，编程工程师的家园，是目前国内优秀的开源技术社区之一，形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容，为IT开发者提供了一个发现、使用、并交流开源技术的平台。

  • 官方手机版

  • 微信公众号

  • 商务合作