Skip to content

Commit

Permalink
feat: align default chunk and asset file names with rollup (#10927)
Browse files Browse the repository at this point in the history
  • Loading branch information
patak-dev committed Nov 17, 2022
1 parent 9f54c6a commit cc2adb3
Show file tree
Hide file tree
Showing 34 changed files with 133 additions and 139 deletions.
2 changes: 1 addition & 1 deletion package.json
Original file line number Diff line number Diff line change
Expand Up @@ -89,7 +89,7 @@
"typescript": "^4.6.4",
"unbuild": "^0.9.4",
"vite": "workspace:*",
"vitepress": "^1.0.0-alpha.28",
"vitepress": "^1.0.0-alpha.29",
"vitest": "^0.25.1",
"vue": "^3.2.45"
},
Expand Down
2 changes: 1 addition & 1 deletion packages/plugin-legacy/src/index.ts
Original file line number Diff line number Diff line change
Expand Up @@ -298,7 +298,7 @@ function viteLegacyPlugin(options: Options = {}): Plugin[] {
| string
| ((chunkInfo: PreRenderedChunk) => string)
| undefined,
defaultFileName = '[name]-legacy.[hash].js'
defaultFileName = '[name]-legacy-[hash].js'
): string | ((chunkInfo: PreRenderedChunk) => string) => {
if (!fileNames) {
return path.posix.join(config.build.assetsDir, defaultFileName)
Expand Down
8 changes: 4 additions & 4 deletions packages/vite/src/node/build.ts
Original file line number Diff line number Diff line change
Expand Up @@ -576,13 +576,13 @@ async function doBuild(
: libOptions
? ({ name }) =>
resolveLibFilename(libOptions, format, name, config.root, jsExt)
: path.posix.join(options.assetsDir, `[name].[hash].${jsExt}`),
: path.posix.join(options.assetsDir, `[name]-[hash].${jsExt}`),
chunkFileNames: libOptions
? `[name].[hash].${jsExt}`
: path.posix.join(options.assetsDir, `[name].[hash].${jsExt}`),
? `[name]-[hash].${jsExt}`
: path.posix.join(options.assetsDir, `[name]-[hash].${jsExt}`),
assetFileNames: libOptions
? `[name].[ext]`
: path.posix.join(options.assetsDir, `[name].[hash].[ext]`),
: path.posix.join(options.assetsDir, `[name]-[hash].[ext]`),
inlineDynamicImports:
output.format === 'umd' ||
output.format === 'iife' ||
Expand Down
6 changes: 3 additions & 3 deletions packages/vite/src/node/plugins/worker.ts
Original file line number Diff line number Diff line change
Expand Up @@ -79,15 +79,15 @@ export async function bundleWorkerEntry(
} = await bundle.generate({
entryFileNames: path.posix.join(
config.build.assetsDir,
'[name].[hash].js'
'[name]-[hash].js'
),
chunkFileNames: path.posix.join(
config.build.assetsDir,
'[name].[hash].js'
'[name]-[hash].js'
),
assetFileNames: path.posix.join(
config.build.assetsDir,
'[name].[hash].[ext]'
'[name]-[hash].[ext]'
),
...workerConfig,
format,
Expand Down
8 changes: 4 additions & 4 deletions playground/assets/__tests__/assets.spec.ts
Original file line number Diff line number Diff line change
Expand Up @@ -19,7 +19,7 @@ import {
} from '~utils'

const assetMatch = isBuild
? /\/foo\/assets\/asset\.\w{8}\.png/
? /\/foo\/assets\/asset-\w{8}\.png/
: '/foo/nested/asset.png'

const iconMatch = `/foo/icon.png`
Expand Down Expand Up @@ -209,8 +209,8 @@ describe('image', () => {
srcset.split(', ').forEach((s) => {
expect(s).toMatch(
isBuild
? /\/foo\/assets\/asset\.\w{8}\.png \dx/
: /\/foo\/nested\/asset\.png \dx/
? /\/foo\/assets\/asset-\w{8}\.png \dx/
: /\/foo\/nested\/asset.png \dx/
)
})
})
Expand Down Expand Up @@ -338,7 +338,7 @@ describe.runIf(isBuild)('css and assets in css in build watch', () => {
test('css will not be lost and css does not contain undefined', async () => {
editFile('index.html', (code) => code.replace('Assets', 'assets'), true)
await notifyRebuildComplete(watcher)
const cssFile = findAssetFile(/index\.\w+\.css$/, 'foo')
const cssFile = findAssetFile(/index-\w+\.css$/, 'foo')
expect(cssFile).not.toBe('')
expect(cssFile).not.toMatch(/undefined/)
})
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,7 @@ import {
} from '~utils'

const absoluteAssetMatch = isBuild
? /http.*\/other-assets\/asset\.\w{8}\.png/
? /http.*\/other-assets\/asset-\w{8}\.png/
: '/nested/asset.png'

// Asset URLs in CSS are relative to the same dir, the computed
Expand All @@ -20,7 +20,7 @@ const cssBgAssetMatch = absoluteAssetMatch
const iconMatch = `/icon.png`

const absoluteIconMatch = isBuild
? /http.*\/icon\.\w{8}\.png/
? /http.*\/icon-\w{8}\.png/
: '/nested/icon.png'

const absolutePublicIconMatch = isBuild ? /http.*\/icon\.png/ : '/icon.png'
Expand Down Expand Up @@ -143,7 +143,7 @@ describe.runIf(isBuild)('index.css URLs', () => {
})

test('relative asset URL', () => {
expect(css).toMatch(`./asset.`)
expect(css).toMatch(`./asset-`)
})

test('preserve postfix query/hash', () => {
Expand All @@ -158,7 +158,7 @@ describe('image', () => {
srcset.split(', ').forEach((s) => {
expect(s).toMatch(
isBuild
? /other-assets\/asset\.\w{8}\.png \dx/
? /other-assets\/asset-\w{8}\.png \dx/
: /\.\/nested\/asset\.png \dx/
)
})
Expand Down Expand Up @@ -191,14 +191,14 @@ test('?raw import', async () => {

test('?url import', async () => {
expect(await page.textContent('.url')).toMatch(
isBuild ? /http.*\/other-assets\/foo\.\w{8}\.js/ : `/foo.js`
isBuild ? /http.*\/other-assets\/foo-\w{8}\.js/ : `/foo.js`
)
})

test('?url import on css', async () => {
const txt = await page.textContent('.url-css')
expect(txt).toMatch(
isBuild ? /http.*\/other-assets\/icons\.\w{8}\.css/ : '/css/icons.css'
isBuild ? /http.*\/other-assets\/icons-\w{8}\.css/ : '/css/icons.css'
)
})

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,7 @@ import {
} from '~utils'

const absoluteAssetMatch = isBuild
? /\/other-assets\/asset\.\w{8}\.png/
? /\/other-assets\/asset-\w{8}\.png/
: '/nested/asset.png'

// Asset URLs in CSS are relative to the same dir, the computed
Expand All @@ -19,7 +19,7 @@ const cssBgAssetMatch = absoluteAssetMatch
const iconMatch = `/icon.png`

const absoluteIconMatch = isBuild
? /\/other-assets\/icon\.\w{8}\.png/
? /\/other-assets\/icon-\w{8}\.png/
: '/nested/icon.png'

const absolutePublicIconMatch = isBuild ? /\/icon\.png/ : '/icon.png'
Expand Down Expand Up @@ -137,11 +137,11 @@ describe('css url() references', () => {
describe.runIf(isBuild)('index.css URLs', () => {
let css: string
beforeAll(() => {
css = findAssetFile(/index.*\.css$/, '', 'other-assets')
css = findAssetFile(/index-\w{8}\.css$/, '', 'other-assets')
})

test('relative asset URL', () => {
expect(css).toMatch(`./asset.`)
expect(css).toMatch(`./asset-`)
})

test('preserve postfix query/hash', () => {
Expand All @@ -156,7 +156,7 @@ describe('image', () => {
srcset.split(', ').forEach((s) => {
expect(s).toMatch(
isBuild
? /other-assets\/asset\.\w{8}\.png \dx/
? /other-assets\/asset-\w{8}\.png \dx/
: /\.\/nested\/asset\.png \dx/
)
})
Expand Down Expand Up @@ -189,14 +189,14 @@ test('?raw import', async () => {

test('?url import', async () => {
expect(await page.textContent('.url')).toMatch(
isBuild ? /\/other-assets\/foo\.\w{8}\.js/ : `/foo.js`
isBuild ? /\/other-assets\/foo-\w{8}\.js/ : `/foo.js`
)
})

test('?url import on css', async () => {
const txt = await page.textContent('.url-css')
expect(txt).toMatch(
isBuild ? /\/other-assets\/icons\.\w{8}\.css/ : '/css/icons.css'
isBuild ? /\/other-assets\/icons-\w{8}\.css/ : '/css/icons.css'
)
})

Expand Down
4 changes: 2 additions & 2 deletions playground/assets/vite.config-relative-base.js
Original file line number Diff line number Diff line change
Expand Up @@ -15,8 +15,8 @@ module.exports = {
rollupOptions: {
output: {
entryFileNames: 'entries/[name].js',
chunkFileNames: 'chunks/[name].[hash].js',
assetFileNames: 'other-assets/[name].[hash][extname]'
chunkFileNames: 'chunks/[name]-[hash].js',
assetFileNames: 'other-assets/[name]-[hash][extname]'
}
}
},
Expand Down
4 changes: 2 additions & 2 deletions playground/assets/vite.config-runtime-base.js
Original file line number Diff line number Diff line change
Expand Up @@ -22,8 +22,8 @@ module.exports = {
rollupOptions: {
output: {
entryFileNames: 'entries/[name].js',
chunkFileNames: 'chunks/[name].[hash].js',
assetFileNames: 'other-assets/[name].[hash][extname]'
chunkFileNames: 'chunks/[name]-[hash].js',
assetFileNames: 'other-assets/[name]-[hash][extname]'
}
}
},
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,7 @@ import {
} from '~utils'

const outerAssetMatch = isBuild
? /\/dev\/assets\/logo\.\w{8}\.png/
? /\/dev\/assets\/logo-\w{8}\.png/
: /\/dev\/@fs\/.+?\/images\/logo\.png/

test('should have no 404s', () => {
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -66,32 +66,32 @@ baseOptions.forEach(({ base, label }) => {
expect(await getColor('.css-dynamic-import')).toBe('green')
expect(await getLinks()).toEqual([
{
pathname: expect.stringMatching(/^\/assets\/index\..+\.css$/),
pathname: expect.stringMatching(/^\/assets\/index-.+\.css$/),
rel: 'stylesheet',
as: ''
},
{
pathname: expect.stringMatching(/^\/assets\/dynamic\..+\.css$/),
pathname: expect.stringMatching(/^\/assets\/dynamic-.+\.css$/),
rel: 'preload',
as: 'style'
},
{
pathname: expect.stringMatching(/^\/assets\/dynamic\..+\.js$/),
pathname: expect.stringMatching(/^\/assets\/dynamic-.+\.js$/),
rel: 'modulepreload',
as: 'script'
},
{
pathname: expect.stringMatching(/^\/assets\/dynamic\..+\.css$/),
pathname: expect.stringMatching(/^\/assets\/dynamic-.+\.css$/),
rel: 'stylesheet',
as: ''
},
{
pathname: expect.stringMatching(/^\/assets\/static\..+\.js$/),
pathname: expect.stringMatching(/^\/assets\/static-.+\.js$/),
rel: 'modulepreload',
as: 'script'
},
{
pathname: expect.stringMatching(/^\/assets\/index\..+\.js$/),
pathname: expect.stringMatching(/^\/assets\/index-.+\.js$/),
rel: 'modulepreload',
as: 'script'
}
Expand Down
16 changes: 8 additions & 8 deletions playground/css/__tests__/css.spec.ts
Original file line number Diff line number Diff line change
Expand Up @@ -64,7 +64,7 @@ test('css import from js', async () => {
test('css import asset with space', async () => {
const importedWithSpace = await page.$('.import-with-space')

expect(await getBg(importedWithSpace)).toMatch(/.*ok\..*png/)
expect(await getBg(importedWithSpace)).toMatch(/.*\/ok.*\.png/)
})

test('postcss config', async () => {
Expand All @@ -90,7 +90,7 @@ test('sass', async () => {
isBuild ? /base64/ : '/nested/icon.png'
)
expect(await getBg(urlStartsWithVariable)).toMatch(
isBuild ? /ok\.\w+\.png/ : `${viteTestUrl}/ok.png`
isBuild ? /ok-\w+\.png/ : `${viteTestUrl}/ok.png`
)
expect(await getColor(partialImport)).toBe('orchid')

Expand Down Expand Up @@ -124,7 +124,7 @@ test('less', async () => {
isBuild ? /base64/ : '/nested/icon.png'
)
expect(await getBg(urlStartsWithVariable)).toMatch(
isBuild ? /ok\.\w+\.png/ : `${viteTestUrl}/ok.png`
isBuild ? /ok-\w+\.png/ : `${viteTestUrl}/ok.png`
)

editFile('less.less', (code) => code.replace('@color: blue', '@color: red'))
Expand Down Expand Up @@ -297,8 +297,8 @@ test('async chunk', async () => {
if (isBuild) {
// assert that the css is extracted into its own file instead of in the
// main css file
expect(findAssetFile(/index\.\w+\.css$/)).not.toMatch('teal')
expect(findAssetFile(/async\.\w+\.css$/)).toMatch('.async{color:teal}')
expect(findAssetFile(/index-\w+\.css$/)).not.toMatch('teal')
expect(findAssetFile(/async-\w+\.css$/)).toMatch('.async{color:teal}')
} else {
// test hmr
editFile('async.css', (code) => code.replace('color: teal', 'color: blue'))
Expand All @@ -316,8 +316,8 @@ test('treeshaken async chunk', async () => {
).toBeNull()
// assert that the css is not present anywhere
expect(findAssetFile(/\.css$/)).not.toMatch('plum')
expect(findAssetFile(/index\.\w+\.js$/)).not.toMatch('.async{color:plum}')
expect(findAssetFile(/async\.\w+\.js$/)).not.toMatch('.async{color:plum}')
expect(findAssetFile(/index-\w+\.js$/)).not.toMatch('.async{color:plum}')
expect(findAssetFile(/async-\w+\.js$/)).not.toMatch('.async{color:plum}')
// should have no chunk!
expect(findAssetFile(/async-treeshaken/)).toBe('')
} else {
Expand Down Expand Up @@ -416,7 +416,7 @@ test('minify css', async () => {
}

// should keep the rgba() syntax
const cssFile = findAssetFile(/index\.\w+\.css$/)
const cssFile = findAssetFile(/index-\w+\.css$/)
expect(cssFile).toMatch('rgba(')
expect(cssFile).not.toMatch('#ffff00b3')
})
Expand Down
4 changes: 2 additions & 2 deletions playground/css/vite.config-relative-base.js
Original file line number Diff line number Diff line change
Expand Up @@ -15,8 +15,8 @@ module.exports = {
rollupOptions: {
output: {
entryFileNames: 'entries/[name].js',
chunkFileNames: 'chunks/[name].[hash].js',
assetFileNames: 'other-assets/[name].[hash][extname]'
chunkFileNames: 'chunks/[name]-[hash].js',
assetFileNames: 'other-assets/[name]-[hash][extname]'
}
}
},
Expand Down
2 changes: 1 addition & 1 deletion playground/glob-import/__tests__/glob-import.spec.ts
Original file line number Diff line number Diff line change
Expand Up @@ -185,7 +185,7 @@ test('tree-shake eager css', async () => {
)

if (isBuild) {
const content = findAssetFile(/index\.\w+\.js/)
const content = findAssetFile(/index-\w+\.js/)
expect(content).not.toMatch('.tree-shake-eager-css')
}
})
Expand Down
4 changes: 2 additions & 2 deletions playground/legacy/__tests__/legacy.spec.ts
Original file line number Diff line number Diff line change
Expand Up @@ -76,7 +76,7 @@ test('should load dynamic import with css', async () => {

test('asset url', async () => {
expect(await page.textContent('#asset-path')).toMatch(
isBuild ? /\/assets\/vite\.\w+\.svg/ : '/vite.svg'
isBuild ? /\/assets\/vite-\w+\.svg/ : '/vite.svg'
)
})

Expand Down Expand Up @@ -116,6 +116,6 @@ describe.runIf(isBuild)('build', () => {

test('includes structuredClone polyfill which is supported after core-js v3', () => {
expect(findAssetFile(/polyfills-legacy/)).toMatch('"structuredClone"')
expect(findAssetFile(/polyfills\./)).toMatch('"structuredClone"')
expect(findAssetFile(/polyfills-\w{8}\./)).toMatch('"structuredClone"')
})
})
4 changes: 2 additions & 2 deletions playground/legacy/vite.config-multiple-output.js
Original file line number Diff line number Diff line change
Expand Up @@ -10,14 +10,14 @@ export default defineConfig({
output: [
{
assetFileNames() {
return 'assets/subdir/[name].[hash][extname]'
return 'assets/subdir/[name]-[hash][extname]'
},
entryFileNames: `assets/subdir/[name].js`,
chunkFileNames: `assets/subdir/[name].js`
},
{
assetFileNames() {
return 'assets/subdir/[name].[hash][extname]'
return 'assets/subdir/[name]-[hash][extname]'
},
entryFileNames: `assets/anotherSubdir/[name].js`,
chunkFileNames: `assets/anotherSubdir/[name].js`
Expand Down
2 changes: 1 addition & 1 deletion playground/lib/__tests__/lib.spec.ts
Original file line number Diff line number Diff line change
Expand Up @@ -36,7 +36,7 @@ describe.runIf(isBuild)('build', () => {
expect(code).not.toMatch('__vitePreload')

// Test that library chunks are hashed
expect(code).toMatch(/await import\("\.\/message.[a-z\d]{8}.mjs"\)/)
expect(code).toMatch(/await import\("\.\/message-[a-z\d]{8}.mjs"\)/)
})

test('@import hoist', async () => {
Expand Down
4 changes: 2 additions & 2 deletions playground/preload/__tests__/preload.spec.ts
Original file line number Diff line number Diff line change
Expand Up @@ -17,10 +17,10 @@ describe.runIf(isBuild)('build', () => {
await page.goto(viteTestUrl + '/#/hello')
const html = await page.content()
expect(html).toMatch(
/link rel="modulepreload".*?href=".*?\/assets\/Hello\.\w{8}\.js"/
/link rel="modulepreload".*?href=".*?\/assets\/Hello-\w{8}\.js"/
)
expect(html).toMatch(
/link rel="stylesheet".*?href=".*?\/assets\/Hello\.\w{8}\.css"/
/link rel="stylesheet".*?href=".*?\/assets\/Hello-\w{8}\.css"/
)
})
})

0 comments on commit cc2adb3

Please sign in to comment.