diff --git a/packages/vite/src/node/utils.ts b/packages/vite/src/node/utils.ts
index 8d52dc2bfe1e53..4840cc413eb378 100644
--- a/packages/vite/src/node/utils.ts
+++ b/packages/vite/src/node/utils.ts
@@ -37,7 +37,10 @@ export function unwrapId(id: string): string {
 }
 
 export const flattenId = (id: string): string =>
-  id.replace(/(\s*>\s*)/g, '__').replace(/[\/\.:]/g, '_')
+  id
+    .replace(/[\/:]/g, '_')
+    .replace(/[\.]/g, '__')
+    .replace(/(\s*>\s*)/g, '___')
 
 export const normalizeId = (id: string): string =>
   id.replace(/(\s*>\s*)/g, ' > ')
diff --git a/playground/optimize-deps/__tests__/optimize-deps.spec.ts b/playground/optimize-deps/__tests__/optimize-deps.spec.ts
index bf4fee61e4e74c..cc712fbbdc4a09 100644
--- a/playground/optimize-deps/__tests__/optimize-deps.spec.ts
+++ b/playground/optimize-deps/__tests__/optimize-deps.spec.ts
@@ -121,6 +121,11 @@ test('variable names are reused in different scripts', async () => {
   expect(await page.textContent('.reused-variable-names')).toBe('reused')
 })
 
+test('flatten id should generate correctly', async () => {
+  expect(await page.textContent('.clonedeep-slash')).toBe('clonedeep-slash')
+  expect(await page.textContent('.clonedeep-dot')).toBe('clonedeep-dot')
+})
+
 test.runIf(isServe)('error on builtin modules usage', () => {
   expect(browserLogs).toEqual(
     expect.arrayContaining([
diff --git a/playground/optimize-deps/index.html b/playground/optimize-deps/index.html
index 39d76fd83d0609..b96620902c1eca 100644
--- a/playground/optimize-deps/index.html
+++ b/playground/optimize-deps/index.html
@@ -74,6 +74,10 @@ <h2>Alias with colon</h2>
 <h2>Reused variable names</h2>
 <div>This should show reused: <span class="reused-variable-names"></span></div>
 
+<h2>Flatten Id</h2>
+<div class="clonedeep-slash"></div>
+<div class="clonedeep-dot"></div>
+
 <script>
   function text(el, text) {
     document.querySelector(el).textContent = text
@@ -169,3 +173,11 @@ <h2>Reused variable names</h2>
     read()
   }
 </script>
+
+<script type="module">
+  import cloneDeepSlash from 'lodash/cloneDeep'
+  import cloneDeepDot from 'lodash.clonedeep'
+
+  text('.clonedeep-slash', cloneDeepSlash({ name: 'clonedeep-slash' }).name)
+  text('.clonedeep-dot', cloneDeepDot({ name: 'clonedeep-dot' }).name)
+</script>
diff --git a/playground/optimize-deps/package.json b/playground/optimize-deps/package.json
index 4673bbf16d9cc5..d8302ff0e23cc7 100644
--- a/playground/optimize-deps/package.json
+++ b/playground/optimize-deps/package.json
@@ -31,7 +31,9 @@
     "resolve-linked": "workspace:0.0.0",
     "url": "^0.11.0",
     "vue": "^3.2.37",
-    "vuex": "^4.0.2"
+    "vuex": "^4.0.2",
+    "lodash": "^4.17.21",
+    "lodash.clonedeep": "^4.5.0"
   },
   "devDependencies": {
     "@vitejs/plugin-vue": "workspace:*"
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 60c13ef3e463de..f57f9baab70ffa 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -586,7 +586,9 @@ importers:
       dep-with-builtin-module-cjs: file:./dep-with-builtin-module-cjs
       dep-with-builtin-module-esm: file:./dep-with-builtin-module-esm
       dep-with-dynamic-import: file:./dep-with-dynamic-import
+      lodash: ^4.17.21
       lodash-es: ^4.17.21
+      lodash.clonedeep: ^4.5.0
       nested-exclude: file:./nested-exclude
       phoenix: ^1.6.10
       react: ^17.0.2
@@ -610,7 +612,9 @@ importers:
       dep-with-builtin-module-cjs: file:playground/optimize-deps/dep-with-builtin-module-cjs
       dep-with-builtin-module-esm: file:playground/optimize-deps/dep-with-builtin-module-esm
       dep-with-dynamic-import: file:playground/optimize-deps/dep-with-dynamic-import
+      lodash: 4.17.21
       lodash-es: 4.17.21
+      lodash.clonedeep: 4.5.0
       nested-exclude: file:playground/optimize-deps/nested-exclude
       phoenix: 1.6.10
       react: 17.0.2
@@ -5849,6 +5853,10 @@ packages:
     resolution: {integrity: sha1-soqmKIorn8ZRA1x3EfZathkDMaY=}
     dev: true
 
+  /lodash.clonedeep/4.5.0:
+    resolution: {integrity: sha512-H5ZhCF25riFd9uB5UCkVKo61m3S/xZk1x4wA6yp/L3RFP6Z/eHH1ymQcGLo7J3GMPfm0V/7m1tryHuGVxpqEBQ==}
+    dev: false
+
   /lodash.defaults/4.2.0:
     resolution: {integrity: sha1-0JF4cW/+pN3p5ft7N/bwgCJ0WAw=}
     dev: true