We read every piece of feedback, and take your input very seriously.
To see all available qualifiers, see our documentation.
There was an error while loading. Please reload this page.
在头部添加资源的link标签,使用prefetch的方式
不知道使用懒加载可以不?
还有预渲染 prerender 技术: SunshowerC/blog#9
root中插入loading 或者 骨架屏 prerender-spa-plugin
去掉外链css
http缓存资源 cache-control > expires > etag > last-modified
使用动态 polyfill
使用 SplitChunksPlugin 自动拆分业务基础库,避免加载重复模块
使用 Tree Shaking 减少业务代码体积
懒加载:动态import,loaddable
把代码编译到 ES2015+
使用 lazyload 和 placeholder 提升加载体验
SSR
减少网络请求次数 • 雪碧图 • 避免图片src 为空,减少不必要的请求 减少资源体积 • js 压缩 • css 压缩 • code spliting (实现按需加载) • 使用外部js css ,减少当前html 文件体积 延迟加载 • 懒加载、预加载 • webpack - import() 实现组件按需加载 预加载 使用CDN • webpack - externals :将第三方依赖用CDN的方式引入,可使用其缓存的特性 HTTP缓存 • 强缓存 • 协商缓存 减少包的体积(空间换时间) • code split 渲染性能 • 避免回流 SSR • 首屏服务端渲染 避免重定向 减少页面DOM数量 DNS Prefetch
Activity
LuckyWinty commentedon Jul 28, 2020
JaykeyGuo commentedon Jul 28, 2020
在头部添加资源的link标签,使用prefetch的方式
JaykeyGuo commentedon Jul 28, 2020
不知道使用懒加载可以不?
SunshowerC commentedon Jul 28, 2020
还有预渲染 prerender 技术: SunshowerC/blog#9
Silious commentedon 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 commentedon Aug 11, 2021
减少网络请求次数
SEO • 合理的 title、description、keywords(三项的权重逐个减小) • 语义化的 HTML 标签 • 重要内容 HTML 代码放在最前,不要用 js 输出,少用 iframe(搜索引擎不会抓取子资源的内容) • 图片必须加 alt • 服务端渲染• 雪碧图
• 避免图片src 为空,减少不必要的请求
减少资源体积
• js 压缩
• css 压缩
• code spliting (实现按需加载)
• 使用外部js css ,减少当前html 文件体积
延迟加载
• 懒加载、预加载
• webpack - import() 实现组件按需加载
预加载
使用CDN
• webpack - externals :将第三方依赖用CDN的方式引入,可使用其缓存的特性
HTTP缓存
• 强缓存
• 协商缓存
减少包的体积(空间换时间)
• code split
渲染性能
• 避免回流
SSR
• 首屏服务端渲染
避免重定向
减少页面DOM数量
DNS Prefetch