Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Open
LuckyWinty opened this issue Jul 28, 2020 · 6 comments
Open

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

LuckyWinty opened this issue Jul 28, 2020 · 6 comments

Comments

@LuckyWinty
Copy link
Owner

No description provided.

@LuckyWinty
Copy link
Owner Author

LuckyWinty commented Jul 28, 2020

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

@JaykeyGuo
Copy link

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

@JaykeyGuo
Copy link

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

@SunshowerC
Copy link

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

@Silious
Copy link

Silious commented Jul 28, 2020

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

  • 去掉外链css

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

  • 使用动态 polyfill

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

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

  • 懒加载:动态import,loaddable

  • 把代码编译到 ES2015+

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

  • SSR

@yangzai316
Copy link

减少网络请求次数
• 雪碧图
• 避免图片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
Projects
None yet
Development

No branches or pull requests

5 participants