Don't emit duplicate image files (#26843)
fixes #26607 This change makes it so the image loader plugin only emits a file while processing an image import for the client. The final generated image URL was already the same in SSR and CSR anyway, so this change doesn't have any functional impact. I also changed the name of the static page in the image component tests, since it was causing some conflicts with the static assets folder.
This commit is contained in:
parent
9039afe75b
commit
277061943a
5 changed files with 18 additions and 4 deletions
|
@ -1032,6 +1032,9 @@ export default async function getBaseWebpackConfig(
|
|||
loader: 'next-image-loader',
|
||||
issuer: { not: regexLikeCss },
|
||||
dependency: { not: ['url'] },
|
||||
options: {
|
||||
isServer,
|
||||
},
|
||||
},
|
||||
]
|
||||
: []),
|
||||
|
|
|
@ -7,6 +7,7 @@ const BLUR_QUALITY = 70
|
|||
const VALID_BLUR_EXT = ['jpeg', 'png', 'webp']
|
||||
|
||||
async function nextImageLoader(content) {
|
||||
const isServer = loaderUtils.getOptions(this).isServer
|
||||
const context = this.rootContext
|
||||
const opts = { context, content }
|
||||
const interpolatedName = loaderUtils.interpolateName(
|
||||
|
@ -46,7 +47,9 @@ async function nextImageLoader(content) {
|
|||
blurDataURL,
|
||||
})
|
||||
|
||||
if (!isServer) {
|
||||
this.emitFile(interpolatedName, content, null)
|
||||
}
|
||||
|
||||
return `${'export default '} ${stringifiedData};`
|
||||
}
|
||||
|
|
|
@ -15,6 +15,7 @@ import {
|
|||
} from 'next-test-utils'
|
||||
import webdriver from 'next-webdriver'
|
||||
import { join } from 'path'
|
||||
import { existsSync } from 'fs'
|
||||
|
||||
jest.setTimeout(1000 * 80)
|
||||
|
||||
|
@ -555,6 +556,13 @@ function runTests(mode) {
|
|||
/Image with src (.*)jpg(.*) is smaller than 40x40. Consider removing(.*)/gm
|
||||
)
|
||||
})
|
||||
} else {
|
||||
//server-only tests
|
||||
it('should not create an image folder in server/chunks', async () => {
|
||||
expect(
|
||||
existsSync(join(appDir, '.next/server/chunks/static/image'))
|
||||
).toBeFalsy()
|
||||
})
|
||||
}
|
||||
|
||||
it('should correctly ignore prose styles', async () => {
|
||||
|
|
|
@ -18,7 +18,7 @@ let app
|
|||
let browser
|
||||
let html
|
||||
|
||||
const indexPage = new File(join(appDir, 'pages/static.js'))
|
||||
const indexPage = new File(join(appDir, 'pages/static-img.js'))
|
||||
|
||||
const runTests = () => {
|
||||
it('Should allow an image with a static src to omit height and width', async () => {
|
||||
|
@ -97,8 +97,8 @@ describe('Static Image Component Tests', () => {
|
|||
await nextBuild(appDir)
|
||||
appPort = await findPort()
|
||||
app = await nextStart(appDir, appPort)
|
||||
html = await renderViaHTTP(appPort, '/static')
|
||||
browser = await webdriver(appPort, '/static')
|
||||
html = await renderViaHTTP(appPort, '/static-img')
|
||||
browser = await webdriver(appPort, '/static-img')
|
||||
})
|
||||
afterAll(() => {
|
||||
killApp(app)
|
||||
|
|
Loading…
Reference in a new issue