🐢11s到⚡1s，性能优化之首屏加载🚀 |
您所在的位置：网站首页 › angular打包优化 › 🐢11s到⚡1s，性能优化之首屏加载🚀 |
🐢11s到⚡1s，性能优化之首屏加载🚀
|
全文共6511字/词，阅读大概需要13分钟，太长不看党请直接移步👉「开始优化」部分直接查看优化手段
前段时间公司服务器网络波动，网站访问变慢，一些性能问题也随之暴露了出来。纷纷反馈在这样的弱网条件下，访问新项目时，加载了近1分钟都没加载出来，而访问其他页面顶多也就30-40s。 在网络恢复后，尝试访问了下页面，无缓存首次打开需要等待近11s的时间，最大的资源达到了3.7M... 在对项目做了一些优化处理后，再次无缓存打开可以发现网页几乎是秒开，平均耗时在1s以内 在这里总结记录一下，基本上都是一些常规可复制的优化手段，希望能为同样想优化网页性能的你提供思路~ 优化效果Slow3G条件下22-25s加载完成 在开始之前，我们需要明白一个原则：性能优化的最终目的是提升用户体验。 简而言之就是让用户感觉这个网站很「快」（至少不慢hh），这里的「快」有两种，一种是「真的快」一种是「觉得快」 「真的快」：可以客观衡量的指标，像网页访问时间、交互响应时间、跳转页面时间 「觉得快」：用户主观感知的性能，通过视觉引导等手段转移用户对等待时间的关注 做好这两方面都能提升用户对网站的性能评价。 权衡取舍另外就是软件工程没有银弹，一种优化方案可能适用于大多数项目，但是某些特殊情况下很可能会起反效果。 举个🌰，由于浏览器有单域名下并发请求限制，通常我们会将依赖统一打成一个vendor包（vue-cli默认策略），减少首屏请求数，且依赖不变动的情况下文件指纹不变，可以有效利用304缓存。在依赖不多的情况这么处理确实有助于提升加载速度，但一旦依赖多起来，vendor就会特别的大，在弱网条件下，会严重拖慢页面显示。这显然不是我们想要的，所以我们根据情况会对vendor进行拆分，比如拆分到CDN，或者直接拆分到页面中 因此，我们在做性能优化过程中，必须根据最终能给用户体验带来的提升权衡后做出适合当前项目的选择 指标和目标目标会影响我们在过程中的决策 指标则用来度量我们的目标 目标首先我们需要确定目标，根据场景和项目复杂度不同，制定的目标也不同，比如希望比竞品快20%，或者符合标准的"2-5-10"原则等等 这里我定下的目标是 正常网速下，2s内加载完成 弱网下，30s内加载完成 指标关于指标这块，简单介绍下常见指标 FCP（First Contentful Paint）：白屏时间（第一个文本绘制时间） Speed Index：首屏时间 TTI（Time To Interactive）: 第一次可交互的时间 lighthouse score（performance）：Chrome浏览器审查工具性能评分（也可以npm install -g lighthouse，编程式调用） 调试工具通过性能调试工具可以直观便捷地获取这些指标，比如Newwork、k6、hiper、Lighthouse...。具体可以看我关于性能调试工具的另一篇文章 瓶颈分析 Network分析从Network上我们发现主要问题在3.2M的chunk-vendor.js上 体积太大，下载慢 阻塞了其他资源下载 Lighthouse分析由于本次不涉及到应用内场景性能优化，Performance分析跳过... dist目录分析 整体体积太大，近5M 出现了若干不应出现的静态资源，比如页面上没引用到SVG图标、应该被内联的小图等 部分图片资源较大，最大的达到仅400KB Webpack Bundle分析从webpack bundle可以看出，问题着实不少 未剔除项目模板用到的冗余依赖，比如g2、quill、wangEditor、mock等 一些没用到的Ant-design组件由于全局注册也一并打包了进去 项目中只用到几个Ant-Design/icons，但却被全量引入 moment和moment-timezone重复，且体积较大 core-js体积较大 打包策略不合理，导致chunk-vendor太大 开始优化🛫🛫🛫 体积优化 ⚡排查并移除冗余依赖、静态资源 内容（点击展开/收起） 移除项目模板冗余依赖 将public的静态资源移入assets。静态资源应该放在assets下，public只会单纯的复制到dist，应该放置不经webpack处理的文件，比如不兼容webpack的库，需要指定文件名的文件等等before：4.96M after：4.12M ⚡构建时压缩图片 内容（点击展开/收起）每次使用在线服务手动压缩较为麻烦，可以直接在构建流程中加入压缩图片 使用image-webpack-loader // install npm i image-webpack-loader -D // vue.config.js chainWebpack: (config) => { if (isProd) { // 图片压缩处理 const imgRule = config.module.rule('images') imgRule .test(/\.(png|jpe?g|gif|webp)(\?.*)?$/) .use('image-webpack-loader') .loader('image-webpack-loader') .options({ bypassOnDebug: true }) .end() } } install或build时如果出现imagemin库下载失败，可以尝试 换源、配置github hosts、install时添加--user=root解决 由于在图片下载后已经手动用在线工具压缩过，这部分提升不大before：4.12M after：4.00M ⚡使用webP图片 内容（点击展开/收起）webP是谷歌推出的新图片格式（2010），同等质量下体积拳打png脚踢jpg，目前兼容性还算可以，就苹果家的表现不太理想 转换为webP图片可以手动，也可以加入构建自动化生成。 手动，可以使用webP-converter、智图等工具，但建议使用官方webP-converter，除了便捷性，同质量下体积各方面均优于智图。 ./cwebp -q 75 login_plane_2.png -o login_plane_2.webp 自动化生成，可以使用image-min-webp或其他webpack插件 页面中使用（兼容低版本） HTML中使用，标签兼容 |
【本文地址】
今日新闻 |
推荐新闻 |