图片优化

Next.js Image 组件<img>通过自动图像优化功能扩展了 HTML 元素：

尺寸优化：使用 WebP 和 AVIF 等现代图像格式，自动为每个设备提供正确尺寸的图像。
视觉稳定性：加载图像时自动防止布局移动。
更快的页面加载：图像仅在使用本机浏览器延迟加载进入视口时加载，并带有可选的模糊占位符。
资产灵活性：按需调整图像大小，即使是存储在远程服务器上的图像

import Image from 'next/image'

1. 使用Image组件可以加载本地import图片文件

import Image from 'next/image'
import profilePic from './me.png'

export default function Page() {
  return (
    <Image
      src={profilePic}
      alt="Picture of the author"
    />
  )
}

2. 远程图片

如果我们需要使用remote图片，这个时候我们需要手动设置宽高，因为next.js在编译的过程中，无法知道你的图片大小，无法实现上面说的特点中视觉稳定性

import Image from 'next/image'

export default function Page() {
  return (
    <Image
      src="https://s3.amazonaws.com/my-bucket/profile.png"
      alt="Picture of the author"
      width={500}
      height={500}
    />
  )
}

当然如果我们使用了cdn远程连接，有的时候很怕被别人刷你的流量。这个时候next.js推荐我们使用以下配置进行隐藏我们的s3或者对象存储的地址。

module.exports = {
  images: {
    remotePatterns: [
      {
        protocol: 'https',
        hostname: 's3.amazonaws.com',
        port: '',
        pathname: '/my-bucket/**',
      },
    ],
  },
}

Script 加载优化

我们使用ssr会出现一个问题，如果请求别的页面的时候。layout里面的script都会执行一遍。

这个时候next.js 提供的内部script就可以在多个页面中只执行一遍。比如用户访问文件夹路由（例如dashboard/page.js）或任何嵌套路由（例如）时，将获取第三方脚本。dashboard/settings/page.js Next.js 将确保脚本仅加载一次，即使用户在同一布局中的多个路由之间导航也是如此。

import Script from 'next/script'
 
export default function DashboardLayout({
  children,
}: {
  children: React.ReactNode
}) {
  return (
    <>
      <section>{children}</section>
      <Script src="https://example.com/jquery.min.js" />
    </>
  )
}

静态资源

我们需要使用静态文件只需要把文件添加到public文件中即可，比如我们把me.png放到public/me.png。

那我们访问的静态资源只需要这样即可

import Image from 'next/image'
 
export function Avatar() {
  return <Image src="/me.png" alt="me" width="64" height="64" />
}

延迟加载

在React SPA中我们会经常使用延迟加载来提升web的加载时间，同样Next.js一样给我们提供了延迟加载。

这个功能放在next/dynamic。

'use client'
 
import { useState } from 'react'
import dynamic from 'next/dynamic'
 
// Client Components:
const ComponentA = dynamic(() => import('../components/A'))
const ComponentB = dynamic(() => import('../components/B'))
const ComponentC = dynamic(() => import('../components/C'), { ssr: false })
 
export default function ClientComponentExample() {
  const [showMore, setShowMore] = useState(false)
 
  return (
    <div>
      {/* Load immediately, but in a separate client bundle */}
      <ComponentA />
 
      {/* Load on demand, only when/if the condition is met */}
      {showMore && <ComponentB />}
      <button onClick={() => setShowMore(!showMore)}>Toggle</button>
 
      {/* Load only on the client side */}
      <ComponentC />
    </div>
  )
}

其中ComponentC 是因为这个组件不想进行ssr处理，放到客户端进行渲染，所以你可以设置ssr属性为false。

结语

好了以上就是我们在next.js13+中使用比较多的内置优化方案，梦兽这里希望大家可以按自己的需要考虑一下几个指标进行优化。

我的B站视频号更多视频动态。

微信公众号订阅[梦兽编程]

本文使用 markdown.com.cn 排版

14. Next.js13+ 内置的优化的方案