next image export optimizer
v1.18.0
ใช้ next.js ขั้นสูง <image/> ส่วนประกอบพร้อมฟังก์ชันการส่งออกแบบคงที่ เพิ่มประสิทธิภาพภาพคงที่ทั้งหมดในขั้นตอนเพิ่มเติมหลังจากการส่งออกแบบคงที่ JS ถัดไป
สำหรับรูปภาพที่ใช้สตริงพา ธ : (เช่น src = "/profile.png")
วางภาพในโฟลเดอร์ภายในโฟลเดอร์สาธารณะเช่น สาธารณะ/ภาพ
สำหรับรูปภาพที่ใช้การนำเข้าแบบคงที่: (เช่น src = {profileimage})
คุณสามารถวางภาพได้ทุกที่ในโครงการของคุณ ภาพจะได้รับการปรับให้เหมาะสมและคัดลอกไปยังโฟลเดอร์ส่งออก
สำหรับภาพระยะไกล: (เช่น src = "https://example.com/image.jpg")
โปรดดูที่ส่วนของภาพระยะไกล
npm install next-image-export-optimizer
# Or
yarn add next-image-export-optimizer
pnpm install next-image-export-optimizer
เพิ่มสิ่งต่อไปนี้ใน next.config.js ของคุณ นอกจากนี้คุณยังสามารถใช้ next.config.ts สำหรับโครงการ typecript:
// next.config.js
module . exports = {
output : "export" ,
images : {
loader : "custom" ,
imageSizes : [ 16 , 32 , 48 , 64 , 96 , 128 , 256 , 384 ] ,
deviceSizes : [ 640 , 750 , 828 , 1080 , 1200 , 1920 , 2048 , 3840 ] ,
} ,
transpilePackages : [ "next-image-export-optimizer" ] ,
env : {
nextImageExportOptimizer_imageFolderPath : "public/images" ,
nextImageExportOptimizer_exportFolderPath : "out" ,
nextImageExportOptimizer_quality : "75" ,
nextImageExportOptimizer_storePicturesInWEBP : "true" ,
nextImageExportOptimizer_exportFolderName : "nextImageExportOptimizer" ,
nextImageExportOptimizer_generateAndUseBlurImages : "true" ,
nextImageExportOptimizer_remoteImageCacheTTL : "0" ,
} ,
} ; อัปเดตคำสั่ง build ใน package.json
{
- "build": "next build",
+ "build": "next build && next-image-export-optimizer"
}แทนที่ส่วนประกอบ <image /> ด้วยส่วนประกอบ <portedImage /> :
ตัวอย่าง:
// Old
import Image from "next/image" ;
< Image
src = "images/VERY_LARGE_IMAGE.jpg"
alt = "Large Image"
width = { 500 }
height = { 500 }
/> ;
// Replace with either of the following:
// With static import (Recommended)
import ExportedImage from "next-image-export-optimizer" ;
import testPictureStatic from "PATH_TO_IMAGE/test_static.jpg" ;
< ExportedImage src = { testPictureStatic } alt = "Static Image" /> ;
// With dynamic import
import ExportedImage from "next-image-export-optimizer" ;
< ExportedImage
src = "images/VERY_LARGE_IMAGE.jpg"
alt = "Large Image"
width = { 500 }
height = { 500 }
/> ; สำหรับภาพระยะไกลคุณต้องระบุ SRC เป็นสตริงที่เริ่มต้นด้วย HTTP หรือ HTTPS ในส่วนประกอบ ExportedImage
import ExportedImage from "next-image-export-optimizer" ;
< ExportedImage src = "https://example.com/remote-image.jpg" alt = "Remote Image" /> ; เพื่อให้การเพิ่มประสิทธิภาพรูปภาพ ณ เวลาสร้างการทำงานอย่างถูกต้องคุณต้องระบุ URL ภาพระยะไกลทั้งหมดในไฟล์ที่ next.config.js ว่า RemoteOptimizedImages.js ในไดเรกทอรีรูทของโครงการของคุณ ไฟล์ควรส่งออกอาร์เรย์ของสตริงที่มี URL ของภาพระยะไกล การคืนสัญญาของอาร์เรย์ดังกล่าวยังได้รับการสนับสนุน
ตัวอย่าง:
// remoteOptimizedImages.js
module . exports = [
"https://example.com/image1.jpg" ,
"https://example.com/image2.jpg" ,
"https://example.com/image3.jpg" ,
// ...
] ; // Or with a promise
module . exports = new Promise ( ( resolve ) =>
resolve ( [
"https://example.com/image1.jpg" ,
"https://example.com/image2.jpg" ,
"https://example.com/image3.jpg" ,
// ...
] )
) ;
// Or with an async API call
module . exports = fetch ( "https://example.com/api/images" ) . catch ( ( error ) => {
console . error ( error ) ;
return [ ] ; // return an empty array in case of error
} ) ;เมื่อถึงเวลาสร้างภาพจะถูกดาวน์โหลดหรืออ่านจากแคช URL ภาพจะถูกแทนที่ด้วย URL ภาพที่ดีที่สุดในส่วนประกอบรูปภาพที่ส่งออก
คุณสามารถระบุเวลาในการใช้ชีวิตของแคชได้ในไม่กี่วินาทีโดยการตั้งค่าตัวแปรสภาพแวดล้อม nextImageExportOptimizer_remoteImageCacheTTL ในไฟล์ next.config.js ของคุณ ค่าเริ่มต้นคือ 0 วินาที (เนื่องจากภาพอาจมีการเปลี่ยนแปลง)
ตั้งค่าเป็น:
หากคุณต้องการซ่อน URL ภาพระยะไกลจากผู้ใช้คุณสามารถใช้ Prop OverridesRC ของส่วนประกอบ ExportedImage สิ่งนี้จะแทนที่แอตทริบิวต์ SRC ของแท็กรูปภาพด้วยค่าของ Prop OverridesRC
ระวังว่าส่วนประกอบรูปภาพไม่สามารถกลับไปที่ URL ภาพต้นฉบับได้หากยังไม่ได้สร้างภาพที่ดีที่สุดเมื่อคุณใช้ Prop OverridesRC ซึ่งจะส่งผลให้ลิงก์ภาพที่เสีย
คุณสามารถปรับแต่งชื่อไฟล์สำหรับรูปภาพที่ได้รับการปรับปรุงระยะไกลโดยเพิ่มสิ่งต่อไปนี้ใน next.config.js ของคุณ:
module . exports = {
env : {
// ... other env variables
nextImageExportOptimizer_remoteImagesFilename : "remoteOptimizedImages.cjs" ,
} ,
// ... other config options
} ; หากโครงการ next.js ของคุณไม่ได้อยู่ที่ไดเรกทอรีรูทที่คุณเรียกใช้คำสั่งเช่นเมื่อคุณใช้ monorepo คุณสามารถระบุตำแหน่งของ next.config.js เป็นอาร์กิวเมนต์ของสคริปต์:
"export" : " next build && next-image-export-optimizer --nextConfigPath path/to/my/next.config.js "ระบุเส้นทางโฟลเดอร์เอาต์พุตผ่านตัวแปรสภาพแวดล้อม:
// next.config.js
{ "env" : {
"nextImageExportOptimizer_exportFolderPath" : "path/to/my/export/folder"
} }หรือโดยผ่านการโต้แย้งไปยังสคริปต์:
"export" : " next build && next-image-export-optimizer --exportFolderPath path/to/my/export/folder " หากคุณต้องการปรับใช้แอปของคุณกับโฟลเดอร์ย่อยของโดเมนของคุณคุณสามารถตั้งค่า basepath ในไฟล์ next.config.js :
module . exports = {
basePath : "/subfolder" ,
} ;ส่วนประกอบ ExportedImage มีเสาฐานซึ่งคุณสามารถใช้เพื่อส่งผ่าน basepath ไปยังส่วนประกอบ
import ExportedImage from "next-image-export-optimizer" ;
import testPictureStatic from "PATH_TO_IMAGE/test_static.jpg" ;
< ExportedImage
src = { testPictureStatic }
alt = "Static Image"
basePath = "/subfolder"
/> ; หากคุณไม่ต้องการสร้างภาพตัวยึดตำแหน่งตัวเล็กที่มีขนาดเล็กโดยอัตโนมัติให้ตั้งค่าตัวแปรสภาพแวดล้อม nextImageExportOptimizer_generateAndUseBlurImages เป็น false และตั้งค่าตัวยึด placeholder จากส่วนประกอบ <PortedImage /> ที่ empty
หากคุณต้องการเปลี่ยนชื่อชื่อโฟลเดอร์ส่งออกให้ตั้งค่าตัวแปรสภาพแวดล้อม nextImageExportOptimizer_exportFolderPath เป็นตัวแปรเป็นชื่อโฟลเดอร์ที่ต้องการ ค่าเริ่มต้นคือ nextImageExportOptimizer
โดยค่าเริ่มต้นรูปภาพจะถูกเก็บไว้ในรูปแบบ WEBP
หากคุณไม่ต้องการใช้รูปแบบ webp ให้ตั้งค่าตัวแปรสภาพแวดล้อม nextImageExportOptimizer_storePicturesInWEBP เป็น false
ส่วนประกอบ <ESPORTISTIMAGE /> เป็น wrapper รอบ ๆ <image /> ส่วนประกอบของ next.js. มันใช้คุณสมบัติตัวโหลดที่กำหนดเองเพื่อสร้าง SRCSET สำหรับความละเอียดที่แตกต่างกันของภาพต้นฉบับ เบราว์เซอร์สามารถโหลดขนาดที่ถูกต้องตามขนาดวิวพอร์ตปัจจุบัน
การดำเนินการแปลงภาพได้รับการปรับให้เหมาะสมเนื่องจากใช้แฮชเพื่อตรวจสอบว่าภาพได้รับการปรับให้เหมาะสมหรือไม่ ด้วยวิธีนี้ภาพจะได้รับการปรับให้เหมาะสมเพียงครั้งเดียวและไม่ใช่ทุกครั้งที่คำสั่งบิลด์ทำงาน
ส่วนประกอบ <ESPORTISTIMAGE /> จะกลับไปที่ภาพต้นฉบับหากภาพที่ได้รับการปรับปรุงยังไม่ได้สร้างขึ้นในโหมดการพัฒนา ในแอพที่ส่งออกแบบสแตติกแบบคงที่ภาพที่ตอบสนองจะมีให้เป็น SRCSET และโหลดโดยเบราว์เซอร์แบบไดนามิก
แนะนำวิธีการนำเข้าแบบคงที่เนื่องจากจะแจ้งให้ลูกค้าทราบเกี่ยวกับขนาดภาพดั้งเดิม เมื่อมีการร้องขอความกว้างที่ใหญ่กว่าความกว้างของภาพดั้งเดิมขนาดภาพที่ใหญ่ที่สุดถัดไปในอุปกรณ์อาร์เรย์ (ระบุในถัดไป next.config.js ) จะถูกใช้สำหรับการสร้างแอตทริบิวต์ SRCSET เมื่อคุณระบุรูปภาพเป็นสตริงพา ธ ไลบรารีนี้จะสร้างภาพซ้ำของภาพต้นฉบับสำหรับแต่ละขนาดภาพในอุปกรณ์อาร์เรย์ที่มีขนาดใหญ่กว่าขนาดภาพดั้งเดิม
คุณสามารถส่งออกภาพต้นฉบับที่ไม่ได้ปรับโดยใช้เสา unoptimized ตัวอย่าง:
import ExportedImage from "next-image-export-optimizer" ;
< ExportedImage
src = { testPictureStatic }
alt = "Original, unoptimized image"
unoptimized = { true }
/> ; คุณยังสามารถใช้องค์ประกอบภาพดั้งเดิม next/legacy/image :
import ExportedImage from "next-image-export-optimizer/legacy/ExportedImage" ;
import testPictureStatic from "PATH_TO_IMAGE/test_static.jpg" ;
< ExportedImage src = { testPictureStatic } alt = "Static Image" layout = "fixed" /> ;ภาพเคลื่อนไหว: คุณสามารถใช้ภาพ. GIF และภาพเคลื่อนไหว. WEBP Next-Image-Export-Optimizer จะเพิ่มประสิทธิภาพภาพเคลื่อนไหวโดยอัตโนมัติและสร้าง SRCSET สำหรับความละเอียดที่แตกต่างกัน
หากคุณตั้งค่าตัวแปร nextimageExportoptimizer_storepicturesInwebp เป็นจริงภาพเคลื่อนไหวจะถูกแปลงเป็นรูปแบบ. WEBP ซึ่งสามารถลดขนาดไฟล์ได้อย่างมีนัยสำคัญ โปรดทราบว่าภาพ PNG ภาพเคลื่อนไหวไม่ได้รับการสนับสนุนโดยแพ็คเกจนี้
คุณสามารถดูตัวอย่างสดของการใช้ห้องสมุดนี้ได้ที่ ReactApp.dev/next-image-export-optimizer
คำเตือน เวอร์ชัน 1.0.0 เป็นการเปลี่ยนแปลงที่แตกหัก มันเป็นไปตามการเปลี่ยนแปลงที่แนะนำใน 13.0.0 ถัดไปซึ่งแทนที่ส่วนประกอบ
next/imageด้วยnext/future/imageหากคุณใช้ 12 หรือต่ำกว่าโปรดใช้เวอร์ชัน 0.17.1
