Skip to content

如何优化SPA应用的首屏加载速度慢的问题? #69

Open
@LuckyWinty

Description

@LuckyWinty
Owner
No description provided.

Activity

LuckyWinty

LuckyWinty commented on Jul 28, 2020

@LuckyWinty
OwnerAuthor
  • 将公用的JS库通过script标签外部引入,减小app.bundel的大小,让浏览器并行下载资源文件,提高下载速度;
  • 在配置 路由时,页面和组件使用懒加载的方式引入,进一步缩小 app.bundel 的体积,在调用某个组件时再加载对应的js文件;
  • 加一个首屏 loading 图,提升用户体验;
  • 如果在webview中的页面,可以进行页面预加载
  • 独立打包异步组件公共 Bundle,以提高复用性&缓存命中率
  • 静态文件本地缓存,有两种方式分别为HTTP缓存,设置Cache-Control,Last-Modified,Etag等响应头和Service Worker离线缓存
  • 配合 PWA 使用
  • SSR
JaykeyGuo

JaykeyGuo commented on Jul 28, 2020

@JaykeyGuo

在头部添加资源的link标签,使用prefetch的方式

JaykeyGuo

JaykeyGuo commented on Jul 28, 2020

@JaykeyGuo

不知道使用懒加载可以不?

SunshowerC

SunshowerC commented on Jul 28, 2020

@SunshowerC

还有预渲染 prerender 技术: SunshowerC/blog#9

Silious

Silious commented on Jul 28, 2020

@Silious
  • root中插入loading 或者 骨架屏 prerender-spa-plugin

  • 去掉外链css

  • http缓存资源 cache-control > expires > etag > last-modified

  • 使用动态 polyfill

  • 使用 SplitChunksPlugin 自动拆分业务基础库,避免加载重复模块

  • 使用 Tree Shaking 减少业务代码体积

  • 懒加载:动态import,loaddable

  • 把代码编译到 ES2015+

  • 使用 lazyload 和 placeholder 提升加载体验

  • SSR

yangzai316

yangzai316 commented on Aug 11, 2021

@yangzai316

减少网络请求次数
• 雪碧图
• 避免图片src 为空,减少不必要的请求
减少资源体积
• js 压缩
• css 压缩
• code spliting (实现按需加载)
• 使用外部js css ,减少当前html 文件体积
延迟加载
• 懒加载、预加载
• webpack - import() 实现组件按需加载
预加载
使用CDN
• webpack - externals :将第三方依赖用CDN的方式引入,可使用其缓存的特性
HTTP缓存
• 强缓存
• 协商缓存
减少包的体积(空间换时间)
• code split
渲染性能
• 避免回流
SSR
• 首屏服务端渲染
避免重定向
减少页面DOM数量
DNS Prefetch

SEO • 合理的 title、description、keywords(三项的权重逐个减小) • 语义化的 HTML 标签 • 重要内容 HTML 代码放在最前,不要用 js 输出,少用 iframe(搜索引擎不会抓取子资源的内容) • 图片必须加 alt • 服务端渲染
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

No one assigned

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

      Development

      No branches or pull requests

        Participants

        @SunshowerC@LuckyWinty@Silious@yangzai316@JaykeyGuo

        Issue actions

          如何优化SPA应用的首屏加载速度慢的问题? · Issue #69 · LuckyWinty/fe-weekly-questions