海外网站入口,网站目标建设,国外设计师灵感网站,湛江建站公司什么是Treeshaking#xff1f;
Treeshaking是一个术语,通常用于描述移除JavaScript中无用代码的过程。 在Vue3中,借助于它的编译优化,可以显著减少打包后的大小。
Vue3的Treeshaking实现 Vue3中的Treeshaking主要通过以下两点实现: 源码级的Tree-shaking
Vue3源码采用ES mo…
什么是Treeshaking
Treeshaking是一个术语,通常用于描述移除JavaScript中无用代码的过程。 在Vue3中,借助于它的编译优化,可以显著减少打包后的大小。
Vue3的Treeshaking实现 Vue3中的Treeshaking主要通过以下两点实现: 源码级的Tree-shaking
Vue3源码采用ES module编写。
这可以确保编译时只引入实际使用的代码,没有引入无用模块。
比如通过按需引入 Composition API,而不是全量引入等。
编译阶段的静态提升
Vue3的编译器可以检测在模板、JSX中没有被使用的模块,直接舍弃不打包这些模块。
同时还会执行常量提升、代码inline等优化。
大幅减少模块引用。
优势
相比Vue2有以下优势: 提升了运行效率,减少内存消耗; 减少打包后大小,加快应用加载; 依赖更精确,编译效率更高。
编译比较 假设有一个组件库my-lib,包含按钮、弹窗、表单等20个组件。 vue2导入
// 导入整个my-lib
import * as myLib from my-lib // 注册2个组件
components: {my-button: myLib.Button,my-dialog: myLib.Dialog
}打包后my-lib整个大小200kb,实际只用了2个组件。
vue3导入
// 按需导入
import {Button, Dialog} from my-libcomponents: {my-button: Button,my-dialog: Dialog
}打包后只包含用到的Button和Dialog代码,总大小仅为30kb。
结论及总结
打包体积比较
Vue2: 200kb Vue3: 30kb
在这个例子中,Vue3的Tree-shaking使得打包体积减少了约85%,只包含实际用到的代码,而不是打包整个库。
这展示了在同样代码条件下,通过Tree-shaking,Vue3可以明显减小打包体积,起到很好的优化效果。
