【前端性能优化大赛精选文章】-首屏优化耗时实战

2022-01-26 16:40:29 浏览数 (1)

前言

事实上, 只有10%-20%的最终用户响应时间是发在从 Web 服务器获取 HTML 文档并传送到浏览器中的。如果希望能够有效地减少页面的响应时间，就必须关注剩余 80%-90% 的最终用户体验。–Steve Souders

优化方法

项目技术栈：

  • 框架：Vue2 。
  • 打包工具：webpack 。

1.代码压缩

使用 gzip 压缩可以节省 50%-70% 的网络开销。

浏览器支持的压缩类型可以通过 network 的 Accept-Encoding: gzip, deflate 来查看。很多浏览器支持 gzip 却不支持 deflate，因此 gzip 是最理想的压缩方法。

代码语言：javascript复制
// webpack中配置如下：const CompressionWebpackPlugin = require('compression-webpack-plugin')
const productionGzipExtensions = ["js", "css", "html"]
if (config.build.productionGzip) { const CompressionWebpackPlugin = require("compression-webpack-plugin"); webpackConfig.plugins.push( new CompressionWebpackPlugin({ asset: "[path].gz[query]", algorithm: "gzip", test: new RegExp( "\.("   config.build.productionGzipExtensions.join("|")   ")$"      ), threshold: 10240, minRatio: 0.8    })  );}
代码语言：javascript复制
// nginx 中配置    gzip on; # 开启Gzip    gzip_static on; # 开启静态文件压缩    gzip_min_length  1k; # 不压缩临界值，大于1K的才压缩    gzip_buffers     4 16k;    gzip_http_version 1.1;    gzip_comp_level 2;    gzip_types     text/plain application/javascript application/x-javascript text/javascript text/css application/xml application/xml rss; # 进行压缩的文件类型    gzip_vary on;    gzip_proxied   expired no-cache no-store private auth;    gzip_disable   "MSIE [1-6].";

注意：开启 gzip 一定要前后端同时操作才有效！！！按键盘 F12 打开浏览器控制台-network，成功！

[点击查看大图]

2.关掉 sourceMap

代码语言：javascript复制
productionSourceMap: false,

3.使用 CDN 内容分发网络

在index.html文件中通过环境来判断是否引入 CDN 文件，webpack 通过环境判断是否使用 CDN 引入文件的全局变量。

只需在刚刚配置 gzip 的代码加上一段代码即可：

代码语言：javascript复制
if (config.build.productionGzip) { const CompressionWebpackPlugin = require("compression-webpack-plugin"); webpackConfig.plugins.push( new CompressionWebpackPlugin({ asset: "[path].gz[query]", algorithm: "gzip", test: new RegExp( "\.("   config.build.productionGzipExtensions.join("|")   ")$"      ), threshold: 10240, minRatio: 0.8    })  ); // 配置externals就是当使用CDN进入的js文件在当前项目中可以引用 // 比如在开发环境引入的vue是import Vue from 'vue', 这个大写的Vue就是对应的下面的大写的Vue webpackConfig.externals = { vue: "Vue", "vue-router": "VueRouter", axios: "axios"  };}

在 html 中引入这段代码，使用 EJS 语法判断是否为生产环境，引入示例：

代码语言：javascript复制
<body>    <div id="app"></div>    <% if (process.env.NODE_ENV === 'production') { %>    <script src="https://cdn.bootcss.com/vue/2.6.10/vue.min.js"></script>    <script src="https://cdn.bootcss.com/vue-router/3.0.2/vue-router.min.js"></script>    <script src="https://cdn.bootcss.com/axios/0.18.0/axios.min.js"></script>    <% } %>  </body>

同时去掉所有的 import 和 Vue.use() 。

代码语言：javascript复制
// import Vue from 'vue'// import Router from "vue-router";// Vue.use(Router);

F12打开浏览器控制台-network，引入 CDN 成功！

[点击查看大图]

4.将图片打包上传至腾讯云

有些图片实在是过大，影响了资源加载的时间，故将其打包上传至腾讯云对象存储中，这样页面中用不到图片的时候，就不加载，减轻了首屏资源加载的压力。

5.去除首屏不需要的依赖

可以看到，首屏大文件是 elementUI，elementUI 采用部分引入，故最后只有 48kb。经分析首屏大文件是 lodash，但排查发现全局只使用了一次 lodash，故不在 app.js 中全局引入，在使用的地方引入即可。

[点击查看大图]

去除 lodash 后效果如下，首页所需加载的依赖减小至 82kb 左右，是可以接受的范围。

[点击查看大图]

6.其他优化

  • 压缩图片，推荐工具：https://tinypng.com/。
  • 路由懒加载：需要在 router 里配置，这样触发某条路由，再去加载对应的资源，减少首屏压力。
  • 优化后端接口：首屏的接口如果有特别耗时的，那么就需要去优化后端了，比如本文对首页的热点数据使用了 Redis 缓存，速度更快。
  • elementUI 按需加载（这里有个存疑，我的 element 按需加载后是 80kb，但也采用过 CDN 方案，目前两者性能相差无异）

最后打包分析，在腾讯云前端性能监控控制台可以看见依赖非常小了，网站肉眼可见的快了~

[点击查看大图]

总结

因为本项目是将 vue、vuex、vue-router、axios、element-ui 都放到了bootCDN 上，所以资源加载取决于 CDN 的快慢，首屏耗时会有一些浮动。

榜中的最好成绩是 CDN 比较快的时候，首屏优化耗时：146ms，平时大部分稳定在 200-400 ms，还是取决于 CDN 网速和到服务器的距离。

[点击查看大图]

上述首屏耗时优化效果最终评估平台为：腾讯云前端性能监控。点击文末「阅读原文」了解腾讯云前端性能监控。

联系我们

扫码加云监控小助手，回复“Rum”

加入前端性能监控技术交流群

RUM 相关文章：

关注我们，了解腾讯云监控的最新动态

本文转载于腾讯云 社区。原文链接：

https://cloud.tencent.com/developer/article/1919102。

cdn 网站 文件存储 前端性能监控 腾讯云可观测平台

0 人点赞