fix(optimizer): limit bundled file name length to 170 characters (#14561

)

Co-authored-by: patak <matias.capeletto@gmail.com>

packages/vite/src/node/__tests__/utils.spec.ts

@@ -4,6 +4,7 @@ import { describe, expect, test } from 'vitest'
 import {
   asyncFlatten,
   bareImportRE,
+  flattenId,
   getHash,
   getLocalhostAddressIfDiffersFromDNS,
   injectQuery,
@@ -260,3 +261,22 @@ describe('processSrcSetSync', () => {
     ).toBe('/base/nested/asset.png 1x, /base/nested/asset.png 2x')
   })
 })
+
+describe('flattenId', () => {
+  test('should limit id to 170 characters', () => {
+    const tenChars = '1234567890'
+    let id = ''
+
+    for (let i = 0; i < 17; i++) {
+      id += tenChars
+    }
+    expect(id).toHaveLength(170)
+
+    const result = flattenId(id)
+    expect(result).toHaveLength(170)
+
+    id += tenChars
+    const result2 = flattenId(id)
+    expect(result2).toHaveLength(170)
+  })
+})

packages/vite/src/node/utils.ts

@@ -78,12 +78,29 @@ const replaceSlashOrColonRE = /[/:]/g
 const replaceDotRE = /\./g
 const replaceNestedIdRE = /(\s*>\s*)/g
 const replaceHashRE = /#/g
-export const flattenId = (id: string): string =>
-  id
-    .replace(replaceSlashOrColonRE, '_')
-    .replace(replaceDotRE, '__')
-    .replace(replaceNestedIdRE, '___')
-    .replace(replaceHashRE, '____')
+export const flattenId = (id: string): string => {
+  const flatId = limitFlattenIdLength(
+    id
+      .replace(replaceSlashOrColonRE, '_')
+      .replace(replaceDotRE, '__')
+      .replace(replaceNestedIdRE, '___')
+      .replace(replaceHashRE, '____'),
+  )
+  return flatId
+}
+
+const FLATTEN_ID_HASH_LENGTH = 8
+const FLATTEN_ID_MAX_FILE_LENGTH = 170
+
+const limitFlattenIdLength = (
+  id: string,
+  limit: number = FLATTEN_ID_MAX_FILE_LENGTH,
+): string => {
+  if (id.length <= limit) {
+    return id
+  }
+  return id.slice(0, limit - (FLATTEN_ID_HASH_LENGTH + 1)) + '_' + getHash(id)
+}
 
 export const normalizeId = (id: string): string =>
   id.replace(replaceNestedIdRE, ' > ')

playground/optimize-deps/__tests__/optimize-deps.spec.ts

@@ -238,6 +238,24 @@ test.runIf(isBuild)('no missing deps during build', async () => {
   })
 })
 
+test('name file limit is 170 characters', async () => {
+  if (isServe) {
+    const response = page.waitForResponse(
+      /@vitejs_longfilename_\w+_[a-zA-Z\d]+\.js\?v=[a-zA-Z\d]+/,
+    )
+    await page.goto(viteTestUrl)
+    const content = await response
+
+    const fromUrl = content.url()
+    const stripFolderPart = fromUrl.split('/').at(-1)
+    const onlyTheFilePart = stripFolderPart.split('.')[0]
+    expect(onlyTheFilePart).toHaveLength(170)
+
+    const text = await content.text()
+    expect(text).toMatch(/import\s+("[^"]+")/)
+  }
+})
+
 describe.runIf(isServe)('optimizeDeps config', () => {
   test('supports include glob syntax', () => {
     const metadata = readDepOptimizationMetadata()
@@ -256,3 +274,7 @@ describe.runIf(isServe)('optimizeDeps config', () => {
     ])
   })
 })
+
+test('long file name should work', async () => {
+  expect(await page.textContent('.long-file-name')).toMatch(`hello world`)
+})

playground/optimize-deps/index.html

@@ -105,6 +105,11 @@ <h2>Pre bundle css require</h2>
 <h2>Pre bundle css modules require</h2>
 <div class="css-module-require">This should be red</div>
 
+<h2>Long file name import works</h2>
+<div class="long-file-name"></div>
+
+<script type="module" src="./long-file-name.js"></script>
+
 <script>
   function text(el, text) {
     document.querySelector(el).textContent = text

playground/optimize-deps/long-file-name.js

@@ -0,0 +1,4 @@
+import test from '@vitejs/longfilename/aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa/aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa'
+
+const main = document.querySelector('.long-file-name')
+main.innerHTML = test ?? 'failed to import'

playground/optimize-deps/longfilename/aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa/aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa.js

@@ -0,0 +1,3 @@
+const test = 'hello world'
+
+export default test

playground/optimize-deps/longfilename/package.json

@@ -0,0 +1,7 @@
+{
+  "name": "@vitejs/longfilename",
+  "private": true,
+  "version": "0.0.0",
+  "main": "aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa/aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa.js",
+  "type": "module"
+}

playground/optimize-deps/package.json

@@ -12,6 +12,7 @@
   "dependencies": {
     "axios": "^1.5.1",
     "clipboard": "^2.0.11",
+    "@vitejs/longfilename": "file:./longfilename",
     "@vitejs/test-dep-alias-using-absolute-path": "file:./dep-alias-using-absolute-path",
     "@vitejs/test-dep-cjs-browser-field-bare": "file:./dep-cjs-browser-field-bare",
     "@vitejs/test-dep-cjs-compiled-from-cjs": "file:./dep-cjs-compiled-from-cjs",