xiaofeixiang
198 天前
先分析现状，再看达成目标。
LCP 我个人不是最主要的影响因素，最重要的是白屏时间和页面可操作时间，这两个时间短的话，页面的可访问性就有保障，我自己公司的项目做过一些这方面的优化，个人浅见分享一下。
最直观的就是做 SSR 或者 SSG ，vue2 也有 pre-render 相关的处理，可行的话也可以切换到 nuxtjs2 ，基本没有什么门槛。
资源加载方面该先检查服务器配置，gzip 或者 br ，http2 这些配置必须要有， 静态资源 cdn 加速也必不可少，资源根据需求做 cdn 缓存和预热，这个非常非常重要，服务器就是力大砖飞的东西，配置越好，网络越好，体验越好，在这个的基础上，你再去做优化，不然就是屎上雕花，毕竟巧妇难为无米之炊；
工程打包方面来讲，html 也可以预先做 dns 解析和资源缓存方面的优化，打包文件拆分这个很重要，一个资源 300k 我个人觉得有点太大了，我们所有的项目最大的公共包不会超过 150k ，不过在服务器和网络条件好的情况下，这个勉强能够接受，不要把不必要的插件和代码打包到公共文件里面去！举个例子 echart 和 lodash 这种一定是页面用到的地方才加载。不能拆出去的，能走 cdn 的尽量走 cdn ，尽量降低公共包里面无用的代码，ui 库和路由一定要做好按需加载，css 包可以用 purecss 这类的插件把没用到的资源去掉，当然这个得根据项目来调整。所有的 js 和 css 包括 html 都必须压缩！
从页面的方面来讲，所有的图片统一转换成最小的格式，可以通过 cdn 自带的格式转换，也可以通过工程化配置压缩文件体积，页面图片加载尽量做好懒加载。如果是 SSR ，一定要注意 async 和 await 的使用，多个非依赖的请求尽量并行请求。不追求 SEO 的话，能异步加载的模块都走客户端渲染，做好骨架屏能很大程度上提升体验，包括资源加载渲染的时候，可以参考有些项目运行热编译的时候页面有进度条提示。首屏没用到的元素也可以考虑做懒加载，举个我最近优化的 webview 嵌入的 H5 的例子， 我们业务有一个长列表的 collapse ，如果全量渲染，在正常的手机和 pc 上的速度是很正常的，在我们产品嵌入的低性能的安卓设备上页面 loading 时间会超过 10s ，这基本是不可接受的，优化加了列表和 collapse 内容的延迟加载，页面初始只渲染列表，页面 load 完之后会逐步加载 collapse 里面的内容，不影响页面的滚动和操作，优化后基本能保证在低性能设备上的访问速度和高性能设备差距不大。具体需求具体分析，各类框架的推荐写法一定要去看，保持良好的代码编写习惯，尽量不要往项目中堆屎和脑残逻辑
这些是针对首次访问用户的，其他的还有类似 pwa 和本地缓存的东西，可以针对多次访问的用户做优化，不过我感觉做好了资源缓存，这些配置可以根据需求选择性的去做，现在性能优化的文章和分享很多，都可以根据自己的项目需求去参考