Next.js 10 ਦੇ ਨਾਲ ਨਵੇਂ ਚਿੱਤਰ ਹਿੱਸੇ ਦੀ ਖੋਜ ਕਰਨਾ

ਸਮੱਸਿਆਵਾਂ ਨੂੰ ਖਤਮ ਕਰਨ ਲਈ ਸਾਡੇ ਸਾਧਨ ਦੀ ਕੋਸ਼ਿਸ਼ ਕਰੋ

ਵਰਸੇਲ ਵਿੱਚ Next.js 10 ਪ੍ਰੋਜੈਕਟ ਨੂੰ ਤਾਇਨਾਤ ਕਰਨ ਅਤੇ ਨਵੇਂ ਚਿੱਤਰ ਹਿੱਸੇ ਤੋਂ ਆਉਣ ਵਾਲੇ ਨਤੀਜਿਆਂ ਦੀ ਪੜਚੋਲ ਕਰਨ ਦੀ ਸਤਹ-ਪੱਧਰ ਦੀ ਉਦਾਹਰਣ.

Next.js ਨੇ ਇੱਕ ਅਨੁਕੂਲ ਜਾਰੀ ਕੀਤਾ ਚਿੱਤਰ ਭਾਗ ਇਹ ਅਨੁਕੂਲ ਬਣਾਉਂਦਾ ਹੈ ਕਿ Next.js ਵੈਬਸਾਈਟਾਂ ਤੇ ਤਸਵੀਰਾਂ ਕਿਵੇਂ ਲੋਡ ਹੁੰਦੀਆਂ ਹਨ. ਉਨ੍ਹਾਂ ਦੇ ਆਪਣੇ ਸ਼ਬਦਾਂ ਵਿੱਚ: _ ਤਸਵੀਰਾਂ ਹਮੇਸ਼ਾਂ ਇਸ ਤਰ੍ਹਾਂ ਪੇਸ਼ ਕੀਤੀਆਂ ਜਾਂਦੀਆਂ ਹਨ ਜਿਵੇਂ ਕਿ ਸੰਚਤ ਲੇਆਉਟ ਸ਼ਿਫਟ ਨੂੰ ਰੋਕਣ ਤੋਂ ਬਚਿਆ ਜਾ ਸਕੇ, ਇੱਕ ਕੋਰ ਵੈਬ ਵਾਈਟਲ ਜਿਸਦੀ ਵਰਤੋਂ ਗੂਗਲ ਖੋਜ ਦਰਜਾਬੰਦੀ ਵਿੱਚ ਕਰਨ ਜਾ ਰਹੀ ਹੈ. - Next.js ਚਿੱਤਰ ਦਸਤਾਵੇਜ਼

ਇਸ ਪੋਸਟ ਵਿੱਚ, ਅਸੀਂ ਇਸ ਨਵੇਂ ਹਿੱਸੇ ਨੂੰ ਐਕਸ਼ਨ ਵਿੱਚ ਵੇਖਣ ਲਈ ਇਸਦੀ ਪੜਚੋਲ ਅਤੇ ਖੇਡਣ ਜਾ ਰਹੇ ਹਾਂ.



ਸ਼ੁਰੂ ਕਰਨਾ

ਅਸੀਂ | _+_ | ਦੀ ਵਰਤੋਂ ਕਰਾਂਗੇ ਪ੍ਰੋਜੈਕਟ ਬਣਾਉ:

create-next-app

ਇੱਕ ਚਿੱਤਰ ਚੁਣਨਾ

ਇਸ ਵਿਸ਼ੇਸ਼ ਖੋਜ ਲਈ, ਮੈਂ ਗਿਆ ਅਨਸਪਲੈਸ਼ ਅਤੇ ਮੇਰੇ ਸੁਆਦ ਲਈ ਇੱਕ ਚਿੱਤਰ ਚੁਣਿਆ.

ਇਸ ਮਾਮਲੇ ਵਿੱਚ, ਮੈਂ ਨਾਲ ਗਿਆ ਫਲੋਰੀਅਨ ਓਲੀਵੋ ਦੀ ਜੈਲੀਫਿਸ਼ ਚਿੱਤਰ .

ਬਾਅਦ ਵਿੱਚ, ਮੈਂ onlineਨਲਾਈਨ ਟੂਲ ਤੇ ਗਿਆ ਸਕੁਸ਼ ਚਿੱਤਰ ਦਾ ਆਕਾਰ 800x1199 ਤੇ ਬਦਲਣ ਅਤੇ ਇਸ ਨੂੰ ਮੁ basicਲੀਆਂ ਸੈਟਿੰਗਾਂ ਨਾਲ ਅਨੁਕੂਲ ਬਣਾਉਣ ਲਈ.

ਇਸਨੇ ਚਿੱਤਰ ਦਾ ਇੱਕ ਅਨੁਕੂਲ ਰੂਪ 78KB ਤੇ ਬਣਾਇਆ, ਜਦੋਂ ਕਿ ਅਸਲ, ਅਨੌਪਟੀਮਾਈਜ਼ਡ ਸੰਸਕਰਣ 4.5MB ਸੀ.

ਦੋਵਾਂ ਸੰਸਕਰਣਾਂ ਵਿੱਚ ਪਾਉਣ ਲਈ ਮੁੱਖ ਪੰਨੇ ਨੂੰ ਅਪਡੇਟ ਕੀਤਾ ਜਾ ਰਿਹਾ ਹੈ

ਉਦਾਹਰਣ ਤੋਂ ਬਾਅਦ ਜੋ ਮੈਂ ਨੈਕਸਟ.ਜੇਐਸ ਉਦਾਹਰਣਾਂ ਰੈਪੋ ਵਿੱਚ ਵੇਖਿਆ, ਮੈਂ ਇਸਨੂੰ ਅਨੁਕੂਲ ਅਤੇ ਗੈਰ -ਅਨੁਕੂਲ ਚਿੱਤਰ ਦੋਵਾਂ ਨੂੰ ਦਿਖਾਉਣ ਲਈ ਬਦਲਿਆ:

| _+_ | ਪ੍ਰੋਜੈਕਟ ਦੇ ਪਹਿਲੇ ਲੋਡ ਦੇ ਦੌਰਾਨ ਟੈਬ ਖੁੱਲਦਾ ਹੈ, ਇਸ ਲਈ ਸਮਾਂ ਖੁਦ ਸੰਪੂਰਨ ਨਹੀਂ ਹੈ ਪਰ ਇੱਥੇ ਪ੍ਰੋਜੈਕਟ ਦੀ ਮੁੜ-ਤੈਨਾਤੀ ਦਾ ਨੈਟਵਰਕ ਟੈਬ ਜੋ ਮੈਂ ਬਾਅਦ ਵਿੱਚ ਆਪਣੇ ਪਹਿਲੇ ਲੋਡ ਦੇ ਸਮਾਨ ਅਨੁਭਵ ਨੂੰ ਦਰਸਾਉਣ ਲਈ ਕੀਤਾ:
 
 
.
  
 
  ਨੋਟ: ਤੁਸੀਂ ਵੇਖ ਸਕਦੇ ਹੋ ਕਿ ਇੱਥੇ ਚਿੱਤਰ 4.5MB Original.jpeg 'ਤੋਂ ਅਨੁਕੂਲ ਬਣਾਇਆ ਗਿਆ ਹੈ'>   
medium.com
Next.js 10 ਦੇ ਨਾਲ ਨਵੇਂ ਚਿੱਤਰ ਹਿੱਸੇ ਦੀ ਖੋਜ ਕਰਨਾ
Next.js 10 ਨੇ ਇੱਕ ਅਨੁਕੂਲ ਚਿੱਤਰ ਭਾਗ ਜਾਰੀ ਕੀਤਾ ਜੋ ਅਨੁਕੂਲ ਬਣਾਉਂਦਾ ਹੈ ਕਿ Next.js ਵੈਬਸਾਈਟਾਂ ਤੇ ਚਿੱਤਰ ਕਿਵੇਂ ਲੋਡ ਹੁੰਦੇ ਹਨ. ਇਸ ਨੂੰ ਕਾਰਜ ਵਿੱਚ ਵੇਖਣ ਲਈ ਅਸੀਂ ਇਸ ਨਵੇਂ ਹਿੱਸੇ ਦੇ ਨਾਲ ਖੋਜ ਅਤੇ ਖੇਡਣ ਜਾ ਰਹੇ ਹਾਂ.
  
									   
ਇਹ ਵੀ ਵੇਖੋ:

ਨਵੀਆਂ ਚੀਜ਼ਾਂ

ਸਭ ਤੋਂ ਵੱਧ ਪੜ੍ਹਨਯੋਗ

ਸੰਪਾਦਕ ਦੇ ਚੋਣ