WEBSITE：‣
GitHub：‣
在现代Web开发中，优化页面加载速度和减少资源浪费是提升用户体验的关键。尤其是对于前端开发者来说，如何优化图片加载与减少未使用的JavaScript是两个常见的问题。在这篇文章中，我们将重点介绍如何在 Next.js 中实现这些优化，提升页面性能。
图片资源压缩
1. 使用 next/image 组件
next/image 是 Next.js 内置的图片优化组件，它支持动态图片加载、自动压缩、延迟加载、响应式调整等功能。该组件会自动根据用户的设备和网络条件，提供合适的图片格式（如 WebP）和尺寸，极大提高页面加载速度。
示例：
import Image from 'next/image'; export default function MyImage() { return ( <Image src="/images/photo.jpg" // 本地图片路径或外部URL alt="Example Photo" width={500} // 指定宽度 height={300} // 指定高度 quality={75} // 设置压缩质量，默认为75 priority // 提升优先级，优先加载重要图片 placeholder="blur" // 加载前显示模糊效果 blurDataURL="/images/blur-placeholder.jpg" // 自定义模糊占位图 /> ); }
2. 优化外部图片
如果要使用外部图片资源，Next.js 允许在 next.config.js 文件中配置外部图片域名。这样 next/image 可以处理这些图片的优化和加载。
配置外部图片源：
在 next.config.js 中，添加以下配置：
module.exports = { images: { domains: ['example.com'], // 允许的外部图片域名 }, };
使用外部图片：
<Image src="https://example.com/photo.jpg" alt="External Photo" width={500} height={300} />
3. 本地图片压缩
在将图片上传到项目中之前，可以使用工具对图片进行本地压缩，以减少文件体积。以下是一些常见的图片压缩工具：
- TinyPNG / TinyJPG: 在线图片压缩工具，支持批量处理。可以先压缩图片，然后再将它们上传到项目中。网站：https://tinypng.com
- Imagemin: 如果想在开发过程中自动压缩图片，可以在项目中使用 Imagemin，结合构建流程对图片进行优化。
使用 imagemin 在构建过程中压缩图片：
npm install imagemin imagemin-mozjpeg imagemin-pngquant
然后创建一个脚本 optimize-images.js，用来压缩图片：
const imagemin = require('imagemin'); const imageminMozjpeg = require('imagemin-mozjpeg'); const imageminPngquant = require('imagemin-pngquant'); (async () => { const files = await imagemin(['public/images/*.{jpg,png}'], { destination: 'public/images/optimized', plugins: [ imageminMozjpeg({ quality: 75 }), imageminPngquant({ quality: [0.6, 0.8] }) ] }); console.log('Images optimized:', files); })();
可以在项目中集成这个脚本，作为打包构建的一部分，自动压缩所有图片。
4. 使用第三方图片服务
如果有大量图片或者对性能要求较高，可以考虑使用第三方图片处理服务如 Cloudinary，通过 API 动态生成不同尺寸和格式的图片。将图片托管在 Cloudinary 或类似服务上，Next.js 可以轻松引用这些外部资源并通过 next/image 组件进行优化。
5. 启用缓存和 CDN
为了进一步提升图片的加载速度，确保图片资源使用了 CDN（如 Vercel 自带的 CDN）进行缓存分发。此外，通过 Cache-Control 头部设置合理的缓存策略，确保静态图片资源能有效利用浏览器缓存。
总结：
在 Next.js 项目中，通过使用 next/image 组件和结合一些图片压缩工具，可以大大优化网站的图片资源，从而提高加载速度和性能。如果有更多的图片管理需求，也可以考虑集成第三方服务如 Cloudinary 来获得更多的动态优化功能。
减少未使用的 JavaScript
减少未使用的 JavaScript 是提升网站性能的关键步骤之一，特别是对于使用 Next.js 等现代前端框架的网站。未使用的 JavaScript 会导致加载时间变长，影响用户体验和搜索引擎优化（SEO）。
以下是一些减少未使用 JavaScript 的优化技巧，特别针对 Next.js 项目：
1. 代码拆分 (Code Splitting)
Next.js 默认支持代码拆分，它只会为每个页面加载所需的 JavaScript 文件。这意味着在不同页面只加载与该页面相关的 JavaScript，而不是整个应用的所有代码。
可以通过以下方式进一步优化代码拆分：
动态导入模块：使用 next/dynamic 动态导入 JavaScript 模块，只在需要时加载它们。
示例：
import dynamic from 'next/dynamic'; const DynamicComponent = dynamic(() => import('../components/MyComponent'), { ssr: false, // 关闭服务器端渲染，仅在客户端加载 }); function HomePage() { return ( <div> <h1>My Home Page</h1> <DynamicComponent /> </div> ); } export default HomePage;
延迟加载组件：动态导入组件并且只在需要时加载它们（如页面滚动时加载或触发某些交互时）。
2. 移除未使用的库和插件
在开发过程中，可能会引入很多 JavaScript 库或插件，但最终并未使用它们。定期检查依赖项，移除未使用的包和代码段。
工具：使用
Webpack Bundle Analyzer 或 Next.js 提供的 @next/bundle-analyzer 分析工具，来查看哪些库占用了太多空间，并确认是否可以移除它们。安装
@next/bundle-analyzer：npm install @next/bundle-analyzer
配置
next.config.js：const withBundleAnalyzer = require('@next/bundle-analyzer')({ enabled: process.env.ANALYZE === 'true', }); module.exports = withBundleAnalyzer({ // other config options });
然后运行项目时启用分析：
ANALYZE=true npm run build
这将生成一个可视化的捆绑分析报告，帮助找出哪些依赖包占用了太多空间，可以考虑移除或优化。
3. 减少 polyfill 和第三方库的使用
许多 JavaScript 库和 polyfill（例如支持旧版浏览器的代码）可能会增加大量的未使用代码。可以通过以下方式减少这些未使用代码：
- 按需引入 polyfill：不要为所有用户加载所有 polyfill，只为需要的浏览器加载。Next.js 支持自动按需引入 polyfill。
也可以使用 Polyfill.io，根据浏览器动态加载必要的 polyfill：
<script src="https://polyfill.io/v3/polyfill.min.js"></script>
- 替代大型库：检查是否引入了过大的第三方库，并替换为更轻量级的替代品。例如，替换 lodash 的 _.get 方法为原生 JavaScript Optional Chaining。
// 使用 lodash 的 _.get import get from 'lodash/get'; const value = get(obj, 'a.b.c'); // 替换为 Optional Chaining const value = obj?.a?.b?.c;
4. Tree Shaking
Next.js 和 Webpack 都支持 tree shaking，即自动移除未使用的代码。确保使用 ES6 的 import 语法，因为它可以更好地与 tree shaking 结合。
- 避免 CommonJS 模块：尽量使用 ES6 import/export 语法，而不是 require，因为 Webpack 在处理 ES6 模块时更容易做 tree shaking 优化。
// Good: ES6 import import { someFunction } from 'my-module'; // Avoid: CommonJS require const someFunction = require('my-module').someFunction;
5. 优化第三方脚本加载
第三方 JavaScript（如广告、社交媒体插件、分析工具等）可能会对性能产生负面影响。可以通过延迟加载或按需加载这些脚本来减少它们对页面加载的影响。
- 延迟加载第三方脚本：使用 next/script 的 strategy 属性延迟加载第三方脚本。
import Script from 'next/script'; export default function Page() { return ( <div> <Script src="https://example.com/third-party-script.js" strategy="lazyOnload" // 等页面加载完后才加载此脚本 /> <h1>Hello Next.js</h1> </div> ); }
- 使用 async 或 defer：对于非关键性脚本，使用 async 或 defer 来让它们异步加载，不阻塞主页面渲染。
<script async src="https://example.com/script.js"></script>
6. 按需加载页面级别的 CSS
Next.js 默认将所有 CSS 文件打包到一起，这在小型项目中很好用，但在大型项目中可能会导致加载不必要的样式。可以通过使用 CSS 模块或 styled-components 等按需加载的 CSS 工具来减少未使用的 CSS 和 JS。
// 在组件中使用 CSS 模块 import styles from './MyComponent.module.css'; export default function MyComponent() { return <div className={styles.container}>Hello</div>; }
7. 将不常用的页面和组件延迟加载
对于大型页面或较少访问的页面，考虑使用动态导入技术来减少初始加载的 JavaScript 体积。
import dynamic from 'next/dynamic'; const DynamicPage = dynamic(() => import('../components/HeavyComponent'), { ssr: false, // 客户端加载 });
8. 移除未使用的 CSS 和 JavaScript
可以使用工具如 PurgeCSS 来移除项目中未使用的 CSS。Next.js 本身通过 next/image 和其他性能优化工具，已经帮助自动处理部分未使用的 JavaScript，但结合 Webpack Bundle Analyzer 和其他分析工具，可以进一步发现和减少未使用的代码。
总结
通过这些方法，可以有效减少未使用的 JavaScript，从而提升网站性能、减少加载时间、提升用户体验和 SEO。主要是通过合理的代码拆分、动态加载组件、移除未使用的库和文件来减少 JavaScript 体积，配合 Next.js 本身的优化工具可以取得很好的效果。
预先连接到必要的来源 ，比如google ads
在 Next.js 项目中预先连接到第三方服务（如 Google Ads 或其他外部资源），可以通过以下几种方式来确保这些服务在用户访问页面时得到快速加载：
1. 通过 <Head> 标签预加载资源
Next.js 提供了 next/head 组件，可以在页面的 <head> 标签中插入外部资源链接。这对于预加载 Google Ads 之类的外部服务非常有用。
使用 <link rel="preconnect"> 可以提前与必要的外部来源建立连接，减少请求的延迟时间。
示例：使用 preconnect 预先连接到 Google Ads
import Head from 'next/head'; export default function MyPage() { return ( <> <Head> {/* 预先连接到 Google 的广告服务 */} <link rel="preconnect" href="https://www.google-ads.com" /> <link rel="preconnect" href="https://www.googletagmanager.com" /> {/* 如果需要，加入 dns-prefetch 来进一步优化 */} <link rel="dns-prefetch" href="https://www.google-ads.com" /> <link rel="dns-prefetch" href="https://www.googletagmanager.com" /> </Head> <div> {/* 页面内容 */} <h1>My Next.js Page</h1> </div> </> ); }
解释：
- preconnect：提前与指定的域名建立连接（DNS 解析、TCP 握手和 TLS 协商），使得之后的资源请求更加快速。
- dns-prefetch：如果不想立即建立连接，但仍希望在用户请求资源之前解析域名，则可以使用 dns-prefetch，它会优先解析域名，减少 DNS 解析的时间。
2. 通过 <Script> 异步加载外部资源
Next.js 提供了 next/script 组件，用于异步或延迟加载第三方 JavaScript 脚本。可以用它来加载 Google Ads 或其他外部资源，并控制加载的时机，避免阻塞页面渲染。
示例：异步加载 Google Ads 脚本
import Script from 'next/script'; export default function MyPage() { return ( <> <Script src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js" strategy="afterInteractive" // 确保页面互动之后才加载广告脚本 /> <div> <h1>My Page with Google Ads</h1> <ins className="adsbygoogle" style={{ display: 'block' }} data-ad-client="ca-pub-xxxxxxxxxxxxxxxx" data-ad-slot="xxxxxxx" /> </div> {/* 初始化广告 */} <Script id="google-ads-init" strategy="lazyOnload"> {` (adsbygoogle = window.adsbygoogle || []).push({}); `} </Script> </> ); }
解释：
- Script 组件：Next.js 提供的 next/script 组件允许控制第三方脚本的加载时机。strategy 属性控制脚本加载策略，常用的值有：
- beforeInteractive：脚本会在页面交互前加载，用于必须立即执行的脚本。
- afterInteractive：脚本会在用户与页面交互后加载，这是大多数第三方广告脚本的推荐方式。
- lazyOnload：脚本会在页面加载完毕后再懒加载，适合非关键的脚本资源。
- 初始化广告：在 ins 元素中定义广告位，通过 window.adsbygoogle.push({}) 来加载广告。
3. 使用 Google Tag Manager
如果使用 Google Ads 或其他 Google 服务，通常会通过 Google Tag Manager (GTM) 来统一管理和加载这些脚本。可以在 Next.js 中通过 next/head 和 next/script 快速集成 GTM。
示例：集成 Google Tag Manager
- 在 pages/_app.js 文件中添加以下内容：
import Head from 'next/head'; import Script from 'next/script'; function MyApp({ Component, pageProps }) { return ( <> <Head> {/* 预先连接到 GTM */} <link rel="preconnect" href="https://www.googletagmanager.com" /> <link rel="dns-prefetch" href="https://www.googletagmanager.com" /> </Head> {/* Google Tag Manager */} <Script id="google-tag-manager" strategy="afterInteractive" dangerouslySetInnerHTML={{ __html: ` (function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start': new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0], j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src= 'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f); })(window,document,'script','dataLayer','GTM-XXXXXX'); `, }} /> <Component {...pageProps} /> </> ); } export default MyApp;
- 在页面的 <body> 里添加 GTM 的 <noscript> 标签，通常放在 _document.js 中。
import { Html, Head, Main, NextScript } from 'next/document'; export default function Document() { return ( <Html> <Head /> <body> <noscript> <iframe src="https://www.googletagmanager.com/ns.html?id=GTM-XXXXXX" height="0" width="0" style={{ display: 'none', visibility: 'hidden' }} ></iframe> </noscript> <Main /> <NextScript /> </body> </Html> ); }
解释：
- Google Tag Manager：通过 GTM，可以管理 Google Ads、Analytics 等第三方工具，而不需要每个工具都单独加载脚本。
- <noscript> 标签：这是为了在不支持 JavaScript 的浏览器中依然支持 GTM。
4. 优化性能：懒加载非关键性资源
还可以通过懒加载广告资源来减少对初始页面加载的影响，特别是对于广告等非关键性资源。使用 IntersectionObserver 监听广告元素是否进入视口（viewport）来动态加载广告。
示例：懒加载广告
import { useEffect } from 'react'; export default function LazyAd() { useEffect(() => { const adSlot = document.querySelector('.adsbygoogle'); const observer = new IntersectionObserver((entries) => { entries.forEach(entry => { if (entry.isIntersecting) { (adsbygoogle = window.adsbygoogle || []).push({}); } }); }); observer.observe(adSlot); return () => observer.disconnect(); }, []); return ( <div> <h1>My Page</h1> <ins className="adsbygoogle" style={{ display: 'block' }} data-ad-client="ca-pub-xxxxxxxxxxxxxxxx" data-ad-slot="xxxxxxx" /> </div> ); }
总结
- preconnect 和 dns-prefetch 可用于加速与外部资源的初始连接。
- 使用 next/script 来控制外部脚本的加载时机，确保非关键脚本不阻塞页面渲染。
- 使用 Google Tag Manager 管理 Google Ads 等工具，通过懒加载和优化连接，提升性能。
- 对于非关键资源（如广告），使用懒加载技术（如 IntersectionObserver）动态加载资源，确保初始加载性能最佳。
通过这些方式，可以有效地预先连接到 Google Ads 或其他必要的外部服务，提升 Next.js 应用的加载速度和用户体验。
结论：提升用户体验的关键
通过 Next.js 的图片优化和 JavaScript 减少功能，开发者能够显著提升页面性能，减少不必要的资源加载。无论是内置的图片优化工具，还是动态导入 JavaScript 的方式，这些都是现代 Web 开发中提升用户体验的有效手段。
如果你想了解更多 Next.js 的优化技巧，欢迎继续关注我们的博客，我们将定期分享更多的实用经验！