现在很多小伙伴都已经使用 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 中的函数并使用
执行打包命令后输出如下信息
可以看到引用了 库的依赖体积变成了 ,相对于 小了很多。所以我们在选择第三方库时,要尽可能使用 版本,可以提升不少性能!
领取专属 10元无门槛券
私享最新 技术干货