2024年最新浅谈一下Vue3的TreeShaking特性_vue3 默认自动 tree shaking(1)，2024年最新阿里p7岗需要几轮面试

本文链接：https://blog.csdn.net/2401_84617772/article/details/138907685

总结

=============================================================

从转行到现在，差不多两年的时间，虽不能和大佬相比，但也是学了很多东西。我个人在学习的过程中，习惯简单做做笔记，方便自己复习的时候能够快速理解，现在将自己的笔记分享出来，和大家共同学习。

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

个人将这段时间所学的知识，分为三个阶段：

第一阶段：HTML&CSS&JavaScript基础

第二阶段:移动端开发技术

第三阶段:前端常用框架

推荐学习方式：针对某个知识点，可以先简单过一下我的笔记，如果理解，那是最好，可以帮助快速解决问题；如果因为我的笔记太过简陋不理解，可以关注我以后我还会继续分享。
大厂的面试难在，针对一个基础知识点，比如JS的事件循环机制，不会上来就问概念，而是换个角度，从题目入手，看你是否真正掌握。所以对于概念的理解真的很重要。

源码级的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-lib'



### 总结

为了帮助大家更好温习重点知识、更高效的准备面试，特别整理了《前端工程师面试手册》电子稿文件。

内容包括html，css，JavaScript，ES6，计算机网络，浏览器，工程化，模块化，Node.js，框架，数据结构，性能优化，项目等等。



包含了腾讯、字节跳动、小米、阿里、滴滴、美团、58、拼多多、360、新浪、搜狐等一线互联网公司面试被问到的题目，涵盖了初中级前端技术点。

![](https://img-blog.csdnimg.cn/img_convert/d74f8b42f4a63c76b18efc6a818147df.png)

![](https://img-blog.csdnimg.cn/img_convert/6deb905d9655a3f0f54b8920686e1970.png)

**前端面试题汇总**

![](https://img-blog.csdnimg.cn/img_convert/42728594459506983a38ca2b86545fc6.png)

**[开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】](https://bbs.csdn.net/forums/4304bb5a486d4c3ab8389e65ecb71ac0)**

**JavaScript**

![](https://img-blog.csdnimg.cn/img_convert/7796de226b373d068d8f5bef31e668ce.png)

**性能**

![](https://img-blog.csdnimg.cn/img_convert/d7f6750332c78eb27cc606540cdce3b4.png)



**linux**

![](https://img-blog.csdnimg.cn/img_convert/ed368cc25284edda453a4c6cb49916ef.png)