vite3＋vue3 项目打包优化之依赖视图分析与摇树优化treeshaking

现在很多小伙伴都已经使用 Vite + Vue3 开发项目了，如果你是 "前端架构师" 或者是 "团队核心" 的话，不得不可考虑的一个问题就是性能优化。

说到前端性能优化，个人认为主要有两个方面：

减少文件的体积，体积小了加载自然就快了。如：首屏优化、CDN加速、UI组件库按需加载 等等

代码层面的优化。如：组件、样式的抽取，路由懒加载、Vue3性能优化、代码层面优化 等等

本篇文章主要讲述的是生产环境下 Vite + Vue3 打包优化。

1. 依赖视图分析（rollup-plugin-visualizer）

优化的主要难点在于从哪里开始去优化。如果不清楚自己的项目问题出现在哪里，就显得比较盲目。我们可以通过插件工具先分析一下项目的文件大小及引用情况，根据分析结果采取对应的文件分包、cdn引入等相关技术有针对性的去优化。

是一个依赖分析插件，它提供了多种模式的依赖分析，包括直观的视图分析，sunburst（循环层次图，像光谱）、treemap（矩形层次图，看起来比较直观，也是默认参数）、network（网格图，查看包含关系）、raw-data（原数据模式，json格式）, list(列表模式)，你可以选择任意一种你喜欢的观察模式。本文采用默认的方式进行依赖分析。

安装

执行打包命令，查看报告

在"项目根目录"或者"dist目录"下会生成文件，运行到浏览器：

通过上图可得出依赖之间的关系、文件大小，针对性的去优化。你还可以通过左上角的 "排除exclude"、"包含include" 输入框对依赖模块进行筛选。

如上图，鼠标放到对应的依赖位置，浮框中显示：依赖文件大小、依赖引用位置等。

配置的参数有很多是默认的，如果你没有特殊需求，完全可以不添加参数，相关参数如下：

options 参数配置演示：

2. 摇树优化（treeshaking）

也被称为 “摇树优化”。简单来讲，就是在保证代码运行结果不变的前提下，去除无用的代码。Vue3中，许多  的引入都支持  优化。也就是说只打包你用到的 ，忽略那些没有用到的。

Vue3 会默认使用 Rollup 进行  ，不需要额外进行配置。但有一个条件，必须是  模块才行。

以 Lodash 工具库 为例：

是一个一致性、模块化、高性能的 JavaScript 实用工具库，是从 Underscore 分离出来的超集。

为了良好的浏览器兼容性，它使用了旧版 es5 的模块语法；而则使用了 es6 的模块语法，这让 webpack 之类的打包工具可以对其进行 （摇树优化）以删除未使用的代码来优化打包体积。所以在使用库时，推荐通过来进行导入操作。

演示两种引入的打包体积：

2.1 使用 lodash 打包分析

安装 lodash

引入 lodash-es 中的函数并使用

执行打包命令后输出如下信息

由于 lodash 是使用  规范的模块，所以无法进行  ，Vue 会把整个  依赖打包进来。整个依赖文件的大小是  。

2.2 使用 lodash-es 打包分析

安装 lodash-es

引入 lodash-es 中的函数并使用

执行打包命令后输出如下信息

可以看到引用了  库的依赖体积变成了  ，相对于 小了很多。所以我们在选择第三方库时，要尽可能使用  版本，可以提升不少性能！