vue3中tree shaking特性
Treeshaking是一种通过清除多余代码方式来优化项目打包体积的技术
专业术语叫 Dead code elimination
简单来讲,就是在保持代码运行结果不变的前提下,去除无用的代码
如何做到
Tree shaking是基于ES6模板语法(import与exports),主要是借助ES6模块的静态编译思想,在编译时就能确定模块的依赖关系,以及输入和输出的变量
Tree shaking无非就是做了两件事:
1、编译阶段利用ES6 Module判断哪些模块已经加载
2、判断那些模块和变量未被使用或者引用,进而删除对应代码
包体积与 Tree-shaking 优化
一个最有效的提升页面加载速度的方法就是压缩 JavaScript 打包产物的体积。当使用 Vue 时有下面一些办法来减小打包产物体积:
尽可能地采用构建步骤
* 如果使用的是相对现代的打包工具,许多 Vue 的 API 都是可以被 tree-shake 的。举例来说,如果你根本没有使用到内置的 <Transition> 组件,它将不会被打包进入最终的产物里。Tree-shaking 也可以移除你源代码中其他未使用到的模块。
*当使用了构建步骤时,模板会被预编译,因此我们无须在浏览器中载入 Vue 编译器。这在同样最小化加上 gzip 优化下会相对缩小 14kb 并避免运行时的编译开销
在引入新的依赖项时要小心包体积膨胀!在现实的应用中,包体积膨胀通常因为无意识地引入了过重的依赖导致的
如果你只在渐进式增强的场景下使用 Vue,并想要避免使用构建步骤,请考虑使用 petite-vue (只有 6kb) 来代替
webpack Treeshaking 的注意事项
因为 defineComponent() 是一个函数调用,所以它可能被某些构建工具认为会产生副作用,如 webpack。即使一个组件从未被使用,也有可能不被 tree-shake。
为了告诉 webpack 这个函数调用可以被安全地 tree-shake,我们可以在函数调用之前添加一个 /*#__PURE__*/ 形式的注释:
export default /*#__PURE__*/ defineComponent(/* ... */)
请注意,如果你的项目中使用的是 Vite,就不需要这么做,因为 Rollup (Vite 背后在生产环境使用的打包器) 可以智能地确定 defineComponent() 实际上并没有副作用,所以无需手动注释。
vue3中的作用
减少程序体积(更小)
减少程序执行时间(更快)
便于将来对程序架构进行优化(更友好)
vue3中tree shaking特性相关推荐
- webpack构建中tree shaking、scope Hoisting(面试题)
一.tree shaking (摇树优化) tree shaking概念: 1个模块可能有多个方法,只要其中某个方法使用了,整个文件会被打到bundle中 tree shaking 只将用到的方法打到 ...
- Tree Shaking
文章目录 前言 一.Tree shaking 是什么? 二.webpack中 Tree shaking 的相关使用 1.添加一个通用模块 2.将文件标记为无副作用(side-effect-free) ...
- webpack中的tree shaking(树摇)-----移除未使用的代码
本篇大致概括一下tree shaking的作用以及与webpack相结合使用 什么是tree shaking 引用webpack官网的原文来说: tree shaking 是一个术语,通常用于描述移除 ...
- vue3 + vite + ts + setup , 第十二练 Vue3 css style 新特性,样式穿透,插槽选择器,全局选择器,在vue3中使用tailwindcss
一.vue3.x 样式新特性 样式穿透 深度选择器 <style scoped> .a :deep(.b) {/* ... */ } </style> 插槽选择器 <s ...
- Vue3.0系列(一): VUE3.0的新特性
和Vue2.0 相比,Vue3.0有哪些亮点: 序号 特性 解析 1 Performance 性能上比Vue2.0快1.3-2倍 2 Tree shaking support 按需编译,体积更加轻量化 ...
- Webpack 实现 Tree shaking 的前世今生
作者 | 左琳 责编 | 欧阳姝黎 前言 如果看过 rollup 系列的这篇文章 - 无用代码去哪了?项目减重之 rollup 的 Tree-shaking,那你一定对 tree-shak ...
- webpack高级应用篇(九):tree shaking(usedExports) 与 sideEffects
目录 tree shaking(usedExports) tree shaking 前 tree shaking 后 sideEffects(副作用) 解释 tree shaking 和 `sideE ...
- Webpack Tree Shaking
Tree Shaking tree shaking 是一个术语,通常用于描述移除 JavaScript 上下文中的未引用代码(dead-code).它依赖于 ES2015 模块语法的 静态结构 特性, ...
- 无用代码去哪了?项目减重之 rollup 的 Tree shaking
左琳,微医前端技术部前端开发工程师.身处互联网浪潮之中,热爱生活与技术. Tip:本文所用 rollup 打包工具版本为 rollup v2.47.0. 从 Webpack2.x 通过插件逐步实现 t ...
最新文章
- 干掉服务状态!从 Session 到 Token,复杂度降低100倍!
- 支付宝AI摘下视觉竞赛世界冠军,能精准区分同种类物体的细微差别
- 2018 ACM 国际大学生程序设计竞赛上海大都会赛重现赛 F Color it
- Acwing第 31 场周赛【完结】
- 谈谈C#中的三个关键词new , virtual , override(装载 Winner.Net)
- 就业信息网进行服务器维护,服务器安全武汉大学黄石理工学院就业信息网.pptx...
- php实现 字符串加密(分类分布分工,化不可能为可能)
- [Python] L1-025. 正整数A+B-PAT团体程序设计天梯赛GPLT
- 大数据分析对企业运营的价值体现
- oracle导出大数据
- php gtk 中文手册,PHP-GTK
- java 处理汉字枚举类_浅谈java枚举类(附代码)
- html5 手机uc浏览器 复制链接,H5手机移动端调起浏览器(qq浏览器,uc浏览器)自带分享功能实例...
- Process finished with exit code -1073741819(0x0000005)
- css渐变背景色与切角
- pg8168改mac命令_Realtek 8168网卡改MAC地址教程
- python股票自动 选股 与 止损 止盈 脚本
- 关于type_C接口
- BGP路由协议的那些事?(上)
- 不可见字符和表情包正则
热门文章
- 游泳前要做哪些热身运动?
- mysql主从和canal_MySQL协议和canal实现
- chatgpt帮助你完成五个工作,提高效率
- python drf_Python学习————drf(一)
- d3之网络拓扑图进阶
- Android更新圆点代码,Android实现两圆点之间来回移动加载进度
- 植物大战僵尸年度英文
- java回归中的残差平方和的均值
- [全程建模]《软件工程之全程建模实现》第二版精装封面
- android导入relinker_AE素材导入插件下载 AE导入AAF时素材自动重新链接工具 AAF Relinker v1.0 免费版 下载-脚本之家...