(转载公司内部论坛本人文章的2020.12.7 ) )。
作为导语：客户端开发，由于项目的需求，近一年来陆续进行了很多web前端的需求开发。 但是，过去进行的大部分都是单页运营H5，在线时间短，一般能稳定运行就可以了，有关性能的问题很少考虑。 近半年来承担了项目H5的开发。 需要长期维护，而且是多页。 这必须考虑到有关H5性能的问题。
我以前做过Androidapp的冷启动时间优化。 感兴趣的人请翻阅一下以前的报道。 这次，接受了H5的画面速度优化的需求，自然想起了过去优化客户端的经验。 其中的心得之一是尽可能简化——正在启动的代码逻辑。
典型的web优化方法基本上以资源加载和html呈现两者为主。 前者相对于第一个屏幕，后者相对于可对话。 资源优化以更小的资源包为主，包括常规压缩、减包、开包、动态称重包和图像优化。 html呈现的总体方向是更快地显示内容，包括CDN分发、DNS分析、http缓存、数据预请求、数据缓存和直接输出
我们的项目H5采用Vue框架，多页。 因为这次的优化主要是针对第一屏的速度进行优化，所以这次的优化重点是资源的优化。
一.优化首页资源链接1 .按需读取资源链接
如上图所示，比赛H5分为横版和竖版，但为了更好地重用业务逻辑代码，代码和H5链接是相同的。 因此，无论打开横版还是竖版，都会同时加载这两个css资源链接，从而产生不必要的网络请求和资源消耗。 此部分已更改为区分用户代理环境并按需加载。
2 .资源链接支持gzip和cdn加速
如上图所示，重建同学提供的css链接。 文件大小为143kb。 此资源链接的问题在于，由于没有gzip，因此资源文件很大，也不支持CDN加速。
gzip:gzip是一种加速网站压缩的技术，打开后可以加速我们网站的打开速度。 原理是经过服务器压缩，客户端浏览器快速解压缩，可以大幅减少站点流量
CDN加速： CDN根据网络流量、节点连接、负载情况以及与用户的距离和响应时间等综合信息，将用户请求实时重定向到离用户最近的服务节点。 其目的是让用户就近获取所需内容，解决互联网网络的拥挤问题，提高用户访问网站的响应速度。
于是，我把资源文件重新上传到腾云。 腾讯云本身可以支持gzip和cdn的加速。 如上图所示，新链接文件大小只有22.7kb。
二、优化首页资源大小1 .去除与首页无关的js资源
在webpack-bundle-analyzer中分析chunk-libs.js包含许多与初始屏幕启动无关的不必要的第三方js库。 上图中的qcode库仅在用户没有登录(属于极少数情况)时才需要使用，因此只有在需要使用库时才能加载js。 因此，通过将代码更改为动态加载js库，可以大大减小chunk-libs.js的大小。
const script=document.createelement (script )； script.type='text/css '； script.src=url； const heads=document.getelementsbytagname (' head )； heads heads.length0heads [0] ) heads[0].appendchild(script )； } 2.动态导入组件
如上图所示，当webpack-bundle-analyzer分析webpack包时，main.js包含与顶部画面的启动无关的许多vue组件，这些组件大部分是用户手动的如果一起打包到main.js中，main.js的文件会变大，但H5的屏幕会加载main.js，这将严重影响首次启动的速度。
此外，由于前期的多人开发，如果在多个页面上部署了相同的组件并打包了webpack，则将相同的组件打包到多个页面的js文件中会导致严重的冗馀问题，导致每个页面启动缓慢。
对于这些组件，理想的做法是将其从页面js文件中分离出来，并单独打包到js文件中，以便只有在每个页面都需要呈现组件时才能动态加载组件的资源文件这样可以提高每个页面的启动速度。
因此，我们使用了动态import组件在webpack中单独打包这些组件。
components 3360 { member verified (resolve ) ) ['./member-verified']，resolve )； )、) }
动态导入组件。 组件打包在单独的js文件中，以便可以在每页上按需加载组件。 这意味着，只有在需要查看组件时，才能加载相应的js。 此外，通过尽可能减小main.js文件的大小，可以缩短第一个屏幕的启动时间。
3 .优化图像资源与APP一样，图像资源也是影响启动速度的大头。 加载图像太大，占用资源并影响网络速度。
比赛H5的所有图像都存储在云中，因此可以统一拦截v-lazy，并根据需要加载图像大小。
优化后的效果
优化发布后，啄木鸟统计的H5现网全页时间明显下降(上图)。 另外，灯箱的性能分数也从41分提高到了79分。
以上是首次尝试优化web前端性能的总结。 如果有错误的地方，请指出来。