在技术上, 前端应用永远有可以优化以至让应用性能和体验更好的的点, 但在现实中, 我们需要制作一个 “优秀” 的应用, 而不是 “完美” 的应用

所以, 依据现实中的考量, 主要是: 时间成本, 人力成本, 技术改造点对性能 & 体验影响的 ROI, 还有个人经验, 罗列出推荐的技术改造点:

按照推荐程度排序

  1. Loading 效果 骨架屏等

    1. 职业生涯第 6 年时, 才感悟到的, 没错 ! 应用的快慢其实是人类的主观感受
    2. 所以一个舒适的 Loading 或过渡动画会极大提升应用的体验

  2. 网络 & 部署服务供应商

    1. 我们无法控制访问者的设备, 浏览器和网络环境
    2. 但可以控制, 针对地域选择合适的部署服务提供商, 其网络情况对网站访问速度影响巨大

  3. 严格控制第三方包等外部依赖

    1. webpack-bundle-analyzer（尤其要分析 main bundle）, bundle 大小对网站加载和 js 执行影响较大, 引入第三方 js 包多加考量, 这点就比较容易控制
    2. script defer 或者 放到 body 后

  4. http2

    1. 目前 http2 已被广泛使用, 其请求头压缩, 多路复用等特性会让网站资源加载更快
    2. 修改简单, 很多服务商仅需要勾选即可启用 http2

  5. gzip

    1. 修改简单, nginx 或 webpack plugin, 效果明显

  6. http cache + webpack content hash + split chunk

    1. 合理配置 http 缓存头, 大幅提升网站后续加载速度
    2. 把某些固定的依赖分chunk，内容不变，会一直使用浏览器缓存的 js 文件
    3. 如果选择把一些库 external, 尽量选择 CDN 地址引入
    4. 图片等固定 hash 名称, 缓存时间最大 Cache-Control: max-age=31536000

  7. CDN

    1. CDN 几乎对所有用户都有访问速度提升, 由于运维和后续流量带宽成本, 优先级放到这里

  8. 观察网络请求监控数据, 排查慢请求, 推动协调后端优化修改

下面开始是代码相关 | 或修改成本较大

  1. 路由级别代码分割

    1. 访问到对应路由才会加载其 js 和 css 等, 首屏提升明显

  2. Dynamic Import, Code Split

    1. 除了路由, 大组件也可以动态引入, 如图表, 编辑器等

  3. Intersection observer 懒加载, 内容懒加载可以提升渲染效率

  4. 虚拟列表, UI 相应速度快, 用户体验好, 相关工具库成熟

  5. React.memo (immer 如果数据层级复杂)

  6. 图片 webp / iconfont

    1. 改造成本稍大, 能加快图片加载速度, iconfont 比图片小得多

  7. treeshake

    1. 如 fontawesome, lodash-es

其它

SSR

  1. 因改造成本普遍较大, 所以单独罗列出来, 建议项目技术选型时考虑, 中途切换的话 emmm

其它

如切换 Vite, esbuild 等 开发提效 的优化点不在本文范围之内, 不过仍对应用质量有显著提升和贡献