vue3的tree-shaking做了什么优化

原创 已于 2023-03-02 19:04:07 修改 · 180 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#vue3 #treeShaking

于 2023-03-02 19:00:30 首次发布
Vue2中的全局API如Vue.nextTick()可能导致deadcode，无法通过tree-shaking优化。Vue3通过将这些方法抽取为独立函数，允许打包工具更有效地移除未使用的代码，从而提高包的效率。

参考链接
vue2存在的问题：

不少global-api是作为静态函数直接挂在构造函数上，例如Vue.nextTick()，如果我们从未在代码中使用它们，就会形成所谓的dead
code ，这类global-api 造成的dead code 无法使用webpack 的tree-shaking 去除掉。

Vue.nextTick = function...

vue3做的优化

将这些方法抽取为独立的函数，这样打包工具的摇树优化可以将这些dead code 去除掉

nextTick = function ...
Vue3 - Tree Shaking 摇树优化（它是什么？跟 Vue3 有什么关系？）
🏆 前端领域优质创作者
11-14 2480
vue官方文档，vueTree Shaking 摇树官方文档， vue3快速入门-Tree shaking，vue3学习之摇树优化 ，Vue3中提到的Tree-shaking，说说Vue 3.0中Treeshaking特性，Vue3中提到的Tree-shaking，Vue 3.0中Treeshaking全局API 特性，shaking tree 原理，Vue3中提到的Tree-shaking，Vue 3.0中Treeshaking，Vue3 - Tree Shaking 摇树优化（它是什么？跟 Vue3 有
为啥说vue3 Tree-shaking（摇树优化），只打包你用到的功能，减少代码体积 ？
来了波，兄嘚
02-20 779
为啥说vue3 Tree-shaking（摇树优化），只打包你用到的功能，减少代码体积 ？想象你要去旅行，行李箱空间有限。
Vue3 Tree-Shaking深度解析
我是 二川兄，对Web开发、GIS开发、3D模型、机器学习、面试技巧等方面都有一些涉猎~ 欢迎您加入技术交流圈！你可以在我的文章末尾找到我~
04-18 2349
Vue3 Tree-Shaking深度解析
Vue3 Tree-Shaking深度解析：原理剖析与最佳实践指南
嗨，欢迎来到我的 优快云 博客小天地！一名深耕多年的技术发烧友。在这里，我将把日常工作中积累的宝贵经验，从复杂架构设计的精妙之处，到代码优化的实战技巧，毫无保留地分享给大家。
03-13 5164
Vue3 Tree-Shaking深度解析：原理剖析与最佳实践指南
Vue 3 中的 Tree-shaking 是什么？它如何帮助优化性能？
有我更精彩的博客
02-26 1181
简单来说，Tree-shaking 是一种去除未使用代码的技术。它的名字来源于“树摇晃”的含义：当你摇晃一棵树时，掉落的果实就是未被使用的代码。在前端开发中，Tree-shaking 通常与模块打包工具（如 Webpack 和 Rollup）结合使用，帮助开发者剔除那些在代码中已引入但未实际使用的模块，进而减少最终生成的包体积。
vue3 tree-shaking原理解析
wx479的博客
09-01 402
vue3 tree-shaking原理
Vue3中提到的Tree-shaking
qq_24428851的博客
10-08 1463
的更新算法以及响应式系统，无论如何这两个都是会包含在你得包里的。的整个尺寸还要小，而且还是在加了很多vue3的新功能的基础上。进来，这样的结果就是使得一些可能不会用到的一些功能就可以被。这些东西只有当你引入东西的时候，这些东西才会被打包进去。这些功能，如果你不用的话，就不会引用到最后的包里。的东西，其实也并不是一个新的东西，有人称之为"而所有的可选的运行时的东西全部一起加进来是。一个比较大的显著的区别就是，当你用一个。的实际尺寸，即最终打包出来的整个应用的。的东西，而是那些打包工具的功能。
vue--Tree-shaking技术
wl_qianduan的博客
03-31 1024
由于 ES6 模块的导入和导出是静态的，打包工具（如 Webpack、Rollup）在编译时就可以确定哪些模块被使用，哪些未被使用，然后将未使用的模块从最终的打包文件中移除。这里的Vue是一个全局对象，包含了 Vue 的所有功能，即使我们只使用了其中一部分，打包工具也无法将未使用的部分移除。综上所述，Vue 3.x 通过组合式 API 和按需引入的设计，极大地提升了对 Tree-shaking 的支持，使得开发者能够更方便地减少打包文件的体积，优化应用性能。Vue 3.x 的全局 API 也支持按需引入。
vue核心原理之--理解Tree-Shaking
绝对零度的博客
05-15 1564
这个概念在前端领域是因为rollup.js而起，后来webpack等也加入支持的行列中。简单来说就是移除掉项目中永远不会被执行的代码（dead code），实际情况中，代码虽然依赖了某个模块，但其实只使用其中的某些功能。通过，将没有使用的模块代码移除掉，这样来达到删除无用代码的目的。
如何在Vue3中使用Tree-Shaking技术
weixin_44337480的博客
05-19 990
由于 Vue 3 采用了 ES Modules 和更模块化的设计，Tree Shaking 可以更加有效地工作，从而减小最终构建的大小。如果你的项目使用了 CSS 或 SCSS，并且你希望减少最终 CSS 文件的大小，你可以考虑使用 PurgeCSS。确保你使用的是这些工具的最新版本，因为它们已经内置了对 Tree Shaking 的支持。请注意，Tree Shaking 的效果取决于你的代码库、构建配置和目标浏览器。如果你使用第三方库，确保你使用的是它们的 ES Modules 版本（如果可用）。
Vite打包原理: Tree-shaking在Vue3项目中的实际效果
2301_81554122的博客
04-20 1619
相比CommonJS（Node.js的模块系统），ES Module能够更好地支持Tree-shaking，因为它的模块引入是静态的，这意味着引入的代码可以被静态分析和优化。例如，当我们使用Vue的单文件组件时，如果组件中引入了一些未使用的方法，通过Tree-shaking，这些未使用的方法将被删除，最终生成的代码将更加精简。最后，我们要注意的是，在实际开发中，尽管Vite和Tree-shaking能够带来诸多优势，但也需要开发者在编写代码时遵循一些最佳实践，以确保Tree-shaking的有效性。
单斜氧化镓单晶衬底，全球前十强生产商排名及市场份额（by QYResearch）.pdf
12-19
单斜氧化镓单晶衬底，全球前十强生产商排名及市场份额（by QYResearch）.pdf
用JavaScript画直角三角形
12-19
用JavaScript画直角三角形
大型商用熨平机市场概览，全球前10强生产商排名及市场份额（by QYResearch）.pdf
12-19
大型商用熨平机市场概览，全球前10强生产商排名及市场份额（by QYResearch）.pdf
汽车充电口识别数据集，标注了3067张图片，支持yolo v7，可识别AC，DC 等多种类型快充，慢充插口
12-19
数据集图片和标注详情点击链接查看：https://backend.blog.youkuaiyun.com/article/details/156081316?spm=1011.2415.3001.5331
medici.zip
12-19
medici.zip
Android模拟器启动器ADV
最新发布
12-19
代码转载自：https://pan.quark.cn/s/fa3d530e6d71 SimulateKey Simulate Android KeyEvent
douPersonas分类模型3
12-19
douPersonas分类模型3
一个网页布局示例(DIV+CSS)
12-19
下载方式：https://pan.quark.cn/s/aebb51604f11 cookie-monster Who wants cookies?! Let's create the frontend of our website to sell our hottest cookie products! Objective Use HTML Elements and CSS Styling to create the home page for our cookie site. Prerequisites To complete this project, students should have the following: Basic understanding of HTML structures and attributes. Basic understanding of CSS (Selectors, properties). Concepts HTML | Description ----|------------ HTML | H yper T ext M arkup L anguage used to create the structure of web pages. element | An element is an individual part, or a building block, of a web page. attribute | A modifier of an element. div | A container element. nav | A navigation element. ul | An unorder...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值