Skip to content

Commit c937304

Browse files
tangly1024tangly1024
committed
Merge magzine LCP image optimization
2 parents 6ccd2b8 + 560d04e commit c937304

4 files changed

Lines changed: 51 additions & 8 deletions

File tree

‎components/LazyImage.js‎

Lines changed: 34 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,19 @@ import { siteConfig } from '@/lib/config'
22
import Head from 'next/head'
33
import { useCallback, useEffect, useRef, useState } from 'react'
44

5+
const getTargetImageWidth = (width, maxWidth) => {
6+
const parsedWidth = Number(width)
7+
const parsedMaxWidth = Number(maxWidth)
8+
9+
if (Number.isFinite(parsedWidth) && parsedWidth > 0) {
10+
return Number.isFinite(parsedMaxWidth) && parsedMaxWidth > 0
11+
? Math.min(parsedWidth, parsedMaxWidth)
12+
: parsedWidth
13+
}
14+
15+
return maxWidth
16+
}
17+
518
/**
619
* 图片懒加载
720
* @param {*} param0
@@ -23,6 +36,7 @@ export default function LazyImage({
2336
style
2437
}) {
2538
const maxWidth = siteConfig('IMAGE_COMPRESS_WIDTH')
39+
const targetImageWidth = getTargetImageWidth(width, maxWidth)
2640
const defaultPlaceholderSrc = siteConfig('IMG_LAZY_LOAD_PLACEHOLDER')
2741
const imageRef = useRef(null)
2842
const [currentSrc, setCurrentSrc] = useState(
@@ -53,7 +67,8 @@ export default function LazyImage({
5367
}, [defaultPlaceholderSrc, fallbackSrc, placeholderSrc])
5468

5569
useEffect(() => {
56-
const adjustedImageSrc = adjustImgSize(src, maxWidth) || defaultPlaceholderSrc
70+
const adjustedImageSrc =
71+
adjustImgSize(src, targetImageWidth) || defaultPlaceholderSrc
5772
const imageElement = imageRef.current
5873
const handleImageLoaded = () => {
5974
if (typeof onLoad === 'function') {
@@ -127,7 +142,7 @@ export default function LazyImage({
127142
}
128143
}, [
129144
src,
130-
maxWidth,
145+
targetImageWidth,
131146
priority,
132147
defaultPlaceholderSrc,
133148
fallbackSrc,
@@ -146,8 +161,6 @@ export default function LazyImage({
146161
onError: handleImageError,
147162
className: `${className || ''} lazy-image-placeholder`,
148163
style,
149-
width: width || 'auto',
150-
height: height || 'auto',
151164
onClick,
152165
// 性能优化属性
153166
loading: priority ? 'eager' : 'lazy',
@@ -159,6 +172,9 @@ export default function LazyImage({
159172

160173
if (id) imgProps.id = id
161174
if (title) imgProps.title = title
175+
if (width) imgProps.width = width
176+
if (height) imgProps.height = height
177+
if (priority) imgProps.fetchPriority = 'high'
162178

163179
if (!src) {
164180
return null
@@ -171,7 +187,12 @@ export default function LazyImage({
171187
{/* 预加载 */}
172188
{priority && (
173189
<Head>
174-
<link rel='preload' as='image' href={adjustImgSize(src, maxWidth)} />
190+
<link
191+
rel='preload'
192+
as='image'
193+
href={adjustImgSize(src, targetImageWidth)}
194+
fetchPriority='high'
195+
/>
175196
</Head>
176197
)}
177198
</>
@@ -190,9 +211,14 @@ const adjustImgSize = (src, maxWidth) => {
190211
}
191212
const screenWidth =
192213
(typeof window !== 'undefined' && window?.screen?.width) || maxWidth
214+
const parsedMaxWidth = Number(maxWidth)
215+
const targetWidth =
216+
Number.isFinite(parsedMaxWidth) && parsedMaxWidth > 0
217+
? Math.min(screenWidth, parsedMaxWidth)
218+
: screenWidth
193219

194220
// 屏幕尺寸大于默认图片尺寸，没必要再压缩
195-
if (screenWidth > maxWidth) {
221+
if (!targetWidth) {
196222
return src
197223
}
198224

@@ -203,6 +229,6 @@ const adjustImgSize = (src, maxWidth) => {
203229

204230
// 使用正则表达式替换 width/w 参数
205231
return src
206-
.replace(widthRegex, `width=${screenWidth}`)
207-
.replace(wRegex, `w=${screenWidth}`)
232+
.replace(widthRegex, `width=${targetWidth}`)
233+
.replace(wRegex, `w=${targetWidth}`)
208234
}

‎pages/_document.js‎

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -58,6 +58,19 @@ class MyDocument extends Document {
5858
return (
5959
<Html lang={BLOG.LANG}>
6060
<Head>
61+
{BLOG.FONT_AWESOME && (
62+
<>
63+
<link
64+
rel='preconnect'
65+
href='https://cdnjs.cloudflare.com'
66+
crossOrigin='anonymous'
67+
/>
68+
<link rel='dns-prefetch' href='//cdnjs.cloudflare.com' />
69+
</>
70+
)}
71+
<link rel='preconnect' href='https://images.unsplash.com' />
72+
<link rel='dns-prefetch' href='//images.unsplash.com' />
73+
6174
{/* 预加载字体 */}
6275
{BLOG.FONT_AWESOME && (
6376
<>

‎themes/magzine/components/PostItemCardTop.js‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -39,6 +39,8 @@ const PostItemCardTop = ({ post, showSummary }) => {
3939
priority
4040
alt={post?.title}
4141
src={post?.pageCoverThumbnail}
42+
width={768}
43+
height={320}
4244
className='w-full h-80 object-cover hover:scale-125 duration-150'
4345
/>
4446
</div>

‎themes/magzine/components/PostItemCardWide.js‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -75,6 +75,8 @@ const PostItemCardWide = ({ post, showSummary }) => {
7575
<LazyImage
7676
alt={post?.title}
7777
src={post?.pageCoverThumbnail}
78+
width={160}
79+
height={160}
7880
style={post?.pageCoverThumbnail ? {} : { height: '0px' }}
7981
className='w-40 h-40 object-cover hover:scale-125 duration-150'
8082
/>

0 commit comments

Comments
 (0)