From 33f96718dc5d827612c300fb6d0258f1c040f5a1 Mon Sep 17 00:00:00 2001
From: Bjorn Lu <bjornlu.dev@gmail.com>
Date: Mon, 21 Feb 2022 00:01:18 +0800
Subject: [PATCH 01/50] docs: update pre-bundling guide (#7008)

---
 docs/guide/dep-pre-bundling.md | 36 +++++++++++++++++++++++++---------
 1 file changed, 27 insertions(+), 9 deletions(-)

diff --git a/docs/guide/dep-pre-bundling.md b/docs/guide/dep-pre-bundling.md
index 150584b1a6521c..a72e06e6aff944 100644
--- a/docs/guide/dep-pre-bundling.md
+++ b/docs/guide/dep-pre-bundling.md
@@ -3,10 +3,10 @@
 When you run `vite` for the first time, you may notice this message:
 
 ```
-Optimizable dependencies detected:
-react, react-dom
-Pre-bundling them to speed up dev server page load...
-(this will be run only when your dependencies have changed)
+Pre-bundling dependencies:
+  react
+  react-dom
+(this will be run only when your dependencies or config have changed)
 ```
 
 ## The Why
@@ -28,6 +28,8 @@ This is Vite performing what we call "dependency pre-bundling". This process ser
 
    By pre-bundling `lodash-es` into a single module, we now only need one HTTP request instead!
 
+Note that this only applies in development mode.
+
 ## Automatic Dependency Discovery
 
 If an existing cache is not found, Vite will crawl your source code and automatically discover dependency imports (i.e. "bare imports" that expect to be resolved from `node_modules`) and use these found imports as entry points for the pre-bundle. The pre-bundling is performed with `esbuild` so it's typically very fast.
@@ -36,11 +38,27 @@ After the server has already started, if a new dependency import is encountered
 
 ## Monorepos and Linked Dependencies
 
-In a monorepo setup, a dependency may be a linked package from the same repo. Vite automatically detects dependencies that are not resolved from `node_modules` and treats the linked dep as source code. It will not attempt to bundle the linked dep, and instead will analyze the linked dep's dependency list instead.
+In a monorepo setup, a dependency may be a linked package from the same repo. Vite automatically detects dependencies that are not resolved from `node_modules` and treats the linked dep as source code. It will not attempt to bundle the linked dep, and will analyze the linked dep's dependency list instead.
+
+However, this requires the linked dep to be exported as ESM. If not, you can add the dependency to [`optimizeDeps.include`](/config/#optimizedeps-include) and [`build.commonjsOptions.include`](/config/#build-commonjsoptions) in your config.
+
+```js
+export default defineConfig({
+  optimizeDeps: {
+    include: ['linked-dep']
+  },
+  build: {
+    commonjsOptions: {
+      include: [/linked-dep/, /node_modules/]
+    }
+  }
+})
+```
+
+When making changes to the linked dep, restart the dev server with the `--force` command line option for the changes to take effect.
 
-::: warning Note
-Linked dependencies might not work properly in the final build due to differences in dependency resolution.
-Use `npm pack` instead for all local dependencies to avoid issues in the final bundle. (The `npm pack` is only ever needed when the linked source code or package only exports CJS code. If it exports ESM code, then it is not needed.)
+::: warning Deduping
+Due to differences in linked dependency resolution, transitive dependencies can deduplicated incorrectly, causing issues when used in runtime. If you stumble on this issue, use `npm pack` on the linked dependency to fix it.
 :::
 
 ## Customizing the Behavior
@@ -57,7 +75,7 @@ Both `include` and `exclude` can be used to deal with this. If the dependency is
 
 Vite caches the pre-bundled dependencies in `node_modules/.vite`. It determines whether it needs to re-run the pre-bundling step based on a few sources:
 
-- The `dependencies` list in your `package.json`
+- The `dependencies` list in your `package.json`.
 - Package manager lockfiles, e.g. `package-lock.json`, `yarn.lock`, or `pnpm-lock.yaml`.
 - Relevant fields in your `vite.config.js`, if present.
 

From 2debb9f4cbb6003e7d24444cf049b45582d82ff1 Mon Sep 17 00:00:00 2001
From: Jeff Yang <32727188+ydcjeff@users.noreply.github.com>
Date: Wed, 23 Feb 2022 03:00:03 +0630
Subject: [PATCH 02/50] fix: allow optional trailing comma in asset
 `import.meta.url` (#6983)

Co-authored-by: bluwy <bluwy@users.noreply.github.com>
---
 packages/playground/assets/index.html         | 45 +++++++++++++++++++
 .../src/node/plugins/assetImportMetaUrl.ts    |  2 +-
 2 files changed, 46 insertions(+), 1 deletion(-)

diff --git a/packages/playground/assets/index.html b/packages/playground/assets/index.html
index f3b9a0b372a608..ef673053abad27 100644
--- a/packages/playground/assets/index.html
+++ b/packages/playground/assets/index.html
@@ -137,6 +137,14 @@ <h2>new URL('...', import.meta.url)</h2>
 <img class="import-meta-url-img" />
 <code class="import-meta-url"></code>
 
+<h2>new URL('...', import.meta.url,) (with comma)</h2>
+<img class="import-meta-url-img-comma" />
+<code class="import-meta-url-comma"></code>
+
+<h2>new URL('...', import.meta.url,) (with comma + new line)</h2>
+<img class="import-meta-url-img-comma-nl" />
+<code class="import-meta-url-comma-nl"></code>
+
 <h2>new URL(`./${dynamic}`, import.meta.url)</h2>
 <p>
   <img class="dynamic-import-meta-url-img-1" />
@@ -147,6 +155,16 @@ <h2>new URL(`./${dynamic}`, import.meta.url)</h2>
   <code class="dynamic-import-meta-url-2"></code>
 </p>
 
+<h2>new URL(`./${dynamic}`, import.meta.url,) (with comma)</h2>
+<p>
+  <img class="dynamic-import-meta-url-img-1-comma" />
+  <code class="dynamic-import-meta-url-1-comma"></code>
+</p>
+<p>
+  <img class="dynamic-import-meta-url-img-2-comma" />
+  <code class="dynamic-import-meta-url-2-comma"></code>
+</p>
+
 <h2>simple script tag import-expression</h2>
 <code class="import-expression"></code>
 <script>
@@ -215,6 +233,22 @@ <h3 class="import-css">@import</h3>
   const metaUrl = new URL('./nested/asset.png', import.meta.url)
   text('.import-meta-url', metaUrl)
   document.querySelector('.import-meta-url-img').src = metaUrl
+
+  // prettier-ignore
+  const metaUrlWithComma = new URL('./nested/asset.png', import.meta.url,)
+  text('.import-meta-url-comma', metaUrlWithComma)
+  document.querySelector('.import-meta-url-img-comma').src = metaUrlWithComma
+
+  // testing trailing comma and new line
+  // prettier-ignore
+  const metaUrlWithCommaNL = new URL(
+    './nested/asset.png',
+    import.meta.url,
+  )
+  text('.import-meta-url-comma-nl', metaUrlWithCommaNL)
+  document.querySelector('.import-meta-url-img-comma-nl').src =
+    metaUrlWithCommaNL
+
   /**
    * don't process the code in the comment
    * const url = new URL('non_existent_file.png', import.meta.url)
@@ -229,6 +263,17 @@ <h3 class="import-css">@import</h3>
   testDynamicImportMetaUrl('icon', 1)
   testDynamicImportMetaUrl('asset', 2)
 
+  function testDynamicImportMetaUrlWithComma(name, i) {
+    // prettier-ignore
+    const metaUrl = new URL(`./nested/${name}.png`, import.meta.url,)
+    text(`.dynamic-import-meta-url-${i}-comma`, metaUrl)
+    document.querySelector(`.dynamic-import-meta-url-img-${i}-comma`).src =
+      metaUrl
+  }
+
+  testDynamicImportMetaUrlWithComma('icon', 1)
+  testDynamicImportMetaUrlWithComma('asset', 2)
+
   function text(el, text) {
     document.querySelector(el).textContent = text
   }
diff --git a/packages/vite/src/node/plugins/assetImportMetaUrl.ts b/packages/vite/src/node/plugins/assetImportMetaUrl.ts
index 9b7249fe4ff35c..c34259bf48a0e9 100644
--- a/packages/vite/src/node/plugins/assetImportMetaUrl.ts
+++ b/packages/vite/src/node/plugins/assetImportMetaUrl.ts
@@ -21,7 +21,7 @@ export function assetImportMetaUrlPlugin(config: ResolvedConfig): Plugin {
     async transform(code, id, options) {
       if (code.includes('new URL') && code.includes(`import.meta.url`)) {
         const importMetaUrlRE =
-          /\bnew\s+URL\s*\(\s*('[^']+'|"[^"]+"|`[^`]+`)\s*,\s*import\.meta\.url\s*\)/g
+          /\bnew\s+URL\s*\(\s*('[^']+'|"[^"]+"|`[^`]+`)\s*,\s*import\.meta\.url\s*,?\s*\)/g
         const noCommentsCode = code
           .replace(multilineCommentsRE, (m) => ' '.repeat(m.length))
           .replace(singlelineCommentsRE, (m) => ' '.repeat(m.length))

From 8fd8f6e0e501c9e46bc3e179c900d31fa5cafce1 Mon Sep 17 00:00:00 2001
From: Gray Zhang <otakustay@gmail.com>
Date: Wed, 23 Feb 2022 14:19:41 +0800
Subject: [PATCH 03/50] fix: don't override user config (#7034)

---
 packages/vite/src/node/http.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/vite/src/node/http.ts b/packages/vite/src/node/http.ts
index f1266ddb93ba12..c07fd41ba9060d 100644
--- a/packages/vite/src/node/http.ts
+++ b/packages/vite/src/node/http.ts
@@ -126,7 +126,7 @@ export async function resolveHttpsConfig(
 ): Promise<HttpsServerOptions | undefined> {
   if (!https) return undefined
 
-  const httpsOption = isObject(https) ? https : {}
+  const httpsOption = isObject(https) ? { ...https } : {}
 
   const { ca, cert, key, pfx } = httpsOption
   Object.assign(httpsOption, {

From c7aad0287ce24f299f538828c090819ce0ca1468 Mon Sep 17 00:00:00 2001
From: ygj6 <7699524+ygj6@users.noreply.github.com>
Date: Wed, 23 Feb 2022 14:39:44 +0800
Subject: [PATCH 04/50] fix: resolve @import of the proxied <style> (#7031)

---
 packages/playground/assets/index.html     | 7 +++++++
 packages/playground/assets/static/foo.css | 3 +++
 packages/vite/src/node/plugins/css.ts     | 5 +++++
 3 files changed, 15 insertions(+)
 create mode 100644 packages/playground/assets/static/foo.css

diff --git a/packages/playground/assets/index.html b/packages/playground/assets/index.html
index ef673053abad27..8c5b201f6881a4 100644
--- a/packages/playground/assets/index.html
+++ b/packages/playground/assets/index.html
@@ -200,6 +200,13 @@ <h3 class="import-css">@import</h3>
   @import url('./css/import.css');
 </style>
 
+<h3 class="foo-public">
+  @import CSS from publicDir should load (this should be red)
+</h3>
+<style>
+  @import '/foo.css';
+</style>
+
 <script type="module">
   import './css/fonts.css'
   import './css/css-url.css'
diff --git a/packages/playground/assets/static/foo.css b/packages/playground/assets/static/foo.css
new file mode 100644
index 00000000000000..65fe63dba0de64
--- /dev/null
+++ b/packages/playground/assets/static/foo.css
@@ -0,0 +1,3 @@
+.foo-public {
+  color: red;
+}
diff --git a/packages/vite/src/node/plugins/css.ts b/packages/vite/src/node/plugins/css.ts
index 804d7cc0c87789..cb62b785732e0d 100644
--- a/packages/vite/src/node/plugins/css.ts
+++ b/packages/vite/src/node/plugins/css.ts
@@ -686,9 +686,14 @@ async function compileCSS(
     postcssConfig && postcssConfig.plugins ? postcssConfig.plugins.slice() : []
 
   if (needInlineImport) {
+    const isHTMLProxy = htmlProxyRE.test(id)
     postcssPlugins.unshift(
       (await import('postcss-import')).default({
         async resolve(id, basedir) {
+          const publicFile = checkPublicFile(id, config)
+          if (isHTMLProxy && publicFile) {
+            return publicFile
+          }
           const resolved = await atImportResolvers.css(
             id,
             path.join(basedir, '*')

From c84601cee5232bad0f65c8fcc663e38bb457a0b3 Mon Sep 17 00:00:00 2001
From: yoho <907415276@qq.com>
Date: Wed, 23 Feb 2022 23:53:19 +0800
Subject: [PATCH 05/50] fix(plugin-vue): setup jsx script no hmr (#6568)

---
 .../vue-jsx/__tests__/vue-jsx.spec.ts           |  7 +++++++
 packages/playground/vue-jsx/main.jsx            |  3 ++-
 .../playground/vue-jsx/setup-syntax-jsx.vue     | 17 +++++++++++++++++
 packages/plugin-vue/src/handleHotUpdate.ts      |  9 +++++++--
 4 files changed, 33 insertions(+), 3 deletions(-)
 create mode 100644 packages/playground/vue-jsx/setup-syntax-jsx.vue

diff --git a/packages/playground/vue-jsx/__tests__/vue-jsx.spec.ts b/packages/playground/vue-jsx/__tests__/vue-jsx.spec.ts
index b929f61fe965c3..64327e64a5f263 100644
--- a/packages/playground/vue-jsx/__tests__/vue-jsx.spec.ts
+++ b/packages/playground/vue-jsx/__tests__/vue-jsx.spec.ts
@@ -102,4 +102,11 @@ if (!isBuild) {
 
     expect(await page.textContent('.script')).toMatch('5')
   })
+
+  test('hmr: setup jsx in .vue', async () => {
+    editFile('setup-syntax-jsx.vue', (code) =>
+      code.replace('let count = ref(100)', 'let count = ref(1000)')
+    )
+    await untilUpdated(() => page.textContent('.setup-jsx'), '1000')
+  })
 }
diff --git a/packages/playground/vue-jsx/main.jsx b/packages/playground/vue-jsx/main.jsx
index 200702c2cc69a1..1a792ea55d2a3c 100644
--- a/packages/playground/vue-jsx/main.jsx
+++ b/packages/playground/vue-jsx/main.jsx
@@ -4,7 +4,7 @@ import { default as TsxDefault } from './Comp'
 import OtherExt from './OtherExt.tesx'
 import JsxScript from './Script.vue'
 import JsxSrcImport from './SrcImport.vue'
-
+import JsxSetupSyntax from './setup-syntax-jsx.vue'
 function App() {
   return (
     <>
@@ -15,6 +15,7 @@ function App() {
       <OtherExt />
       <JsxScript />
       <JsxSrcImport />
+      <JsxSetupSyntax />
     </>
   )
 }
diff --git a/packages/playground/vue-jsx/setup-syntax-jsx.vue b/packages/playground/vue-jsx/setup-syntax-jsx.vue
new file mode 100644
index 00000000000000..0b16be7e773280
--- /dev/null
+++ b/packages/playground/vue-jsx/setup-syntax-jsx.vue
@@ -0,0 +1,17 @@
+<script setup lang="jsx">
+import { ref } from 'vue'
+let count = ref(100)
+const increment = () => {
+  count.value++
+}
+const Render = () => (
+  <div>
+    <button onClick={increment}> click!!! </button>
+  </div>
+)
+</script>
+
+<template>
+  <p class="setup-jsx">{{ count }}</p>
+  <Render />
+</template>
diff --git a/packages/plugin-vue/src/handleHotUpdate.ts b/packages/plugin-vue/src/handleHotUpdate.ts
index 2bce3950563367..7c2a7ef7ee2f1f 100644
--- a/packages/plugin-vue/src/handleHotUpdate.ts
+++ b/packages/plugin-vue/src/handleHotUpdate.ts
@@ -40,9 +40,14 @@ export async function handleHotUpdate(
 
   if (hasScriptChanged(prevDescriptor, descriptor)) {
     let scriptModule: ModuleNode | undefined
-    if (descriptor.script?.lang && !descriptor.script.src) {
+    if (
+      (descriptor.scriptSetup?.lang && !descriptor.scriptSetup.src) ||
+      (descriptor.script?.lang && !descriptor.script.src)
+    ) {
       const scriptModuleRE = new RegExp(
-        `type=script.*&lang\.${descriptor.script.lang}$`
+        `type=script.*&lang\.${
+          descriptor.scriptSetup?.lang || descriptor.script?.lang
+        }$`
       )
       scriptModule = modules.find((m) => scriptModuleRE.test(m.url))
     }

From f38654fd331316f496008f3a118d2628c65b071b Mon Sep 17 00:00:00 2001
From: Zheeeng <air.island.e@foxmail.com>
Date: Thu, 24 Feb 2022 16:14:10 +0800
Subject: [PATCH 06/50] fix: typo (#7064)

---
 packages/vite/src/node/certificate.ts | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/packages/vite/src/node/certificate.ts b/packages/vite/src/node/certificate.ts
index be3604f1dab378..d8ce82d6b5365d 100644
--- a/packages/vite/src/node/certificate.ts
+++ b/packages/vite/src/node/certificate.ts
@@ -43,13 +43,13 @@ import 'node-forge/lib/pki'
 // this RFC in section 4.1.2.2 requires serial numbers to be positive
 // http://www.ietf.org/rfc/rfc5280.txt
 function toPositiveHex(hexString: string) {
-  let mostSiginficativeHexAsInt = parseInt(hexString[0], 16)
-  if (mostSiginficativeHexAsInt < 8) {
+  let mostSignificativeHexAsInt = parseInt(hexString[0], 16)
+  if (mostSignificativeHexAsInt < 8) {
     return hexString
   }
 
-  mostSiginficativeHexAsInt -= 8
-  return mostSiginficativeHexAsInt.toString() + hexString.substring(1)
+  mostSignificativeHexAsInt -= 8
+  return mostSignificativeHexAsInt.toString() + hexString.substring(1)
 }
 
 export function createCertificate(): string {

From 745ae2f07a1273339ce32dc209735608679d8515 Mon Sep 17 00:00:00 2001
From: Zheeeng <air.island.e@foxmail.com>
Date: Thu, 24 Feb 2022 19:46:35 +0800
Subject: [PATCH 07/50] chore(types): use more reasonable ts checking
 annotation comment (#7063)

---
 packages/vite/src/client/client.ts | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/vite/src/client/client.ts b/packages/vite/src/client/client.ts
index 736590e175529a..988fd45291983f 100644
--- a/packages/vite/src/client/client.ts
+++ b/packages/vite/src/client/client.ts
@@ -254,7 +254,7 @@ export function updateStyle(id: string, content: string): void {
     if (!style) {
       style = new CSSStyleSheet()
       style.replaceSync(content)
-      // @ts-ignore
+      // @ts-expect-error: using experimental API
       document.adoptedStyleSheets = [...document.adoptedStyleSheets, style]
     } else {
       style.replaceSync(content)
@@ -281,7 +281,7 @@ export function removeStyle(id: string): void {
   const style = sheetsMap.get(id)
   if (style) {
     if (style instanceof CSSStyleSheet) {
-      // @ts-ignore
+      // @ts-expect-error: using experimental API
       document.adoptedStyleSheets = document.adoptedStyleSheets.filter(
         (s: CSSStyleSheet) => s !== style
       )

From a9dfce38108e796e0de0e3b43ced34d60883cef3 Mon Sep 17 00:00:00 2001
From: yoho <panyoho@gmail.com>
Date: Thu, 24 Feb 2022 21:13:16 +0800
Subject: [PATCH 08/50] fix(hmr): hmr style tag no support in html (#7052)

---
 .../assets/__tests__/assets.spec.ts           | 17 ++++-
 .../src/node/server/middlewares/indexHtml.ts  | 67 ++++++++++---------
 2 files changed, 52 insertions(+), 32 deletions(-)

diff --git a/packages/playground/assets/__tests__/assets.spec.ts b/packages/playground/assets/__tests__/assets.spec.ts
index c51bb4094b7b8c..dfdd8099b062a2 100644
--- a/packages/playground/assets/__tests__/assets.spec.ts
+++ b/packages/playground/assets/__tests__/assets.spec.ts
@@ -8,7 +8,8 @@ import {
   readManifest,
   readFile,
   editFile,
-  notifyRebuildComplete
+  notifyRebuildComplete,
+  untilUpdated
 } from '../../testUtils'
 
 const assetMatch = isBuild
@@ -37,7 +38,7 @@ describe('injected scripts', () => {
 
   test('html-proxy', async () => {
     const hasHtmlProxy = await page.$(
-      'script[type="module"][src="/foo/index.html?html-proxy&index=0.js"]'
+      'script[type="module"][src^="/foo/index.html?html-proxy"]'
     )
     if (isBuild) {
       expect(hasHtmlProxy).toBeFalsy()
@@ -254,3 +255,15 @@ describe('css and assets in css in build watch', () => {
     })
   }
 })
+
+if (!isBuild) {
+  test('@import in html style tag hmr', async () => {
+    await untilUpdated(() => getColor('.import-css'), 'rgb(0, 136, 255)')
+    editFile(
+      './css/import.css',
+      (code) => code.replace('#0088ff', '#00ff88'),
+      true
+    )
+    await untilUpdated(() => getColor('.import-css'), 'rgb(0, 255, 136)')
+  })
+}
diff --git a/packages/vite/src/node/server/middlewares/indexHtml.ts b/packages/vite/src/node/server/middlewares/indexHtml.ts
index 2721502c408e28..3c76d94c526930 100644
--- a/packages/vite/src/node/server/middlewares/indexHtml.ts
+++ b/packages/vite/src/node/server/middlewares/indexHtml.ts
@@ -1,7 +1,7 @@
 import fs from 'fs'
 import path from 'path'
 import MagicString from 'magic-string'
-import type { AttributeNode } from '@vue/compiler-dom'
+import type { AttributeNode, ElementNode } from '@vue/compiler-dom'
 import { NodeTypes } from '@vue/compiler-dom'
 import type { Connect } from 'types/connect'
 import type { IndexHtmlTransformHook } from '../../plugins/html'
@@ -94,9 +94,39 @@ const devHtmlHook: IndexHtmlTransformHook = async (
   const base = config.base || '/'
 
   const s = new MagicString(html)
-  let scriptModuleIndex = -1
+  let inlineModuleIndex = -1
   const filePath = cleanUrl(htmlPath)
 
+  const addInlineModule = (node: ElementNode, ext: 'js' | 'css') => {
+    inlineModuleIndex++
+
+    const url = filePath.replace(normalizePath(config.root), '')
+
+    const contents = node.children
+      .map((child: any) => child.content || '')
+      .join('')
+
+    // add HTML Proxy to Map
+    addToHTMLProxyCache(config, url, inlineModuleIndex, contents)
+
+    // inline js module. convert to src="proxy"
+    const modulePath = `${
+      config.base + htmlPath.slice(1)
+    }?html-proxy&index=${inlineModuleIndex}.${ext}`
+
+    // invalidate the module so the newly cached contents will be served
+    const module = server?.moduleGraph.getModuleById(modulePath)
+    if (module) {
+      server?.moduleGraph.invalidateModule(module)
+    }
+
+    s.overwrite(
+      node.loc.start.offset,
+      node.loc.end.offset,
+      `<script type="module" src="${modulePath}"></script>`
+    )
+  }
+
   await traverseHtml(html, htmlPath, (node) => {
     if (node.type !== NodeTypes.ELEMENT) {
       return
@@ -105,41 +135,18 @@ const devHtmlHook: IndexHtmlTransformHook = async (
     // script tags
     if (node.tag === 'script') {
       const { src, isModule } = getScriptInfo(node)
-      if (isModule) {
-        scriptModuleIndex++
-      }
 
       if (src) {
         processNodeUrl(src, s, config, htmlPath, originalUrl, moduleGraph)
       } else if (isModule) {
-        const url = filePath.replace(normalizePath(config.root), '')
-
-        const contents = node.children
-          .map((child: any) => child.content || '')
-          .join('')
-
-        // add HTML Proxy to Map
-        addToHTMLProxyCache(config, url, scriptModuleIndex, contents)
-
-        // inline js module. convert to src="proxy"
-        const modulePath = `${
-          config.base + htmlPath.slice(1)
-        }?html-proxy&index=${scriptModuleIndex}.js`
-
-        // invalidate the module so the newly cached contents will be served
-        const module = server?.moduleGraph.getModuleById(modulePath)
-        if (module) {
-          server?.moduleGraph.invalidateModule(module)
-        }
-
-        s.overwrite(
-          node.loc.start.offset,
-          node.loc.end.offset,
-          `<script type="module" src="${modulePath}"></script>`
-        )
+        addInlineModule(node, 'js')
       }
     }
 
+    if (node.tag === 'style' && node.children.length) {
+      addInlineModule(node, 'css')
+    }
+
     // elements with [href/src] attrs
     const assetAttrs = assetAttrsConfig[node.tag]
     if (assetAttrs) {

From 88ded7f16382d83603511de043785e01ee1e4a3a Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E7=BF=A0=20/=20green?= <green@sapphi.red>
Date: Fri, 25 Feb 2022 05:31:05 +0900
Subject: [PATCH 09/50] fix: import with query with exports field (#7073)

---
 packages/playground/resolve/__tests__/resolve.spec.ts | 4 ++++
 packages/playground/resolve/exports-path/deep.json    | 3 +++
 packages/playground/resolve/exports-path/package.json | 1 +
 packages/playground/resolve/index.html                | 7 +++++++
 packages/vite/src/node/plugins/resolve.ts             | 7 ++++++-
 5 files changed, 21 insertions(+), 1 deletion(-)
 create mode 100644 packages/playground/resolve/exports-path/deep.json

diff --git a/packages/playground/resolve/__tests__/resolve.spec.ts b/packages/playground/resolve/__tests__/resolve.spec.ts
index 97e4a5dd0add7b..b64da138033fc0 100644
--- a/packages/playground/resolve/__tests__/resolve.spec.ts
+++ b/packages/playground/resolve/__tests__/resolve.spec.ts
@@ -16,6 +16,10 @@ test('deep import with exports field', async () => {
   expect(await page.textContent('.exports-deep')).toMatch('[success]')
 })
 
+test('deep import with query with exports field', async () => {
+  expect(await page.textContent('.exports-deep-query')).not.toMatch('fail')
+})
+
 test('deep import with exports field + exposed dir', async () => {
   expect(await page.textContent('.exports-deep-exposed-dir')).toMatch(
     '[success]'
diff --git a/packages/playground/resolve/exports-path/deep.json b/packages/playground/resolve/exports-path/deep.json
new file mode 100644
index 00000000000000..97e19265d6c843
--- /dev/null
+++ b/packages/playground/resolve/exports-path/deep.json
@@ -0,0 +1,3 @@
+{
+  "foo": "json"
+}
diff --git a/packages/playground/resolve/exports-path/package.json b/packages/playground/resolve/exports-path/package.json
index 045fc85db128d2..7355da2f63f616 100644
--- a/packages/playground/resolve/exports-path/package.json
+++ b/packages/playground/resolve/exports-path/package.json
@@ -8,6 +8,7 @@
       "require": "./cjs.js"
     },
     "./deep.js": "./deep.js",
+    "./deep.json": "./deep.json",
     "./dir/": "./dir/",
     "./dir-mapped/*": {
       "import": "./dir/*",
diff --git a/packages/playground/resolve/index.html b/packages/playground/resolve/index.html
index db0a4bc54f1ad7..71699035abdd53 100644
--- a/packages/playground/resolve/index.html
+++ b/packages/playground/resolve/index.html
@@ -12,6 +12,9 @@ <h2>Entry resolving with exports field</h2>
 <h2>Deep import with exports field</h2>
 <p class="exports-deep">fail</p>
 
+<h2>Deep import with query with exports field</h2>
+<p class="exports-deep-query">fail</p>
+
 <h2>Deep import with exports field + exposed directory</h2>
 <p class="exports-deep-exposed-dir">fail</p>
 
@@ -100,6 +103,10 @@ <h2>resolve package that contains # in path</h2>
   import { msg as deepMsg } from 'resolve-exports-path/deep.js'
   text('.exports-deep', deepMsg)
 
+  // deep import w/ exports w/ query
+  import deepPath from 'resolve-exports-path/deep.json?url'
+  text('.exports-deep-query', deepPath)
+
   // deep import w/ exposed dir
   import { msg as exposedDirMsg } from 'resolve-exports-path/dir/dir'
   text('.exports-deep-exposed-dir', exposedDirMsg)
diff --git a/packages/vite/src/node/plugins/resolve.ts b/packages/vite/src/node/plugins/resolve.ts
index 55afd92df1a8fb..03a9026242f428 100644
--- a/packages/vite/src/node/plugins/resolve.ts
+++ b/packages/vite/src/node/plugins/resolve.ts
@@ -813,7 +813,12 @@ function resolveDeepImport(
   // map relative based on exports data
   if (exportsField) {
     if (isObject(exportsField) && !Array.isArray(exportsField)) {
-      relativeId = resolveExports(data, relativeId, options, targetWeb)
+      relativeId = resolveExports(
+        data,
+        cleanUrl(relativeId),
+        options,
+        targetWeb
+      )
     } else {
       // not exposed
       relativeId = undefined

From 67d164392e8e9081dc3f0338c4b4b8eea6c5f7da Mon Sep 17 00:00:00 2001
From: yoho <907415276@qq.com>
Date: Fri, 25 Feb 2022 14:32:19 +0800
Subject: [PATCH 10/50] docs: add debugging document (#7082)

---
 CONTRIBUTING.md | 14 ++++++++++++++
 1 file changed, 14 insertions(+)

diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md
index 5b8f1fed7192c3..5a0e5153f4b8ab 100644
--- a/CONTRIBUTING.md
+++ b/CONTRIBUTING.md
@@ -14,6 +14,20 @@ To develop and test the core `vite` package:
 
 You can alternatively use [Vite.js Docker Dev](https://github.com/nystudio107/vitejs-docker-dev) for a containerized Docker setup for Vite.js development.
 
+## Debugging
+
+If you want to use break point and explore code execution you can use the ["Run and debug"](https://code.visualstudio.com/docs/editor/debugging) feature from vscode.
+
+1. Add a `debugger` statement where you want to stop the code execution.
+
+2. Click on the "Run and Debug" icon in the activity bar of the editor.
+
+3. Click on the "Javascript Debug Terminal" button.
+
+4. It will open a terminal, then go to `packages/playground/xxx` and run `pnpm run dev`.
+
+5. The execution will stop and you'll use the [Debug toolbar](https://code.visualstudio.com/docs/editor/debugging#_debug-actions) to continue, step over, restart the process...
+
 ## Testing Vite against external packages
 
 You may wish to test your locally-modified copy of Vite against another package that is built with Vite. For pnpm, after building Vite, you can use [`pnpm.overrides`](https://pnpm.io/package_json#pnpmoverrides). Please note that `pnpm.overrides` must be specified in the root `package.json` and you must first list the package as a dependency in the root `package.json`:

From c703a3348adeaad9dc92d805a381866917f2a03b Mon Sep 17 00:00:00 2001
From: Ben McCann <322311+benmccann@users.noreply.github.com>
Date: Fri, 25 Feb 2022 08:39:45 -0800
Subject: [PATCH 11/50] feat: add fixStacktrace option to ssrLoadModule (#7048)

---
 docs/guide/api-javascript.md                  |  2 +-
 packages/vite/src/node/server/index.ts        | 15 +++++++++---
 packages/vite/src/node/ssr/ssrModuleLoader.ts | 24 +++++++++++++++----
 3 files changed, 32 insertions(+), 9 deletions(-)

diff --git a/docs/guide/api-javascript.md b/docs/guide/api-javascript.md
index 1651923c06cdcb..ddaa04279737f5 100644
--- a/docs/guide/api-javascript.md
+++ b/docs/guide/api-javascript.md
@@ -94,7 +94,7 @@ interface ViteDevServer {
    */
   ssrLoadModule(
     url: string,
-    options?: { isolated?: boolean }
+    options?: { fixStacktrace?: boolean }
   ): Promise<Record<string, any>>
   /**
    * Fix ssr error stacktrace.
diff --git a/packages/vite/src/node/server/index.ts b/packages/vite/src/node/server/index.ts
index aeea862dbc173f..77e33cd31a0995 100644
--- a/packages/vite/src/node/server/index.ts
+++ b/packages/vite/src/node/server/index.ts
@@ -224,7 +224,10 @@ export interface ViteDevServer {
   /**
    * Load a given URL as an instantiated module for SSR.
    */
-  ssrLoadModule(url: string): Promise<Record<string, any>>
+  ssrLoadModule(
+    url: string,
+    opts?: { fixStacktrace?: boolean }
+  ): Promise<Record<string, any>>
   /**
    * Fix ssr error stacktrace
    */
@@ -361,14 +364,20 @@ export async function createServer(
       return transformRequest(url, server, options)
     },
     transformIndexHtml: null!, // to be immediately set
-    ssrLoadModule(url) {
+    ssrLoadModule(url, opts?: { fixStacktrace?: boolean }) {
       server._ssrExternals ||= resolveSSRExternal(
         config,
         server._optimizeDepsMetadata
           ? Object.keys(server._optimizeDepsMetadata.optimized)
           : []
       )
-      return ssrLoadModule(url, server)
+      return ssrLoadModule(
+        url,
+        server,
+        undefined,
+        undefined,
+        opts?.fixStacktrace
+      )
     },
     ssrFixStacktrace(e) {
       if (e.stack) {
diff --git a/packages/vite/src/node/ssr/ssrModuleLoader.ts b/packages/vite/src/node/ssr/ssrModuleLoader.ts
index f0eb1bbfc0339e..de31c6a20266c5 100644
--- a/packages/vite/src/node/ssr/ssrModuleLoader.ts
+++ b/packages/vite/src/node/ssr/ssrModuleLoader.ts
@@ -35,7 +35,8 @@ export async function ssrLoadModule(
   url: string,
   server: ViteDevServer,
   context: SSRContext = { global },
-  urlStack: string[] = []
+  urlStack: string[] = [],
+  fixStacktrace?: boolean
 ): Promise<SSRModule> {
   url = unwrapId(url).replace(NULL_BYTE_PLACEHOLDER, '\0')
 
@@ -48,7 +49,13 @@ export async function ssrLoadModule(
     return pending
   }
 
-  const modulePromise = instantiateModule(url, server, context, urlStack)
+  const modulePromise = instantiateModule(
+    url,
+    server,
+    context,
+    urlStack,
+    fixStacktrace
+  )
   pendingModules.set(url, modulePromise)
   modulePromise
     .catch(() => {
@@ -64,7 +71,8 @@ async function instantiateModule(
   url: string,
   server: ViteDevServer,
   context: SSRContext = { global },
-  urlStack: string[] = []
+  urlStack: string[] = [],
+  fixStacktrace?: boolean
 ): Promise<SSRModule> {
   const { moduleGraph } = server
   const mod = await moduleGraph.ensureEntryFromUrl(url, true)
@@ -132,7 +140,13 @@ async function instantiateModule(
       if (pendingDeps.length === 1) {
         pendingImports.set(url, pendingDeps)
       }
-      const mod = await ssrLoadModule(dep, server, context, urlStack)
+      const mod = await ssrLoadModule(
+        dep,
+        server,
+        context,
+        urlStack,
+        fixStacktrace
+      )
       if (pendingDeps.length === 1) {
         pendingImports.delete(url)
       } else {
@@ -188,7 +202,7 @@ async function instantiateModule(
       ssrExportAll
     )
   } catch (e) {
-    if (e.stack) {
+    if (e.stack && fixStacktrace !== false) {
       const stacktrace = ssrRewriteStacktrace(e.stack, moduleGraph)
       rebindErrorStacktrace(e, stacktrace)
       server.config.logger.error(

From 5818ac927861783ea2b05450761fed30f40e7399 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Juan=20Mart=C3=ADn=20Seery?= <me@juanm04.com>
Date: Sat, 26 Feb 2022 04:49:34 -0300
Subject: [PATCH 12/50] fix: ?html-proxy with trailing = added by some servers
 (#7093)

---
 packages/vite/src/node/plugins/html.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/vite/src/node/plugins/html.ts b/packages/vite/src/node/plugins/html.ts
index e7ca5e63961253..7f8a750c72bf22 100644
--- a/packages/vite/src/node/plugins/html.ts
+++ b/packages/vite/src/node/plugins/html.ts
@@ -41,7 +41,7 @@ interface ScriptAssetsUrl {
   url: string
 }
 
-const htmlProxyRE = /\?html-proxy[&inline\-css]*&index=(\d+)\.(js|css)$/
+const htmlProxyRE = /\?html-proxy=?[&inline\-css]*&index=(\d+)\.(js|css)$/
 const inlineCSSRE = /__VITE_INLINE_CSS__([^_]+_\d+)__/g
 const inlineImportRE = /\bimport\s*\(("[^"]*"|'[^']*')\)/g
 export const isHTMLProxy = (id: string): boolean => htmlProxyRE.test(id)

From 30125418b4c7ebda56555090b177ac34b29ffdc7 Mon Sep 17 00:00:00 2001
From: ygj6 <7699524+ygj6@users.noreply.github.com>
Date: Sun, 27 Feb 2022 00:52:43 +0800
Subject: [PATCH 13/50] fix(ssrTransform): use appendLeft instead of
 appendRight (#6407)

---
 .../node/ssr/__tests__/ssrTransform.spec.ts   | 34 ++++++++++++++++---
 packages/vite/src/node/ssr/ssrTransform.ts    |  2 +-
 2 files changed, 30 insertions(+), 6 deletions(-)

diff --git a/packages/vite/src/node/ssr/__tests__/ssrTransform.spec.ts b/packages/vite/src/node/ssr/__tests__/ssrTransform.spec.ts
index f91444b49636a1..e086365ee25f16 100644
--- a/packages/vite/src/node/ssr/__tests__/ssrTransform.spec.ts
+++ b/packages/vite/src/node/ssr/__tests__/ssrTransform.spec.ts
@@ -304,8 +304,8 @@ test('should declare variable for imported super class', async () => {
     const Foo = __vite_ssr_import_0__.Foo;
     class A extends Foo {}
     class B extends Foo {}
-    Object.defineProperty(__vite_ssr_exports__, \\"default\\", { enumerable: true, value: A });
-    Object.defineProperty(__vite_ssr_exports__, \\"B\\", { enumerable: true, configurable: true, get(){ return B }});"
+    Object.defineProperty(__vite_ssr_exports__, \\"B\\", { enumerable: true, configurable: true, get(){ return B }});
+    Object.defineProperty(__vite_ssr_exports__, \\"default\\", { enumerable: true, value: A });"
   `)
 })
 
@@ -351,8 +351,8 @@ test('should handle default export variants', async () => {
   ).toMatchInlineSnapshot(`
     "class A {}
     class B extends A {}
-    Object.defineProperty(__vite_ssr_exports__, \\"default\\", { enumerable: true, value: A });
-    Object.defineProperty(__vite_ssr_exports__, \\"B\\", { enumerable: true, configurable: true, get(){ return B }});"
+    Object.defineProperty(__vite_ssr_exports__, \\"B\\", { enumerable: true, configurable: true, get(){ return B }});
+    Object.defineProperty(__vite_ssr_exports__, \\"default\\", { enumerable: true, value: A });"
   `)
 })
 
@@ -610,7 +610,7 @@ test('jsx', async () => {
   const code = `
   import React from 'react'
   import { Foo, Slot } from 'foo'
-  
+
   function Bar({ Slot = <Foo /> }) {
     return (
       <>
@@ -633,3 +633,27 @@ test('jsx', async () => {
     "
   `)
 })
+
+test('continuous exports', async () => {
+  expect(
+    (
+      await ssrTransform(
+        `
+export function fn1() {
+}export function fn2() {
+}
+        `,
+        null,
+        null
+      )
+    ).code
+  ).toMatchInlineSnapshot(`
+    "
+    function fn1() {
+    }
+    Object.defineProperty(__vite_ssr_exports__, \\"fn1\\", { enumerable: true, configurable: true, get(){ return fn1 }});function fn2() {
+    }
+    Object.defineProperty(__vite_ssr_exports__, \\"fn2\\", { enumerable: true, configurable: true, get(){ return fn2 }});
+            "
+  `)
+})
diff --git a/packages/vite/src/node/ssr/ssrTransform.ts b/packages/vite/src/node/ssr/ssrTransform.ts
index b4eee713e707bc..36496b8168ad36 100644
--- a/packages/vite/src/node/ssr/ssrTransform.ts
+++ b/packages/vite/src/node/ssr/ssrTransform.ts
@@ -66,7 +66,7 @@ export async function ssrTransform(
   }
 
   function defineExport(position: number, name: string, local = name) {
-    s.appendRight(
+    s.appendLeft(
       position,
       `\nObject.defineProperty(${ssrModuleExportsKey}, "${name}", ` +
         `{ enumerable: true, configurable: true, get(){ return ${local} }});`

From 79428ad5b849455e14f95d1b439ae296ba231221 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Mat=C4=9Bj=20Volf?= <mat.volfik@gmail.com>
Date: Sun, 27 Feb 2022 05:02:14 +0100
Subject: [PATCH 14/50] fix(config): Warn about terserOptions in more cases
 (#7101)

---
 packages/vite/src/node/config.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/vite/src/node/config.ts b/packages/vite/src/node/config.ts
index fbda8d5166cb1b..224c534c497ece 100644
--- a/packages/vite/src/node/config.ts
+++ b/packages/vite/src/node/config.ts
@@ -649,7 +649,7 @@ export async function resolveConfig(
     )
   }
 
-  if (config.build?.terserOptions && config.build.minify === 'esbuild') {
+  if (config.build?.terserOptions && config.build.minify !== 'terser') {
     logger.warn(
       colors.yellow(
         `build.terserOptions is specified but build.minify is not set to use Terser. ` +

From 7a1a552ba710bad5714ef0fbb16fdd29ac58ae0b Mon Sep 17 00:00:00 2001
From: yoho <907415276@qq.com>
Date: Sun, 27 Feb 2022 19:56:00 +0800
Subject: [PATCH 15/50] fix: fileToBuiltUrl got undefined when file type is
 `.ico` (#7106)

---
 .../playground/assets/__tests__/assets.spec.ts   |   4 ++++
 packages/playground/assets/favicon.ico           | Bin 0 -> 1150 bytes
 packages/playground/assets/index.html            |   1 +
 packages/vite/src/node/plugins/asset.ts          |   4 ++++
 4 files changed, 9 insertions(+)
 create mode 100644 packages/playground/assets/favicon.ico

diff --git a/packages/playground/assets/__tests__/assets.spec.ts b/packages/playground/assets/__tests__/assets.spec.ts
index dfdd8099b062a2..8781fec785f3f2 100644
--- a/packages/playground/assets/__tests__/assets.spec.ts
+++ b/packages/playground/assets/__tests__/assets.spec.ts
@@ -121,6 +121,10 @@ describe('css url() references', () => {
     const match = isBuild ? `data:image/png;base64` : `/foo/nested/icon.png`
     expect(await getBg('.css-url-base64-inline')).toMatch(match)
     expect(await getBg('.css-url-quotes-base64-inline')).toMatch(match)
+    const icoMatch = isBuild ? `data:image;base64` : `favicon.ico`
+    const el = await page.$(`link.ico`)
+    const herf = await el.getAttribute('href')
+    expect(herf).toMatch(icoMatch)
   })
 
   test('multiple urls on the same line', async () => {
diff --git a/packages/playground/assets/favicon.ico b/packages/playground/assets/favicon.ico
new file mode 100644
index 0000000000000000000000000000000000000000..d75d248ef0b15096a95054643a4d97f5d9b60846
GIT binary patch
literal 1150
zcmaKqSxA*Z7>4KMS_;~x;8i!JU{-`tpyx!I(n2NFMU)w2L{WiMS3#Lcp@vrpA*5Yp
zSy6|`AkYfDD<i0E#V`++Z6*?!>(e{`n8yX0pLf20X1@3RmKkGw`Vte3=0)aUq%ldx
zm^49K+Hw0b#^`KboP)QXJOwbuVUFxlAs{RfqJ+twGylWfOp{Hc$s#253LlN1nsFVc
zKa>40?h5(7PTC6ltDx)(Y&Ze2xggCq(kK?<y<8^e<6=jMdpU6v+;{||V|e5D0Ms=>
zTA`;gAfKD!+uFjpxc_A3+Ma(L28W=z4Gvs@r*ECk`;c45=S#;=oA|abt`f&j5&uJO
z3Dn+&^gZ%h4JidsaTR{{!_Y8PUx(-%PosPy2gi@qIvBMMYz;e3L1{f~mrd9RdB>pZ
zD}4R|sk_C`;=cT&r)c=8u>7h9)u32*SbL`xiq3(pq5C^5-sSOw;<|fv@nfXfl&U`2
z81K5ExDp;bf#DISW%IY%k&2-noShOoz-;kb(u?5RFX-ro?87j3GZdCXrFc8bTx}jd
zz_n@djWnxc*TbbCjEq80FPyG}1zQwvjq7R6ZSWuQ@_#A*LN5n<3$BI?X}q%iD!B-s
zdSFcNp!EgpJr6C<U|<k(bVthdxj6Hu@vTm#H17HQ3@zUW4b6^YJ7BdMAG-UHPpy1s
zP4L4xSd9eXsA6=)<w3zo)vq^js2Y;DdA)1b`LZco_mbS~YVqmZ)>AK?klug4>=)Tv
z+F#{yt>6EK)3NU=L&y_W3UNaC?Tg=6YE0)^V;(0Mb0$WJ7>7@Lg0~+3x9d)!Pd<O-
HJ0{LwWbpi$

literal 0
HcmV?d00001

diff --git a/packages/playground/assets/index.html b/packages/playground/assets/index.html
index 8c5b201f6881a4..e33e9a7cdaaf7d 100644
--- a/packages/playground/assets/index.html
+++ b/packages/playground/assets/index.html
@@ -2,6 +2,7 @@
 
 <head>
   <meta charset="UTF-8" />
+  <link class="ico" rel="icon" type="image/svg+xml" href="favicon.ico" />
 </head>
 
 <link rel="icon" href="data:," />
diff --git a/packages/vite/src/node/plugins/asset.ts b/packages/vite/src/node/plugins/asset.ts
index 7ec3a01543f9a4..0b859183f6f8f3 100644
--- a/packages/vite/src/node/plugins/asset.ts
+++ b/packages/vite/src/node/plugins/asset.ts
@@ -33,6 +33,10 @@ const emittedHashMap = new WeakMap<ResolvedConfig, Set<string>>()
 export function assetPlugin(config: ResolvedConfig): Plugin {
   // assetHashToFilenameMap initialization in buildStart causes getAssetFilename to return undefined
   assetHashToFilenameMap.set(config, new Map())
+
+  // add own dictionary entry by directly assigning mrmine
+  // https://github.com/lukeed/mrmime/issues/3
+  mrmime.mimes['ico'] = 'image'
   return {
     name: 'vite:asset',
 

From 1bd54caa098d81f6ecec1cee7e99a6a7ac7b7f88 Mon Sep 17 00:00:00 2001
From: "renovate[bot]" <29139614+renovate[bot]@users.noreply.github.com>
Date: Mon, 28 Feb 2022 09:23:05 +0100
Subject: [PATCH 16/50] chore(deps): update actions/setup-node action to v3
 (#7113)

---
 .github/workflows/ci.yml      | 4 ++--
 .github/workflows/publish.yml | 2 +-
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml
index 3954ca49c11479..69ba432050fa7e 100644
--- a/.github/workflows/ci.yml
+++ b/.github/workflows/ci.yml
@@ -44,7 +44,7 @@ jobs:
           version: 6
 
       - name: Set node version to ${{ matrix.node_version }}
-        uses: actions/setup-node@v2
+        uses: actions/setup-node@v3
         with:
           node-version: ${{ matrix.node_version }}
           cache: "pnpm"
@@ -82,7 +82,7 @@ jobs:
           version: 6
 
       - name: Set node version to 16
-        uses: actions/setup-node@v2
+        uses: actions/setup-node@v3
         with:
           node-version: 16
           cache: "pnpm"
diff --git a/.github/workflows/publish.yml b/.github/workflows/publish.yml
index eb8f4513707872..9e22af5aed6ee8 100644
--- a/.github/workflows/publish.yml
+++ b/.github/workflows/publish.yml
@@ -23,7 +23,7 @@ jobs:
           version: 6
 
       - name: Set node version to 16.x
-        uses: actions/setup-node@v2
+        uses: actions/setup-node@v3
         with:
           node-version: 16.x
           registry-url: https://registry.npmjs.org/

From 065ceca5c7b8f1843e220fbdbe8a0da4cbb78935 Mon Sep 17 00:00:00 2001
From: yoho <907415276@qq.com>
Date: Mon, 28 Feb 2022 18:45:20 +0800
Subject: [PATCH 17/50] fix: image -> image/x-icon (#7120)

---
 packages/playground/assets/__tests__/assets.spec.ts | 2 +-
 packages/vite/src/node/plugins/asset.ts             | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/playground/assets/__tests__/assets.spec.ts b/packages/playground/assets/__tests__/assets.spec.ts
index 8781fec785f3f2..8efbf1fcc2f082 100644
--- a/packages/playground/assets/__tests__/assets.spec.ts
+++ b/packages/playground/assets/__tests__/assets.spec.ts
@@ -121,7 +121,7 @@ describe('css url() references', () => {
     const match = isBuild ? `data:image/png;base64` : `/foo/nested/icon.png`
     expect(await getBg('.css-url-base64-inline')).toMatch(match)
     expect(await getBg('.css-url-quotes-base64-inline')).toMatch(match)
-    const icoMatch = isBuild ? `data:image;base64` : `favicon.ico`
+    const icoMatch = isBuild ? `data:image/x-icon;base64` : `favicon.ico`
     const el = await page.$(`link.ico`)
     const herf = await el.getAttribute('href')
     expect(herf).toMatch(icoMatch)
diff --git a/packages/vite/src/node/plugins/asset.ts b/packages/vite/src/node/plugins/asset.ts
index 0b859183f6f8f3..3c7681ad6f0bb8 100644
--- a/packages/vite/src/node/plugins/asset.ts
+++ b/packages/vite/src/node/plugins/asset.ts
@@ -36,7 +36,7 @@ export function assetPlugin(config: ResolvedConfig): Plugin {
 
   // add own dictionary entry by directly assigning mrmine
   // https://github.com/lukeed/mrmime/issues/3
-  mrmime.mimes['ico'] = 'image'
+  mrmime.mimes['ico'] = 'image/x-icon'
   return {
     name: 'vite:asset',
 

From 66cafca61c8eefe67c8371249a2fc6e043b91e43 Mon Sep 17 00:00:00 2001
From: Haoqun Jiang <haoqunjiang@gmail.com>
Date: Tue, 1 Mar 2022 00:06:04 +0800
Subject: [PATCH 18/50] fix(vue-jsx): support jsx imports with queries (#7121)

---
 packages/playground/vue-jsx/Query.jsx         | 12 ++++++++++
 .../vue-jsx/__tests__/vue-jsx.spec.ts         |  3 +++
 packages/playground/vue-jsx/main.jsx          |  4 ++++
 packages/playground/vue-jsx/vite.config.js    | 23 ++++++++++++++++++-
 packages/plugin-vue-jsx/index.js              |  7 ++++--
 5 files changed, 46 insertions(+), 3 deletions(-)
 create mode 100644 packages/playground/vue-jsx/Query.jsx

diff --git a/packages/playground/vue-jsx/Query.jsx b/packages/playground/vue-jsx/Query.jsx
new file mode 100644
index 00000000000000..60de93eafb7b1c
--- /dev/null
+++ b/packages/playground/vue-jsx/Query.jsx
@@ -0,0 +1,12 @@
+import { defineComponent, ref } from 'vue'
+
+export default defineComponent(() => {
+  const count = ref(6)
+  const inc = () => count.value++
+
+  return () => (
+    <button class="jsx-with-query" onClick={inc}>
+      import with query transform fail
+    </button>
+  )
+})
diff --git a/packages/playground/vue-jsx/__tests__/vue-jsx.spec.ts b/packages/playground/vue-jsx/__tests__/vue-jsx.spec.ts
index 64327e64a5f263..999fdc19af51ec 100644
--- a/packages/playground/vue-jsx/__tests__/vue-jsx.spec.ts
+++ b/packages/playground/vue-jsx/__tests__/vue-jsx.spec.ts
@@ -7,6 +7,7 @@ test('should render', async () => {
   expect(await page.textContent('.default-tsx')).toMatch('3')
   expect(await page.textContent('.script')).toMatch('4')
   expect(await page.textContent('.src-import')).toMatch('5')
+  expect(await page.textContent('.jsx-with-query')).toMatch('6')
   expect(await page.textContent('.other-ext')).toMatch('Other Ext')
 })
 
@@ -23,6 +24,8 @@ test('should update', async () => {
   expect(await page.textContent('.script')).toMatch('5')
   await page.click('.src-import')
   expect(await page.textContent('.src-import')).toMatch('6')
+  await page.click('.jsx-with-query')
+  expect(await page.textContent('.jsx-with-query')).toMatch('7')
 })
 
 if (!isBuild) {
diff --git a/packages/playground/vue-jsx/main.jsx b/packages/playground/vue-jsx/main.jsx
index 1a792ea55d2a3c..e304e7788e49e7 100644
--- a/packages/playground/vue-jsx/main.jsx
+++ b/packages/playground/vue-jsx/main.jsx
@@ -5,6 +5,9 @@ import OtherExt from './OtherExt.tesx'
 import JsxScript from './Script.vue'
 import JsxSrcImport from './SrcImport.vue'
 import JsxSetupSyntax from './setup-syntax-jsx.vue'
+// eslint-disable-next-line
+import JsxWithQuery from './Query.jsx?query=true'
+
 function App() {
   return (
     <>
@@ -16,6 +19,7 @@ function App() {
       <JsxScript />
       <JsxSrcImport />
       <JsxSetupSyntax />
+      <JsxWithQuery />
     </>
   )
 }
diff --git a/packages/playground/vue-jsx/vite.config.js b/packages/playground/vue-jsx/vite.config.js
index 3ec89a003d79f4..d6eb84e05f4e4a 100644
--- a/packages/playground/vue-jsx/vite.config.js
+++ b/packages/playground/vue-jsx/vite.config.js
@@ -9,7 +9,28 @@ module.exports = {
     vueJsxPlugin({
       include: [/\.tesx$/, /\.[jt]sx$/]
     }),
-    vuePlugin()
+    vuePlugin(),
+    {
+      name: 'jsx-query-plugin',
+      transform(code, id) {
+        if (id.includes('?query=true')) {
+          return `
+import { createVNode as _createVNode } from "vue";
+import { defineComponent, ref } from 'vue';
+export default defineComponent(() => {
+  const count = ref(6);
+
+  const inc = () => count.value++;
+
+  return () => _createVNode("button", {
+    "class": "jsx-with-query",
+    "onClick": inc
+  }, [count.value]);
+});
+`
+        }
+      }
+    }
   ],
   build: {
     // to make tests faster
diff --git a/packages/plugin-vue-jsx/index.js b/packages/plugin-vue-jsx/index.js
index 56c50fe2ff5e6d..248270765d19a1 100644
--- a/packages/plugin-vue-jsx/index.js
+++ b/packages/plugin-vue-jsx/index.js
@@ -95,10 +95,13 @@ function vueJsxPlugin(options = {}) {
       } = options
 
       const filter = createFilter(include || /\.[jt]sx$/, exclude)
+      const [filepath] = id.split('?')
 
-      if (filter(id)) {
+      // use id for script blocks in Vue SFCs (e.g. `App.vue?vue&type=script&lang.jsx`)
+      // use filepath for plain jsx files (e.g. App.jsx)
+      if (filter(id) || filter(filepath)) {
         const plugins = [importMeta, [jsx, babelPluginOptions], ...babelPlugins]
-        if (id.endsWith('.tsx')) {
+        if (id.endsWith('.tsx') || filepath.endsWith('.tsx')) {
           plugins.push([
             require('@babel/plugin-transform-typescript'),
             // @ts-ignore

From 22a0381e5e791296ffa7758331d95ae8ca870acd Mon Sep 17 00:00:00 2001
From: patak-dev <matias.capeletto@gmail.com>
Date: Mon, 28 Feb 2022 17:35:18 +0100
Subject: [PATCH 19/50] release: v2.8.5

---
 packages/vite/CHANGELOG.md | 29 +++++++++++++++++++++++++++++
 packages/vite/package.json |  2 +-
 2 files changed, 30 insertions(+), 1 deletion(-)

diff --git a/packages/vite/CHANGELOG.md b/packages/vite/CHANGELOG.md
index c2f9a3f62ed9f0..711fdfb3026df8 100644
--- a/packages/vite/CHANGELOG.md
+++ b/packages/vite/CHANGELOG.md
@@ -1,3 +1,32 @@
+## [2.8.5](https://github.com/vitejs/vite/compare/v2.8.4...v2.8.5) (2022-02-28)
+
+
+### Bug Fixes
+
+* ?html-proxy with trailing = added by some servers ([#7093](https://github.com/vitejs/vite/issues/7093)) ([5818ac9](https://github.com/vitejs/vite/commit/5818ac927861783ea2b05450761fed30f40e7399))
+* allow optional trailing comma in asset `import.meta.url` ([#6983](https://github.com/vitejs/vite/issues/6983)) ([2debb9f](https://github.com/vitejs/vite/commit/2debb9f4cbb6003e7d24444cf049b45582d82ff1))
+* cannot reassign process.env.NODE_ENV in ssr ([#6989](https://github.com/vitejs/vite/issues/6989)) ([983feb2](https://github.com/vitejs/vite/commit/983feb2cdc5180dc46c3f5fc5b99baaa8d6b7078))
+* **config:** Warn about terserOptions in more cases ([#7101](https://github.com/vitejs/vite/issues/7101)) ([79428ad](https://github.com/vitejs/vite/commit/79428ad5b849455e14f95d1b439ae296ba231221))
+* don't override user config ([#7034](https://github.com/vitejs/vite/issues/7034)) ([8fd8f6e](https://github.com/vitejs/vite/commit/8fd8f6e0e501c9e46bc3e179c900d31fa5cafce1))
+* fileToBuiltUrl got undefined when file type is `.ico` ([#7106](https://github.com/vitejs/vite/issues/7106)) ([7a1a552](https://github.com/vitejs/vite/commit/7a1a552ba710bad5714ef0fbb16fdd29ac58ae0b))
+* **glob:** css imports injecting a ?used query to export the css string ([#6949](https://github.com/vitejs/vite/issues/6949)) ([0b3f4ef](https://github.com/vitejs/vite/commit/0b3f4ef231004e072bf1b037f63bc4ef169d938e))
+* **hmr:** hmr style tag no support in html ([#7052](https://github.com/vitejs/vite/issues/7052)) ([a9dfce3](https://github.com/vitejs/vite/commit/a9dfce38108e796e0de0e3b43ced34d60883cef3))
+* image -> image/x-icon ([#7120](https://github.com/vitejs/vite/issues/7120)) ([065ceca](https://github.com/vitejs/vite/commit/065ceca5c7b8f1843e220fbdbe8a0da4cbb78935))
+* import with query with exports field ([#7073](https://github.com/vitejs/vite/issues/7073)) ([88ded7f](https://github.com/vitejs/vite/commit/88ded7f16382d83603511de043785e01ee1e4a3a))
+* prebundle dep with colon ([#7006](https://github.com/vitejs/vite/issues/7006)) ([2136f2b](https://github.com/vitejs/vite/commit/2136f2bb960d1a81ac3b3ca04d9ebd89dba44661))
+* recycle serve to avoid preventing Node self-exit ([#6895](https://github.com/vitejs/vite/issues/6895)) ([d6b2c53](https://github.com/vitejs/vite/commit/d6b2c53c6f0bcc4ffa9cdf48375f9bbcc98f79f7))
+* resolve [@import](https://github.com/import) of the proxied <style> ([#7031](https://github.com/vitejs/vite/issues/7031)) ([c7aad02](https://github.com/vitejs/vite/commit/c7aad0287ce24f299f538828c090819ce0ca1468))
+* **ssrTransform:** use appendLeft instead of appendRight ([#6407](https://github.com/vitejs/vite/issues/6407)) ([3012541](https://github.com/vitejs/vite/commit/30125418b4c7ebda56555090b177ac34b29ffdc7))
+* typo ([#7064](https://github.com/vitejs/vite/issues/7064)) ([f38654f](https://github.com/vitejs/vite/commit/f38654fd331316f496008f3a118d2628c65b071b))
+
+
+### Features
+
+* add fixStacktrace option to ssrLoadModule ([#7048](https://github.com/vitejs/vite/issues/7048)) ([c703a33](https://github.com/vitejs/vite/commit/c703a3348adeaad9dc92d805a381866917f2a03b))
+* **cli:** add command descriptions ([#6991](https://github.com/vitejs/vite/issues/6991)) ([ffda8f0](https://github.com/vitejs/vite/commit/ffda8f046026980b363ff164677f52bb076fde26))
+
+
+
 ## [2.8.4](https://github.com/vitejs/vite/compare/v2.8.3...v2.8.4) (2022-02-18)
 
 
diff --git a/packages/vite/package.json b/packages/vite/package.json
index e6e5e3e850c2c9..e311edaf9527dc 100644
--- a/packages/vite/package.json
+++ b/packages/vite/package.json
@@ -1,6 +1,6 @@
 {
   "name": "vite",
-  "version": "2.8.4",
+  "version": "2.8.5",
   "license": "MIT",
   "author": "Evan You",
   "description": "Native-ESM powered web dev build tool",

From 309d17f75520e5bb20f7b4d538d7c139616192e2 Mon Sep 17 00:00:00 2001
From: patak-dev <matias.capeletto@gmail.com>
Date: Mon, 28 Feb 2022 17:55:59 +0100
Subject: [PATCH 20/50] release: plugin-vue@2.2.3

---
 packages/plugin-vue/CHANGELOG.md | 9 +++++++++
 packages/plugin-vue/package.json | 2 +-
 2 files changed, 10 insertions(+), 1 deletion(-)

diff --git a/packages/plugin-vue/CHANGELOG.md b/packages/plugin-vue/CHANGELOG.md
index 8cba85641a5975..9d2e6ea62edb8e 100644
--- a/packages/plugin-vue/CHANGELOG.md
+++ b/packages/plugin-vue/CHANGELOG.md
@@ -1,3 +1,12 @@
+## [2.2.3](https://github.com/vitejs/vite/compare/plugin-vue@2.2.2...plugin-vue@2.2.3) (2022-02-28)
+
+
+### Bug Fixes
+
+* **plugin-vue:** setup jsx script no hmr ([#6568](https://github.com/vitejs/vite/issues/6568)) ([c84601c](https://github.com/vitejs/vite/commit/c84601cee5232bad0f65c8fcc663e38bb457a0b3))
+
+
+
 ## [2.2.2](https://github.com/vitejs/vite/compare/plugin-vue@2.2.1...plugin-vue@2.2.2) (2022-02-18)
 
 
diff --git a/packages/plugin-vue/package.json b/packages/plugin-vue/package.json
index 28b64117a64b7f..8cf8caf7d73704 100644
--- a/packages/plugin-vue/package.json
+++ b/packages/plugin-vue/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@vitejs/plugin-vue",
-  "version": "2.2.2",
+  "version": "2.2.3",
   "license": "MIT",
   "author": "Evan You",
   "files": [

From 3d612cbb0eb1d12aeb89cae1f100815c9e1abe2d Mon Sep 17 00:00:00 2001
From: patak-dev <matias.capeletto@gmail.com>
Date: Mon, 28 Feb 2022 18:17:35 +0100
Subject: [PATCH 21/50] release: plugin-vue@2.2.4

---
 packages/plugin-vue/CHANGELOG.md | 4 ++++
 packages/plugin-vue/package.json | 2 +-
 2 files changed, 5 insertions(+), 1 deletion(-)

diff --git a/packages/plugin-vue/CHANGELOG.md b/packages/plugin-vue/CHANGELOG.md
index 9d2e6ea62edb8e..6fb47f160b1689 100644
--- a/packages/plugin-vue/CHANGELOG.md
+++ b/packages/plugin-vue/CHANGELOG.md
@@ -1,3 +1,7 @@
+## [2.2.4](https://github.com/vitejs/vite/compare/plugin-vue@2.2.3...plugin-vue@2.2.4) (2022-02-28)
+
+
+
 ## [2.2.3](https://github.com/vitejs/vite/compare/plugin-vue@2.2.2...plugin-vue@2.2.3) (2022-02-28)
 
 
diff --git a/packages/plugin-vue/package.json b/packages/plugin-vue/package.json
index 8cf8caf7d73704..20e28f4e928afe 100644
--- a/packages/plugin-vue/package.json
+++ b/packages/plugin-vue/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@vitejs/plugin-vue",
-  "version": "2.2.3",
+  "version": "2.2.4",
   "license": "MIT",
   "author": "Evan You",
   "files": [

From 87c9e3d08e10b31f52245ed7efd8fe8708d8bc4b Mon Sep 17 00:00:00 2001
From: patak-dev <matias.capeletto@gmail.com>
Date: Mon, 28 Feb 2022 18:18:25 +0100
Subject: [PATCH 22/50] release: plugin-vue-jsx@1.3.8

---
 packages/plugin-vue-jsx/CHANGELOG.md | 4 ++++
 packages/plugin-vue-jsx/package.json | 2 +-
 2 files changed, 5 insertions(+), 1 deletion(-)

diff --git a/packages/plugin-vue-jsx/CHANGELOG.md b/packages/plugin-vue-jsx/CHANGELOG.md
index 0ad338dbd211eb..43632e9a88ade8 100644
--- a/packages/plugin-vue-jsx/CHANGELOG.md
+++ b/packages/plugin-vue-jsx/CHANGELOG.md
@@ -1,3 +1,7 @@
+## [1.3.8](https://github.com/vitejs/vite/compare/plugin-vue@2.2.4...plugin-vue@1.3.8) (2022-02-28)
+
+
+
 ## [1.3.7](https://github.com/vitejs/vite/compare/plugin-vue@2.2.0...plugin-vue@1.3.7) (2022-02-14)
 
 
diff --git a/packages/plugin-vue-jsx/package.json b/packages/plugin-vue-jsx/package.json
index f8289b79f4c445..8cf4d45792db58 100644
--- a/packages/plugin-vue-jsx/package.json
+++ b/packages/plugin-vue-jsx/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@vitejs/plugin-vue-jsx",
-  "version": "1.3.7",
+  "version": "1.3.8",
   "license": "MIT",
   "author": "Evan You",
   "files": [

From 2fd9dd52d37b7d8f07e130864670d0295b18047e Mon Sep 17 00:00:00 2001
From: Eric Eastwood <madlittlemods@gmail.com>
Date: Tue, 1 Mar 2022 03:03:25 -0600
Subject: [PATCH 23/50] docs: debug Jest tests using Playwright (Chromium)
 (#7129)

---
 CONTRIBUTING.md | 16 ++++++++++++++++
 1 file changed, 16 insertions(+)

diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md
index 5a0e5153f4b8ab..31c1f34f3a4815 100644
--- a/CONTRIBUTING.md
+++ b/CONTRIBUTING.md
@@ -28,6 +28,22 @@ If you want to use break point and explore code execution you can use the ["Run
 
 5. The execution will stop and you'll use the [Debug toolbar](https://code.visualstudio.com/docs/editor/debugging#_debug-actions) to continue, step over, restart the process...
 
+### Debugging errors in Jest tests using Playwright (Chromium)
+
+Some errors are masked and hidden away because of the layers of abstraction and sandboxed nature added by Jest, Playwright, and Chromium. In order to see what's actually going wrong and the contents of the devtools console in those instances, follow this setup:
+
+1. Add a `debugger` statement to the `scripts/jestPerTestSetup.ts` -> `afterAll` hook. This will pause execution before the tests quit and the Playwright browser instance exits.
+
+1. Run the tests with the `debug-serve` script command which will enable remote debugging: `pnpm run debug-serve -- --runInBand resolve`.
+
+1. Wait for inspector devtools to open in your browser and the debugger to attach.
+
+1. In the sources panel in the right column, click the play button to resume execution and allow the tests to run which will open a Chromium instance.
+
+1. Focusing the Chomium instance, you can open the browser devtools and inspect the console there to find the underlying problems.
+
+1. To close everything, just stop the test process back in your terminal.
+
 ## Testing Vite against external packages
 
 You may wish to test your locally-modified copy of Vite against another package that is built with Vite. For pnpm, after building Vite, you can use [`pnpm.overrides`](https://pnpm.io/package_json#pnpmoverrides). Please note that `pnpm.overrides` must be specified in the root `package.json` and you must first list the package as a dependency in the root `package.json`:

From d9f8edbd5b243f60212cc4bb9271c01b7e3fdd76 Mon Sep 17 00:00:00 2001
From: Vladimir <sheremet.va@icloud.com>
Date: Tue, 1 Mar 2022 20:01:47 +0300
Subject: [PATCH 24/50] fix: throw Error when can't preload CSS (#7108)

---
 packages/vite/src/node/plugins/importAnalysisBuild.ts | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/packages/vite/src/node/plugins/importAnalysisBuild.ts b/packages/vite/src/node/plugins/importAnalysisBuild.ts
index bb5b50f93cdbb9..d816d4c1995fd8 100644
--- a/packages/vite/src/node/plugins/importAnalysisBuild.ts
+++ b/packages/vite/src/node/plugins/importAnalysisBuild.ts
@@ -75,7 +75,9 @@ function preload(baseModule: () => Promise<{}>, deps?: string[]) {
       if (isCss) {
         return new Promise((res, rej) => {
           link.addEventListener('load', res)
-          link.addEventListener('error', rej)
+          link.addEventListener('error', () =>
+            rej(new Error(`Unable to preload CSS for ${dep}`))
+          )
         })
       }
     })

From 5c116ecde0ad43409334853457d68481a22e19d4 Mon Sep 17 00:00:00 2001
From: patak <matias.capeletto@gmail.com>
Date: Tue, 1 Mar 2022 20:45:02 +0100
Subject: [PATCH 25/50] fix: revert #7052, hmr style tag no support in html
 (#7136)

---
 .../assets/__tests__/assets.spec.ts           | 17 +----
 .../src/node/server/middlewares/indexHtml.ts  | 67 +++++++++----------
 2 files changed, 32 insertions(+), 52 deletions(-)

diff --git a/packages/playground/assets/__tests__/assets.spec.ts b/packages/playground/assets/__tests__/assets.spec.ts
index 8efbf1fcc2f082..191da897858dd5 100644
--- a/packages/playground/assets/__tests__/assets.spec.ts
+++ b/packages/playground/assets/__tests__/assets.spec.ts
@@ -8,8 +8,7 @@ import {
   readManifest,
   readFile,
   editFile,
-  notifyRebuildComplete,
-  untilUpdated
+  notifyRebuildComplete
 } from '../../testUtils'
 
 const assetMatch = isBuild
@@ -38,7 +37,7 @@ describe('injected scripts', () => {
 
   test('html-proxy', async () => {
     const hasHtmlProxy = await page.$(
-      'script[type="module"][src^="/foo/index.html?html-proxy"]'
+      'script[type="module"][src="/foo/index.html?html-proxy&index=0.js"]'
     )
     if (isBuild) {
       expect(hasHtmlProxy).toBeFalsy()
@@ -259,15 +258,3 @@ describe('css and assets in css in build watch', () => {
     })
   }
 })
-
-if (!isBuild) {
-  test('@import in html style tag hmr', async () => {
-    await untilUpdated(() => getColor('.import-css'), 'rgb(0, 136, 255)')
-    editFile(
-      './css/import.css',
-      (code) => code.replace('#0088ff', '#00ff88'),
-      true
-    )
-    await untilUpdated(() => getColor('.import-css'), 'rgb(0, 255, 136)')
-  })
-}
diff --git a/packages/vite/src/node/server/middlewares/indexHtml.ts b/packages/vite/src/node/server/middlewares/indexHtml.ts
index 3c76d94c526930..2721502c408e28 100644
--- a/packages/vite/src/node/server/middlewares/indexHtml.ts
+++ b/packages/vite/src/node/server/middlewares/indexHtml.ts
@@ -1,7 +1,7 @@
 import fs from 'fs'
 import path from 'path'
 import MagicString from 'magic-string'
-import type { AttributeNode, ElementNode } from '@vue/compiler-dom'
+import type { AttributeNode } from '@vue/compiler-dom'
 import { NodeTypes } from '@vue/compiler-dom'
 import type { Connect } from 'types/connect'
 import type { IndexHtmlTransformHook } from '../../plugins/html'
@@ -94,39 +94,9 @@ const devHtmlHook: IndexHtmlTransformHook = async (
   const base = config.base || '/'
 
   const s = new MagicString(html)
-  let inlineModuleIndex = -1
+  let scriptModuleIndex = -1
   const filePath = cleanUrl(htmlPath)
 
-  const addInlineModule = (node: ElementNode, ext: 'js' | 'css') => {
-    inlineModuleIndex++
-
-    const url = filePath.replace(normalizePath(config.root), '')
-
-    const contents = node.children
-      .map((child: any) => child.content || '')
-      .join('')
-
-    // add HTML Proxy to Map
-    addToHTMLProxyCache(config, url, inlineModuleIndex, contents)
-
-    // inline js module. convert to src="proxy"
-    const modulePath = `${
-      config.base + htmlPath.slice(1)
-    }?html-proxy&index=${inlineModuleIndex}.${ext}`
-
-    // invalidate the module so the newly cached contents will be served
-    const module = server?.moduleGraph.getModuleById(modulePath)
-    if (module) {
-      server?.moduleGraph.invalidateModule(module)
-    }
-
-    s.overwrite(
-      node.loc.start.offset,
-      node.loc.end.offset,
-      `<script type="module" src="${modulePath}"></script>`
-    )
-  }
-
   await traverseHtml(html, htmlPath, (node) => {
     if (node.type !== NodeTypes.ELEMENT) {
       return
@@ -135,16 +105,39 @@ const devHtmlHook: IndexHtmlTransformHook = async (
     // script tags
     if (node.tag === 'script') {
       const { src, isModule } = getScriptInfo(node)
+      if (isModule) {
+        scriptModuleIndex++
+      }
 
       if (src) {
         processNodeUrl(src, s, config, htmlPath, originalUrl, moduleGraph)
       } else if (isModule) {
-        addInlineModule(node, 'js')
-      }
-    }
+        const url = filePath.replace(normalizePath(config.root), '')
+
+        const contents = node.children
+          .map((child: any) => child.content || '')
+          .join('')
 
-    if (node.tag === 'style' && node.children.length) {
-      addInlineModule(node, 'css')
+        // add HTML Proxy to Map
+        addToHTMLProxyCache(config, url, scriptModuleIndex, contents)
+
+        // inline js module. convert to src="proxy"
+        const modulePath = `${
+          config.base + htmlPath.slice(1)
+        }?html-proxy&index=${scriptModuleIndex}.js`
+
+        // invalidate the module so the newly cached contents will be served
+        const module = server?.moduleGraph.getModuleById(modulePath)
+        if (module) {
+          server?.moduleGraph.invalidateModule(module)
+        }
+
+        s.overwrite(
+          node.loc.start.offset,
+          node.loc.end.offset,
+          `<script type="module" src="${modulePath}"></script>`
+        )
+      }
     }
 
     // elements with [href/src] attrs

From 110212e9568bab36a9b94d2beeb361943f1d6d2c Mon Sep 17 00:00:00 2001
From: patak-dev <matias.capeletto@gmail.com>
Date: Tue, 1 Mar 2022 21:19:46 +0100
Subject: [PATCH 26/50] release: v2.8.6

---
 packages/vite/CHANGELOG.md | 10 ++++++++++
 packages/vite/package.json |  2 +-
 2 files changed, 11 insertions(+), 1 deletion(-)

diff --git a/packages/vite/CHANGELOG.md b/packages/vite/CHANGELOG.md
index 711fdfb3026df8..bb0c4d0b312fe1 100644
--- a/packages/vite/CHANGELOG.md
+++ b/packages/vite/CHANGELOG.md
@@ -1,3 +1,13 @@
+## [2.8.6](https://github.com/vitejs/vite/compare/v2.8.5...v2.8.6) (2022-03-01)
+
+
+### Bug Fixes
+
+* revert [#7052](https://github.com/vitejs/vite/issues/7052), hmr style tag no support in html ([#7136](https://github.com/vitejs/vite/issues/7136)) ([5c116ec](https://github.com/vitejs/vite/commit/5c116ecde0ad43409334853457d68481a22e19d4))
+* throw Error when can't preload CSS ([#7108](https://github.com/vitejs/vite/issues/7108)) ([d9f8edb](https://github.com/vitejs/vite/commit/d9f8edbd5b243f60212cc4bb9271c01b7e3fdd76))
+
+
+
 ## [2.8.5](https://github.com/vitejs/vite/compare/v2.8.4...v2.8.5) (2022-02-28)
 
 
diff --git a/packages/vite/package.json b/packages/vite/package.json
index e311edaf9527dc..72bb90249a0286 100644
--- a/packages/vite/package.json
+++ b/packages/vite/package.json
@@ -1,6 +1,6 @@
 {
   "name": "vite",
-  "version": "2.8.5",
+  "version": "2.8.6",
   "license": "MIT",
   "author": "Evan You",
   "description": "Native-ESM powered web dev build tool",

From 5c8d98e31414bf5b5ba8265001523ed7d22921c6 Mon Sep 17 00:00:00 2001
From: Ben McCann <322311+benmccann@users.noreply.github.com>
Date: Wed, 2 Mar 2022 10:08:55 -0800
Subject: [PATCH 27/50] chore: fix typo in test description (#7153)

---
 .../playground/optimize-deps/__tests__/optimize-deps.spec.ts    | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/playground/optimize-deps/__tests__/optimize-deps.spec.ts b/packages/playground/optimize-deps/__tests__/optimize-deps.spec.ts
index f3ae6e8147b0f4..ad063cd04bba35 100644
--- a/packages/playground/optimize-deps/__tests__/optimize-deps.spec.ts
+++ b/packages/playground/optimize-deps/__tests__/optimize-deps.spec.ts
@@ -46,7 +46,7 @@ test('dedupe', async () => {
   expect(await page.textContent('.dedupe button')).toBe('count is 1')
 })
 
-test('cjs borwser field (axios)', async () => {
+test('cjs browser field (axios)', async () => {
   expect(await page.textContent('.cjs-browser-field')).toBe('pong')
 })
 

From 72b8cb60475dea83fc426151753358b8c3fe92b4 Mon Sep 17 00:00:00 2001
From: Lee <56801187+leebeydoun@users.noreply.github.com>
Date: Wed, 2 Mar 2022 19:07:09 +0000
Subject: [PATCH 28/50] fix(resolve): try .tsx extension for .js import from
 typescript module (#7005)

Co-authored-by: Alec Larson <1925840+aleclarson@users.noreply.github.com>
---
 packages/playground/resolve/index.html        | 17 +++++++++
 .../resolve/ts-extension/hellojsx.tsx         |  1 +
 .../resolve/ts-extension/hellotsx.tsx         |  1 +
 .../playground/resolve/ts-extension/index.ts  |  4 +-
 .../vite/src/node/__tests__/utils.spec.ts     | 38 ++++++++++++++++++-
 packages/vite/src/node/plugins/resolve.ts     | 26 +++++++------
 packages/vite/src/node/utils.ts               | 10 ++++-
 7 files changed, 82 insertions(+), 15 deletions(-)
 create mode 100644 packages/playground/resolve/ts-extension/hellojsx.tsx
 create mode 100644 packages/playground/resolve/ts-extension/hellotsx.tsx

diff --git a/packages/playground/resolve/index.html b/packages/playground/resolve/index.html
index 71699035abdd53..c0569345d86837 100644
--- a/packages/playground/resolve/index.html
+++ b/packages/playground/resolve/index.html
@@ -41,6 +41,17 @@ <h2>
 </h2>
 <p class="ts-extension">fail</p>
 
+<h2>
+  A ts module can import another tsx module using its corresponding jsx file
+  name
+</h2>
+<p class="jsx-extension">fail</p>
+
+<h2>
+  A ts module can import another tsx module using its corresponding js file name
+</h2>
+<p class="tsx-extension">fail</p>
+
 <h2>Resolve file name containing dot</h2>
 <p class="dot">fail</p>
 
@@ -137,6 +148,12 @@ <h2>resolve package that contains # in path</h2>
   import { msg as tsExtensionMsg } from './ts-extension'
   text('.ts-extension', tsExtensionMsg)
 
+  import { msgJsx as tsJsxExtensionMsg } from './ts-extension'
+  text('.jsx-extension', tsJsxExtensionMsg)
+
+  import { msgTsx as tsTsxExtensionMsg } from './ts-extension'
+  text('.tsx-extension', tsTsxExtensionMsg)
+
   // filename with dot
   import { bar } from './util/bar.util'
   text('.dot', bar())
diff --git a/packages/playground/resolve/ts-extension/hellojsx.tsx b/packages/playground/resolve/ts-extension/hellojsx.tsx
new file mode 100644
index 00000000000000..a8f610b399b17a
--- /dev/null
+++ b/packages/playground/resolve/ts-extension/hellojsx.tsx
@@ -0,0 +1 @@
+export const msgJsx = '[success] use .jsx extension to import a tsx module'
diff --git a/packages/playground/resolve/ts-extension/hellotsx.tsx b/packages/playground/resolve/ts-extension/hellotsx.tsx
new file mode 100644
index 00000000000000..b7461ca71ded6c
--- /dev/null
+++ b/packages/playground/resolve/ts-extension/hellotsx.tsx
@@ -0,0 +1 @@
+export const msgTsx = '[success] use .js extension to import a tsx module'
diff --git a/packages/playground/resolve/ts-extension/index.ts b/packages/playground/resolve/ts-extension/index.ts
index e095619ee4d716..bdb326f8778e64 100644
--- a/packages/playground/resolve/ts-extension/index.ts
+++ b/packages/playground/resolve/ts-extension/index.ts
@@ -1,3 +1,5 @@
 import { msg } from './hello.js'
+import { msgJsx } from './hellojsx.jsx'
+import { msgTsx } from './hellotsx.js'
 
-export { msg }
+export { msg, msgJsx, msgTsx }
diff --git a/packages/vite/src/node/__tests__/utils.spec.ts b/packages/vite/src/node/__tests__/utils.spec.ts
index 3bf82f6b86f84b..26b149cd48b8af 100644
--- a/packages/vite/src/node/__tests__/utils.spec.ts
+++ b/packages/vite/src/node/__tests__/utils.spec.ts
@@ -1,4 +1,4 @@
-import { injectQuery, isWindows } from '../utils'
+import { getPotentialTsSrcPaths, injectQuery, isWindows } from '../utils'
 
 if (isWindows) {
   // this test will work incorrectly on unix systems
@@ -38,3 +38,39 @@ test('path with unicode, space, and %', () => {
     '/usr/vite/東京 %20 hello?direct'
   )
 })
+
+test('ts import of file with .js extension', () => {
+  expect(getPotentialTsSrcPaths('test-file.js')).toEqual([
+    'test-file.ts',
+    'test-file.tsx'
+  ])
+})
+
+test('ts import of file with .jsx extension', () => {
+  expect(getPotentialTsSrcPaths('test-file.jsx')).toEqual(['test-file.tsx'])
+})
+
+test('ts import of file .mjs,.cjs extension', () => {
+  expect(getPotentialTsSrcPaths('test-file.cjs')).toEqual([
+    'test-file.cts',
+    'test-file.ctsx'
+  ])
+  expect(getPotentialTsSrcPaths('test-file.mjs')).toEqual([
+    'test-file.mts',
+    'test-file.mtsx'
+  ])
+})
+
+test('ts import of file with .js before extension', () => {
+  expect(getPotentialTsSrcPaths('test-file.js.js')).toEqual([
+    'test-file.js.ts',
+    'test-file.js.tsx'
+  ])
+})
+
+test('ts import of file with .js and query param', () => {
+  expect(getPotentialTsSrcPaths('test-file.js.js?lee=123')).toEqual([
+    'test-file.js.ts?lee=123',
+    'test-file.js.tsx?lee=123'
+  ])
+})
diff --git a/packages/vite/src/node/plugins/resolve.ts b/packages/vite/src/node/plugins/resolve.ts
index 03a9026242f428..52258b73a23836 100644
--- a/packages/vite/src/node/plugins/resolve.ts
+++ b/packages/vite/src/node/plugins/resolve.ts
@@ -27,7 +27,7 @@ import {
   isFileReadable,
   isTsRequest,
   isPossibleTsOutput,
-  getTsSrcPath
+  getPotentialTsSrcPaths
 } from '../utils'
 import type { ViteDevServer, SSROptions } from '..'
 import type { PartialResolvedId } from 'rollup'
@@ -436,16 +436,20 @@ function tryResolveFile(
 
   const tryTsExtension = options.isFromTsImporter && isPossibleTsOutput(file)
   if (tryTsExtension) {
-    const tsSrcPath = getTsSrcPath(file)
-    return tryResolveFile(
-      tsSrcPath,
-      postfix,
-      options,
-      tryIndex,
-      targetWeb,
-      tryPrefix,
-      skipPackageJson
-    )
+    const tsSrcPaths = getPotentialTsSrcPaths(file)
+    for (const srcPath of tsSrcPaths) {
+      const res = tryResolveFile(
+        srcPath,
+        postfix,
+        options,
+        tryIndex,
+        targetWeb,
+        tryPrefix,
+        skipPackageJson
+      )
+      if (res) return res
+    }
+    return
   }
 
   if (tryPrefix) {
diff --git a/packages/vite/src/node/utils.ts b/packages/vite/src/node/utils.ts
index bc1b8588cb212d..9cba9c7c79b3a3 100644
--- a/packages/vite/src/node/utils.ts
+++ b/packages/vite/src/node/utils.ts
@@ -189,8 +189,14 @@ const knownTsOutputRE = /\.(js|mjs|cjs|jsx)$/
 export const isTsRequest = (url: string) => knownTsRE.test(cleanUrl(url))
 export const isPossibleTsOutput = (url: string) =>
   knownTsOutputRE.test(cleanUrl(url))
-export const getTsSrcPath = (filename: string) =>
-  filename.replace(/\.([cm])?(js)(x?)(\?|$)/, '.$1ts$3')
+export function getPotentialTsSrcPaths(filePath: string) {
+  const [name, type, query = ''] = filePath.split(/(\.(?:[cm]?js|jsx))(\?.*)?$/)
+  const paths = [name + type.replace('js', 'ts') + query]
+  if (!type.endsWith('x')) {
+    paths.push(name + type.replace('js', 'tsx') + query)
+  }
+  return paths
+}
 
 const importQueryRE = /(\?|&)import=?(?:&|$)/
 const internalPrefixes = [

From c8a7ea86586b81fae1ba7eae2282267f68de01dd Mon Sep 17 00:00:00 2001
From: yoho <907415276@qq.com>
Date: Thu, 3 Mar 2022 14:21:41 +0800
Subject: [PATCH 29/50] fix(json): load json module error (#6352)

---
 packages/playground/json/index.html           |  6 ++
 .../playground/json/json-module/index.json    |  3 +
 .../playground/json/json-module/package.json  |  4 ++
 packages/playground/json/package.json         |  3 +-
 packages/vite/src/node/plugins/resolve.ts     | 65 ++++++++++---------
 pnpm-lock.yaml                                |  5 ++
 6 files changed, 55 insertions(+), 31 deletions(-)
 create mode 100644 packages/playground/json/json-module/index.json
 create mode 100644 packages/playground/json/json-module/package.json

diff --git a/packages/playground/json/index.html b/packages/playground/json/index.html
index 4f6e2b6ae57466..cf16636f91cb68 100644
--- a/packages/playground/json/index.html
+++ b/packages/playground/json/index.html
@@ -19,6 +19,9 @@ <h2>Importing as URL</h2>
 <h2>Raw Import</h2>
 <pre class="raw"></pre>
 
+<h2>JSON Module</h2>
+<pre class="module"></pre>
+
 <script type="module">
   import json, { hello } from './test.json'
   import deepJson, { name } from 'vue/package.json'
@@ -46,6 +49,9 @@ <h2>Raw Import</h2>
   import raw from './test.json?raw'
   text('.raw', raw)
 
+  import moduleJSON from 'json-module'
+  text('.module', JSON.stringify(moduleJSON))
+
   function text(sel, text) {
     document.querySelector(sel).textContent = text
   }
diff --git a/packages/playground/json/json-module/index.json b/packages/playground/json/json-module/index.json
new file mode 100644
index 00000000000000..00c52e3dfc6fa3
--- /dev/null
+++ b/packages/playground/json/json-module/index.json
@@ -0,0 +1,3 @@
+{
+  "hello": "hi"
+}
diff --git a/packages/playground/json/json-module/package.json b/packages/playground/json/json-module/package.json
new file mode 100644
index 00000000000000..17db87793a74e3
--- /dev/null
+++ b/packages/playground/json/json-module/package.json
@@ -0,0 +1,4 @@
+{
+  "name": "json-module",
+  "version": "0.0.0"
+}
diff --git a/packages/playground/json/package.json b/packages/playground/json/package.json
index ae49085bf36367..203846bab73b48 100644
--- a/packages/playground/json/package.json
+++ b/packages/playground/json/package.json
@@ -9,6 +9,7 @@
     "preview": "vite preview"
   },
   "devDependencies": {
-    "vue": "^3.2.25"
+    "vue": "^3.2.25",
+    "json-module": "file:./json-module"
   }
 }
diff --git a/packages/vite/src/node/plugins/resolve.ts b/packages/vite/src/node/plugins/resolve.ts
index 52258b73a23836..ce899abbdf1dc5 100644
--- a/packages/vite/src/node/plugins/resolve.ts
+++ b/packages/vite/src/node/plugins/resolve.ts
@@ -728,39 +728,44 @@ export function resolvePackageEntry(
         }
       }
     }
+    entryPoint ||= data.main
+
+    // try default entry when entry is not define
+    // https://nodejs.org/api/modules.html#all-together
+    const entryPoints = entryPoint
+      ? [entryPoint]
+      : ['index.js', 'index.json', 'index.node']
+
+    for (let entry of entryPoints) {
+      // make sure we don't get scripts when looking for sass
+      if (
+        options.mainFields?.[0] === 'sass' &&
+        !options.extensions?.includes(path.extname(entry))
+      ) {
+        entry = ''
+        options.skipPackageJson = true
+      }
 
-    entryPoint = entryPoint || data.main || 'index.js'
-
-    // make sure we don't get scripts when looking for sass
-    if (
-      options.mainFields?.[0] === 'sass' &&
-      !options.extensions?.includes(path.extname(entryPoint))
-    ) {
-      entryPoint = ''
-      options.skipPackageJson = true
-    }
-
-    // resolve object browser field in package.json
-    const { browser: browserField } = data
-    if (targetWeb && isObject(browserField)) {
-      entryPoint = mapWithBrowserField(entryPoint, browserField) || entryPoint
-    }
-
-    entryPoint = path.join(dir, entryPoint)
-    const resolvedEntryPoint = tryFsResolve(entryPoint, options)
+      // resolve object browser field in package.json
+      const { browser: browserField } = data
+      if (targetWeb && isObject(browserField)) {
+        entry = mapWithBrowserField(entry, browserField) || entry
+      }
 
-    if (resolvedEntryPoint) {
-      isDebug &&
-        debug(
-          `[package entry] ${colors.cyan(id)} -> ${colors.dim(
-            resolvedEntryPoint
-          )}`
-        )
-      setResolvedCache('.', resolvedEntryPoint, targetWeb)
-      return resolvedEntryPoint
-    } else {
-      packageEntryFailure(id)
+      const entryPointPath = path.join(dir, entry)
+      const resolvedEntryPoint = tryFsResolve(entryPointPath, options)
+      if (resolvedEntryPoint) {
+        isDebug &&
+          debug(
+            `[package entry] ${colors.cyan(id)} -> ${colors.dim(
+              resolvedEntryPoint
+            )}`
+          )
+        setResolvedCache('.', resolvedEntryPoint, targetWeb)
+        return resolvedEntryPoint
+      }
     }
+    packageEntryFailure(id)
   } catch (e) {
     packageEntryFailure(id, e.message)
   }
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index ab2b4a7833c686..943c918f8ad2aa 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -203,10 +203,15 @@ importers:
 
   packages/playground/json:
     specifiers:
+      json-module: file:./json-module
       vue: ^3.2.25
     devDependencies:
+      json-module: link:json-module
       vue: 3.2.26
 
+  packages/playground/json/json-module:
+    specifiers: {}
+
   packages/playground/legacy:
     specifiers:
       '@vitejs/plugin-legacy': workspace:*

From 96573dbcafb138c91b524ef9995de44203d95246 Mon Sep 17 00:00:00 2001
From: Michael Warner <61156732+mwarnerdotme@users.noreply.github.com>
Date: Wed, 2 Mar 2022 23:22:32 -0700
Subject: [PATCH 30/50] fix(hmr): client pinging behind a proxy on websocket
 disconnect (fix #4501) (#5466)

---
 packages/vite/src/client/client.ts | 9 +++++++--
 1 file changed, 7 insertions(+), 2 deletions(-)

diff --git a/packages/vite/src/client/client.ts b/packages/vite/src/client/client.ts
index 988fd45291983f..076e11e1e31aba 100644
--- a/packages/vite/src/client/client.ts
+++ b/packages/vite/src/client/client.ts
@@ -214,9 +214,14 @@ async function waitForSuccessfulPing(ms = 1000) {
   // eslint-disable-next-line no-constant-condition
   while (true) {
     try {
-      await fetch(`${base}__vite_ping`)
-      break
+      const pingResponse = await fetch(`${base}__vite_ping`)
+
+      // success - 2xx status code
+      if (pingResponse.ok) break
+      // failure - non-2xx status code
+      else throw new Error()
     } catch (e) {
+      // wait ms before attempting to ping again
       await new Promise((resolve) => setTimeout(resolve, ms))
     }
   }

From 7215a03c796537419bc4a2533d312e868a11e5da Mon Sep 17 00:00:00 2001
From: dengqing <1247748612@qq.com>
Date: Thu, 3 Mar 2022 14:23:38 +0800
Subject: [PATCH 31/50] fix: define plugin not ignore file names (#6340)

---
 .../define/__tests__/define.spec.ts           |  9 +++++
 packages/playground/define/index.html         |  6 +++
 packages/playground/define/vite.config.js     |  5 ++-
 packages/vite/src/node/plugins/define.ts      | 39 ++++++++++++-------
 4 files changed, 43 insertions(+), 16 deletions(-)

diff --git a/packages/playground/define/__tests__/define.spec.ts b/packages/playground/define/__tests__/define.spec.ts
index f5eb78ea4e2766..f417026ebd186d 100644
--- a/packages/playground/define/__tests__/define.spec.ts
+++ b/packages/playground/define/__tests__/define.spec.ts
@@ -20,4 +20,13 @@ test('string', async () => {
   expect(await page.textContent('.spread-array')).toBe(
     JSON.stringify([...defines.__STRING__])
   )
+  expect(await page.textContent('.import-file')).not.toBe(
+    `import * from "${defines.__IMPORT_FILE_NAME__}"`
+  )
+  expect(await page.textContent('.export-file')).not.toBe(
+    `export * from "${defines.__EXPORT_FILE_NAME__}"`
+  )
+  expect(await page.textContent('.path')).not.toBe(
+    `import * from "xxxx/${defines.PATH}"`
+  )
 })
diff --git a/packages/playground/define/index.html b/packages/playground/define/index.html
index bf6a9c59689396..a285764dd9e0b4 100644
--- a/packages/playground/define/index.html
+++ b/packages/playground/define/index.html
@@ -9,6 +9,9 @@ <h1>Define</h1>
 <p>process as property: <code class="process-as-property"></code></p>
 <p>spread object: <code class="spread-object"></code></p>
 <p>spread array: <code class="spread-array"></code></p>
+<p>import file: <code class="import-file"></code></p>
+<p>export file: <code class="export-file"></code></p>
+<p>path: <code class="path"></code></p>
 
 <script type="module">
   const __VAR_NAME__ = true // ensure define doesn't replace var name
@@ -26,6 +29,9 @@ <h1>Define</h1>
     })
   )
   text('.spread-array', JSON.stringify([...`"${__STRING__}"`]))
+  text('.import-file', `import * from "__IMPORT_FILE_NAME__"`)
+  text('.export-file', `export * from "__EXPORT_FILE_NAME__"`)
+  text('.path', `import * from "xxxx/PATH"`)
 
   function text(el, text) {
     document.querySelector(el).textContent = text
diff --git a/packages/playground/define/vite.config.js b/packages/playground/define/vite.config.js
index 848abd09322df6..7f6c914b3062f1 100644
--- a/packages/playground/define/vite.config.js
+++ b/packages/playground/define/vite.config.js
@@ -16,6 +16,9 @@ module.exports = {
       }
     },
     __VAR_NAME__: false,
-    'process.env.SOMEVAR': '"SOMEVAR"'
+    'process.env.SOMEVAR': '"SOMEVAR"',
+    __IMPORT_FILE_NAME__: '"importFileName"',
+    __EXPORT_FILE_NAME__: '"exportFileName"',
+    PATH: '"filePath"'
   }
 }
diff --git a/packages/vite/src/node/plugins/define.ts b/packages/vite/src/node/plugins/define.ts
index 187cacf54ab1c8..7d10035a0d51d0 100644
--- a/packages/vite/src/node/plugins/define.ts
+++ b/packages/vite/src/node/plugins/define.ts
@@ -53,7 +53,6 @@ export function definePlugin(config: ResolvedConfig): Plugin {
         'globalThis.process.env.': `({}).`
       })
     }
-
     const replacements: Record<string, string> = {
       ...(isNeedProcessEnv ? processNodeEnv : {}),
       ...userDefine,
@@ -62,20 +61,30 @@ export function definePlugin(config: ResolvedConfig): Plugin {
     }
 
     const replacementsKeys = Object.keys(replacements)
-    const pattern = replacementsKeys.length
-      ? new RegExp(
-          // Do not allow preceding '.', but do allow preceding '...' for spread operations
-          '(?<!(?<!\\.\\.)\\.)\\b(' +
-            replacementsKeys
-              .map((str) => {
-                return str.replace(/[-[\]/{}()*+?.\\^$|]/g, '\\$&')
-              })
-              .join('|') +
-            // prevent trailing assignments
-            ')\\b(?!\\s*?=[^=])',
-          'g'
-        )
-      : null
+
+    if (!replacementsKeys.length) {
+      return [replacements, null]
+    }
+
+    const replacementsStr = replacementsKeys
+      .map((str) => {
+        return str.replace(/[-[\]/{}()*+?.\\^$|]/g, '\\$&')
+      })
+      .join('|')
+
+    // The following characters are not allowed because they are String boundaries
+    const characters = '[\'"`\\/-_]'
+
+    const pattern = new RegExp(
+      `(?<!${characters})` +
+        // Do not allow preceding '.', but do allow preceding '...' for spread operations
+        '(?<!(?<!\\.\\.)\\.)' +
+        `\\b(${replacementsStr})\\b` +
+        `(?!${characters})` +
+        // prevent trailing assignments
+        '(?!\\s*?=[^=])',
+      'g'
+    )
 
     return [replacements, pattern]
   }

From e0a4d810598d1834933ed437ac5a2168cbbbf2f8 Mon Sep 17 00:00:00 2001
From: Bjorn Lu <bjornlu.dev@gmail.com>
Date: Thu, 3 Mar 2022 14:24:32 +0800
Subject: [PATCH 32/50] fix: prevent loading env outside of root (#6995)

---
 packages/playground/env-nested/.env              |  1 +
 .../env-nested/__tests__/env-nested.spec.ts      | 15 +++++++++++++++
 .../playground/env-nested/envs/.env.development  |  1 +
 .../playground/env-nested/envs/.env.production   |  1 +
 packages/playground/env-nested/index.html        | 16 ++++++++++++++++
 packages/playground/env-nested/package.json      | 11 +++++++++++
 packages/playground/env-nested/vite.config.js    |  5 +++++
 packages/vite/src/node/config.ts                 |  8 ++------
 packages/vite/src/node/utils.ts                  | 16 ++++++++++++----
 9 files changed, 64 insertions(+), 10 deletions(-)
 create mode 100644 packages/playground/env-nested/.env
 create mode 100644 packages/playground/env-nested/__tests__/env-nested.spec.ts
 create mode 100644 packages/playground/env-nested/envs/.env.development
 create mode 100644 packages/playground/env-nested/envs/.env.production
 create mode 100644 packages/playground/env-nested/index.html
 create mode 100644 packages/playground/env-nested/package.json
 create mode 100644 packages/playground/env-nested/vite.config.js

diff --git a/packages/playground/env-nested/.env b/packages/playground/env-nested/.env
new file mode 100644
index 00000000000000..2e8565f90df52b
--- /dev/null
+++ b/packages/playground/env-nested/.env
@@ -0,0 +1 @@
+VITE_PARENT_ENV=dont_load_me
\ No newline at end of file
diff --git a/packages/playground/env-nested/__tests__/env-nested.spec.ts b/packages/playground/env-nested/__tests__/env-nested.spec.ts
new file mode 100644
index 00000000000000..1ceebde7a044b7
--- /dev/null
+++ b/packages/playground/env-nested/__tests__/env-nested.spec.ts
@@ -0,0 +1,15 @@
+import { isBuild } from 'testUtils'
+
+const mode = isBuild ? `production` : `development`
+
+test('mode', async () => {
+  expect(await page.textContent('.mode')).toBe(mode)
+})
+
+test('mode file override', async () => {
+  expect(await page.textContent('.mode-file')).toBe(`.env.${mode}`)
+})
+
+test('should not load parent .env file', async () => {
+  expect(await page.textContent('.parent-env')).not.toBe('dont_load_me')
+})
diff --git a/packages/playground/env-nested/envs/.env.development b/packages/playground/env-nested/envs/.env.development
new file mode 100644
index 00000000000000..1557708651f4dc
--- /dev/null
+++ b/packages/playground/env-nested/envs/.env.development
@@ -0,0 +1 @@
+VITE_EFFECTIVE_MODE_FILE_NAME=.env.development
diff --git a/packages/playground/env-nested/envs/.env.production b/packages/playground/env-nested/envs/.env.production
new file mode 100644
index 00000000000000..13c1a2ab36869f
--- /dev/null
+++ b/packages/playground/env-nested/envs/.env.production
@@ -0,0 +1 @@
+VITE_EFFECTIVE_MODE_FILE_NAME=.env.production
diff --git a/packages/playground/env-nested/index.html b/packages/playground/env-nested/index.html
new file mode 100644
index 00000000000000..8f775d5cb30bba
--- /dev/null
+++ b/packages/playground/env-nested/index.html
@@ -0,0 +1,16 @@
+<h1>Nested Environment Variables</h1>
+<p>import.meta.env.MODE: <code class="mode"></code></p>
+<p>
+  import.meta.env.VITE_EFFECTIVE_MODE_FILE_NAME: <code class="mode-file"></code>
+</p>
+<p>Empty import.meta.env.VITE_PARENT_ENV: <code class="parent-env"></code></p>
+
+<script type="module">
+  text('.mode', import.meta.env.MODE)
+  text('.mode-file', import.meta.env.VITE_EFFECTIVE_MODE_FILE_NAME)
+  text('.parent-env', import.meta.env.VITE_PARENT_ENV)
+
+  function text(el, text) {
+    document.querySelector(el).textContent = text
+  }
+</script>
diff --git a/packages/playground/env-nested/package.json b/packages/playground/env-nested/package.json
new file mode 100644
index 00000000000000..8fecc69a41c2f4
--- /dev/null
+++ b/packages/playground/env-nested/package.json
@@ -0,0 +1,11 @@
+{
+  "name": "test-env-nested",
+  "private": true,
+  "version": "0.0.0",
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "debug": "node --inspect-brk ../../vite/bin/vite",
+    "preview": "vite preview"
+  }
+}
diff --git a/packages/playground/env-nested/vite.config.js b/packages/playground/env-nested/vite.config.js
new file mode 100644
index 00000000000000..0e46100698650d
--- /dev/null
+++ b/packages/playground/env-nested/vite.config.js
@@ -0,0 +1,5 @@
+const { defineConfig } = require('vite')
+
+module.exports = defineConfig({
+  envDir: './envs'
+})
diff --git a/packages/vite/src/node/config.ts b/packages/vite/src/node/config.ts
index 224c534c497ece..e5f72e6ac65957 100644
--- a/packages/vite/src/node/config.ts
+++ b/packages/vite/src/node/config.ts
@@ -401,11 +401,7 @@ export async function resolveConfig(
   const resolvedBuildOptions = resolveBuildOptions(config.build)
 
   // resolve cache directory
-  const pkgPath = lookupFile(
-    resolvedRoot,
-    [`package.json`],
-    true /* pathOnly */
-  )
+  const pkgPath = lookupFile(resolvedRoot, [`package.json`], { pathOnly: true })
   const cacheDir = config.cacheDir
     ? path.resolve(resolvedRoot, config.cacheDir)
     : pkgPath
@@ -1083,7 +1079,7 @@ export function loadEnv(
   }
 
   for (const file of envFiles) {
-    const path = lookupFile(envDir, [file], true)
+    const path = lookupFile(envDir, [file], { pathOnly: true, rootDir: envDir })
     if (path) {
       const parsed = dotenv.parse(fs.readFileSync(path), {
         debug: process.env.DEBUG?.includes('vite:dotenv') || undefined
diff --git a/packages/vite/src/node/utils.ts b/packages/vite/src/node/utils.ts
index 9cba9c7c79b3a3..935c5c8401071b 100644
--- a/packages/vite/src/node/utils.ts
+++ b/packages/vite/src/node/utils.ts
@@ -298,20 +298,28 @@ export function isDefined<T>(value: T | undefined | null): value is T {
   return value != null
 }
 
+interface LookupFileOptions {
+  pathOnly?: boolean
+  rootDir?: string
+}
+
 export function lookupFile(
   dir: string,
   formats: string[],
-  pathOnly = false
+  options?: LookupFileOptions
 ): string | undefined {
   for (const format of formats) {
     const fullPath = path.join(dir, format)
     if (fs.existsSync(fullPath) && fs.statSync(fullPath).isFile()) {
-      return pathOnly ? fullPath : fs.readFileSync(fullPath, 'utf-8')
+      return options?.pathOnly ? fullPath : fs.readFileSync(fullPath, 'utf-8')
     }
   }
   const parentDir = path.dirname(dir)
-  if (parentDir !== dir) {
-    return lookupFile(parentDir, formats, pathOnly)
+  if (
+    parentDir !== dir &&
+    (!options?.rootDir || parentDir.startsWith(options?.rootDir))
+  ) {
+    return lookupFile(parentDir, formats, options)
   }
 }
 

From 882c8a82c8efbf2b9662049817c89991f433aaac Mon Sep 17 00:00:00 2001
From: casret <github@casret.com>
Date: Wed, 2 Mar 2022 23:39:18 -0800
Subject: [PATCH 33/50] fix: honor the host param when creating a websocket
 server (#5617)

---
 packages/vite/src/node/server/ws.ts | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/packages/vite/src/node/server/ws.ts b/packages/vite/src/node/server/ws.ts
index 498148933740ef..c8da5e4ab6e82f 100644
--- a/packages/vite/src/node/server/ws.ts
+++ b/packages/vite/src/node/server/ws.ts
@@ -42,6 +42,7 @@ export function createWebSocketServer(
   } else {
     const websocketServerOptions: ServerOptions = {}
     const port = (hmr && hmr.port) || 24678
+    const host = (hmr && hmr.host) || undefined
     if (httpsOptions) {
       // if we're serving the middlewares over https, the ws library doesn't support automatically creating an https server, so we need to do it ourselves
       // create an inline https server and mount the websocket server to it
@@ -60,11 +61,14 @@ export function createWebSocketServer(
         res.end(body)
       })
 
-      httpsServer.listen(port)
+      httpsServer.listen(port, host)
       websocketServerOptions.server = httpsServer
     } else {
       // we don't need to serve over https, just let ws handle its own server
       websocketServerOptions.port = port
+      if (host) {
+        websocketServerOptions.host = host
+      }
     }
 
     // vite dev server in middleware mode

From 8d0fc90b1d8e3bc2d0da94c5acceda7569ed6d86 Mon Sep 17 00:00:00 2001
From: Alec Larson <1925840+aleclarson@users.noreply.github.com>
Date: Thu, 3 Mar 2022 02:42:34 -0500
Subject: [PATCH 34/50] feat: add `importedCss` and `importedAssets` to
 RenderedChunk type (#6629)

Co-authored-by: Maximo Mussini <maximomussini@gmail.com>
---
 packages/vite/src/node/index.ts               |  9 ++++++
 packages/vite/src/node/plugins/asset.ts       | 15 ++-------
 packages/vite/src/node/plugins/css.ts         | 28 +++++------------
 packages/vite/src/node/plugins/html.ts        | 30 +++++++++---------
 .../src/node/plugins/importAnalysisBuild.ts   | 20 ++++--------
 packages/vite/src/node/plugins/index.ts       |  2 ++
 packages/vite/src/node/plugins/manifest.ts    | 13 +++-----
 packages/vite/src/node/plugins/metadata.ts    | 23 ++++++++++++++
 .../vite/src/node/ssr/ssrManifestPlugin.ts    | 31 ++++++-------------
 9 files changed, 77 insertions(+), 94 deletions(-)
 create mode 100644 packages/vite/src/node/plugins/metadata.ts

diff --git a/packages/vite/src/node/index.ts b/packages/vite/src/node/index.ts
index aea96d14d758be..a6d74e5dfd46fc 100644
--- a/packages/vite/src/node/index.ts
+++ b/packages/vite/src/node/index.ts
@@ -58,6 +58,7 @@ export type {
   HtmlTagDescriptor
 } from './plugins/html'
 export type { CSSOptions, CSSModulesOptions } from './plugins/css'
+export type { ChunkMetadata } from './plugins/metadata'
 export type { JsonOptions } from './plugins/json'
 export type { TransformOptions as EsbuildTransformOptions } from 'esbuild'
 export type { ESBuildOptions, ESBuildTransformResult } from './plugins/esbuild'
@@ -95,3 +96,11 @@ export type { Terser } from 'types/terser'
 export type { RollupCommonJSOptions } from 'types/commonjs'
 export type { RollupDynamicImportVarsOptions } from 'types/dynamicImportVars'
 export type { Matcher, AnymatchPattern, AnymatchFn } from 'types/anymatch'
+
+import type { ChunkMetadata } from './plugins/metadata'
+
+declare module 'rollup' {
+  export interface RenderedChunk {
+    viteMetadata: ChunkMetadata
+  }
+}
diff --git a/packages/vite/src/node/plugins/asset.ts b/packages/vite/src/node/plugins/asset.ts
index 3c7681ad6f0bb8..d3426094f32e53 100644
--- a/packages/vite/src/node/plugins/asset.ts
+++ b/packages/vite/src/node/plugins/asset.ts
@@ -6,7 +6,7 @@ import type { Plugin } from '../plugin'
 import type { ResolvedConfig } from '../config'
 import { cleanUrl } from '../utils'
 import { FS_PREFIX } from '../constants'
-import type { OutputOptions, PluginContext, RenderedChunk } from 'rollup'
+import type { OutputOptions, PluginContext } from 'rollup'
 import MagicString from 'magic-string'
 import { createHash } from 'crypto'
 import { normalizePath } from '../utils'
@@ -16,8 +16,6 @@ export const assetUrlRE = /__VITE_ASSET__([a-z\d]{8})__(?:\$_(.*?)__)?/g
 const rawRE = /(\?|&)raw(?:&|$)/
 const urlRE = /(\?|&)url(?:&|$)/
 
-export const chunkToEmittedAssetsMap = new WeakMap<RenderedChunk, Set<string>>()
-
 const assetCache = new WeakMap<ResolvedConfig, Map<string, string>>()
 
 const assetHashToFilenameMap = new WeakMap<
@@ -100,7 +98,7 @@ export function assetPlugin(config: ResolvedConfig): Plugin {
         // some internal plugins may still need to emit chunks (e.g. worker) so
         // fallback to this.getFileName for that.
         const file = getAssetFilename(hash, config) || this.getFileName(hash)
-        registerAssetToChunk(chunk, file)
+        chunk.viteMetadata.importedAssets.add(cleanUrl(file))
         const outputFilepath = config.base + file + postfix
         s.overwrite(match.index, match.index + full.length, outputFilepath)
       }
@@ -131,15 +129,6 @@ export function assetPlugin(config: ResolvedConfig): Plugin {
   }
 }
 
-export function registerAssetToChunk(chunk: RenderedChunk, file: string): void {
-  let emitted = chunkToEmittedAssetsMap.get(chunk)
-  if (!emitted) {
-    emitted = new Set()
-    chunkToEmittedAssetsMap.set(chunk, emitted)
-  }
-  emitted.add(cleanUrl(file))
-}
-
 export function checkPublicFile(
   url: string,
   { publicDir }: ResolvedConfig
diff --git a/packages/vite/src/node/plugins/css.ts b/packages/vite/src/node/plugins/css.ts
index cb62b785732e0d..85eec565ebb86a 100644
--- a/packages/vite/src/node/plugins/css.ts
+++ b/packages/vite/src/node/plugins/css.ts
@@ -30,7 +30,6 @@ import type { ResolveFn, ViteDevServer } from '../'
 import {
   getAssetFilename,
   assetUrlRE,
-  registerAssetToChunk,
   fileToUrl,
   checkPublicFile
 } from './asset'
@@ -120,11 +119,6 @@ const cssModulesCache = new WeakMap<
   Map<string, Record<string, string>>
 >()
 
-export const chunkToEmittedCssFileMap = new WeakMap<
-  RenderedChunk,
-  Set<string>
->()
-
 export const removedPureCssFilesCache = new WeakMap<
   ResolvedConfig,
   Map<string, RenderedChunk>
@@ -390,7 +384,7 @@ export function cssPostPlugin(config: ResolvedConfig): Plugin {
         const isRelativeBase = config.base === '' || config.base.startsWith('.')
         css = css.replace(assetUrlRE, (_, fileHash, postfix = '') => {
           const filename = getAssetFilename(fileHash, config) + postfix
-          registerAssetToChunk(chunk, filename)
+          chunk.viteMetadata.importedAssets.add(cleanUrl(filename))
           if (!isRelativeBase || inlined) {
             // absolute base or relative base but inlined (injected as style tag into
             // index.html) use the base as-is
@@ -427,10 +421,7 @@ export function cssPostPlugin(config: ResolvedConfig): Plugin {
             type: 'asset',
             source: chunkCSS
           })
-          chunkToEmittedCssFileMap.set(
-            chunk,
-            new Set([this.getFileName(fileHandle)])
-          )
+          chunk.viteMetadata.importedCss.add(this.getFileName(fileHandle))
         } else if (!config.build.ssr) {
           // legacy build, inline css
           chunkCSS = await processChunkCSS(chunkCSS, {
@@ -493,17 +484,12 @@ export function cssPostPlugin(config: ResolvedConfig): Plugin {
             // chunks instead.
             chunk.imports = chunk.imports.filter((file) => {
               if (pureCssChunks.has(file)) {
-                const css = chunkToEmittedCssFileMap.get(
-                  bundle[file] as OutputChunk
+                const {
+                  viteMetadata: { importedCss }
+                } = bundle[file] as OutputChunk
+                importedCss.forEach((file) =>
+                  chunk.viteMetadata.importedCss.add(file)
                 )
-                if (css) {
-                  let existing = chunkToEmittedCssFileMap.get(chunk)
-                  if (!existing) {
-                    existing = new Set()
-                  }
-                  css.forEach((file) => existing!.add(file))
-                  chunkToEmittedCssFileMap.set(chunk, existing)
-                }
                 return false
               }
               return true
diff --git a/packages/vite/src/node/plugins/html.ts b/packages/vite/src/node/plugins/html.ts
index 7f8a750c72bf22..f2fd4aca98ff2f 100644
--- a/packages/vite/src/node/plugins/html.ts
+++ b/packages/vite/src/node/plugins/html.ts
@@ -24,7 +24,7 @@ import {
   urlToBuiltUrl,
   getAssetFilename
 } from './asset'
-import { isCSSRequest, chunkToEmittedCssFileMap } from './css'
+import { isCSSRequest } from './css'
 import { modulePreloadPolyfillId } from './modulePreloadPolyfill'
 import type {
   AttributeNode,
@@ -511,21 +511,19 @@ export function buildHtmlPlugin(config: ResolvedConfig): Plugin {
           })
         }
 
-        const cssFiles = chunkToEmittedCssFileMap.get(chunk)
-        if (cssFiles) {
-          cssFiles.forEach((file) => {
-            if (!seen.has(file)) {
-              seen.add(file)
-              tags.push({
-                tag: 'link',
-                attrs: {
-                  rel: 'stylesheet',
-                  href: toPublicPath(file, config)
-                }
-              })
-            }
-          })
-        }
+        chunk.viteMetadata.importedCss.forEach((file) => {
+          if (!seen.has(file)) {
+            seen.add(file)
+            tags.push({
+              tag: 'link',
+              attrs: {
+                rel: 'stylesheet',
+                href: toPublicPath(file, config)
+              }
+            })
+          }
+        })
+
         return tags
       }
 
diff --git a/packages/vite/src/node/plugins/importAnalysisBuild.ts b/packages/vite/src/node/plugins/importAnalysisBuild.ts
index d816d4c1995fd8..41d9671a853cdd 100644
--- a/packages/vite/src/node/plugins/importAnalysisBuild.ts
+++ b/packages/vite/src/node/plugins/importAnalysisBuild.ts
@@ -5,11 +5,7 @@ import MagicString from 'magic-string'
 import type { ImportSpecifier } from 'es-module-lexer'
 import { init, parse as parseImports } from 'es-module-lexer'
 import type { OutputChunk } from 'rollup'
-import {
-  chunkToEmittedCssFileMap,
-  isCSSRequest,
-  removedPureCssFilesCache
-} from './css'
+import { isCSSRequest, removedPureCssFilesCache } from './css'
 import { transformImportGlob } from '../importGlob'
 import { bareImportRE } from '../utils'
 
@@ -283,21 +279,17 @@ export function buildImportAnalysisPlugin(config: ResolvedConfig): Plugin {
                   const chunk = bundle[filename] as OutputChunk | undefined
                   if (chunk) {
                     deps.add(chunk.fileName)
-                    const cssFiles = chunkToEmittedCssFileMap.get(chunk)
-                    if (cssFiles) {
-                      cssFiles.forEach((file) => {
-                        deps.add(file)
-                      })
-                    }
+                    chunk.viteMetadata.importedCss.forEach((file) => {
+                      deps.add(file)
+                    })
                     chunk.imports.forEach(addDeps)
                   } else {
                     const removedPureCssFiles =
                       removedPureCssFilesCache.get(config)!
                     const chunk = removedPureCssFiles.get(filename)
                     if (chunk) {
-                      const cssFiles = chunkToEmittedCssFileMap.get(chunk)
-                      if (cssFiles && cssFiles.size > 0) {
-                        cssFiles.forEach((file) => {
+                      if (chunk.viteMetadata.importedCss.size) {
+                        chunk.viteMetadata.importedCss.forEach((file) => {
                           deps.add(file)
                         })
                         hasRemovedPureCssChunk = true
diff --git a/packages/vite/src/node/plugins/index.ts b/packages/vite/src/node/plugins/index.ts
index e4f3d453527af3..5213714febb12b 100644
--- a/packages/vite/src/node/plugins/index.ts
+++ b/packages/vite/src/node/plugins/index.ts
@@ -16,6 +16,7 @@ import { preAliasPlugin } from './preAlias'
 import { definePlugin } from './define'
 import { ssrRequireHookPlugin } from './ssrRequireHook'
 import { workerImportMetaUrlPlugin } from './workerImportMetaUrl'
+import { metadataPlugin } from './metadata'
 
 export async function resolvePlugins(
   config: ResolvedConfig,
@@ -30,6 +31,7 @@ export async function resolvePlugins(
     : { pre: [], post: [] }
 
   return [
+    isBuild ? metadataPlugin() : null,
     isBuild ? null : preAliasPlugin(),
     aliasPlugin({ entries: config.resolve.alias }),
     ...prePlugins,
diff --git a/packages/vite/src/node/plugins/manifest.ts b/packages/vite/src/node/plugins/manifest.ts
index d6dceb507ca946..02fbdce63eec78 100644
--- a/packages/vite/src/node/plugins/manifest.ts
+++ b/packages/vite/src/node/plugins/manifest.ts
@@ -2,8 +2,6 @@ import path from 'path'
 import type { OutputChunk } from 'rollup'
 import type { ResolvedConfig } from '..'
 import type { Plugin } from '../plugin'
-import { chunkToEmittedCssFileMap } from './css'
-import { chunkToEmittedAssetsMap } from './asset'
 import { normalizePath } from '../utils'
 
 export type Manifest = Record<string, ManifestChunk>
@@ -90,13 +88,12 @@ export function manifestPlugin(config: ResolvedConfig): Plugin {
           }
         }
 
-        const cssFiles = chunkToEmittedCssFileMap.get(chunk)
-        if (cssFiles) {
-          manifestChunk.css = [...cssFiles]
+        if (chunk.viteMetadata.importedCss.size) {
+          manifestChunk.css = [...chunk.viteMetadata.importedCss]
+        }
+        if (chunk.viteMetadata.importedAssets.size) {
+          manifestChunk.assets = [...chunk.viteMetadata.importedAssets]
         }
-
-        const assets = chunkToEmittedAssetsMap.get(chunk)
-        if (assets) [(manifestChunk.assets = [...assets])]
 
         return manifestChunk
       }
diff --git a/packages/vite/src/node/plugins/metadata.ts b/packages/vite/src/node/plugins/metadata.ts
new file mode 100644
index 00000000000000..2b617aca4c89c8
--- /dev/null
+++ b/packages/vite/src/node/plugins/metadata.ts
@@ -0,0 +1,23 @@
+import type { Plugin } from '../plugin'
+
+export interface ChunkMetadata {
+  importedAssets: Set<string>
+  importedCss: Set<string>
+}
+
+/**
+ * Prepares the rendered chunks to contain additional metadata during build.
+ */
+export function metadataPlugin(): Plugin {
+  return {
+    name: 'vite:build-metadata',
+
+    async renderChunk(_code, chunk) {
+      chunk.viteMetadata = {
+        importedAssets: new Set(),
+        importedCss: new Set()
+      }
+      return null
+    }
+  }
+}
diff --git a/packages/vite/src/node/ssr/ssrManifestPlugin.ts b/packages/vite/src/node/ssr/ssrManifestPlugin.ts
index 351c91349a3ca3..1e00853402ba5d 100644
--- a/packages/vite/src/node/ssr/ssrManifestPlugin.ts
+++ b/packages/vite/src/node/ssr/ssrManifestPlugin.ts
@@ -4,8 +4,6 @@ import type { ImportSpecifier } from 'es-module-lexer'
 import type { OutputChunk } from 'rollup'
 import type { ResolvedConfig } from '..'
 import type { Plugin } from '../plugin'
-import { chunkToEmittedCssFileMap } from '../plugins/css'
-import { chunkToEmittedAssetsMap } from '../plugins/asset'
 import { preloadMethod } from '../plugins/importAnalysisBuild'
 import { normalizePath } from '../utils'
 
@@ -20,29 +18,21 @@ export function ssrManifestPlugin(config: ResolvedConfig): Plugin {
       for (const file in bundle) {
         const chunk = bundle[file]
         if (chunk.type === 'chunk') {
-          // links for certain entry chunks are already generated in static HTML
-          // in those cases we only need to record info for non-entry chunks
-          const cssFiles = chunk.isEntry
-            ? null
-            : chunkToEmittedCssFileMap.get(chunk)
-          const assetFiles = chunkToEmittedAssetsMap.get(chunk)
           for (const id in chunk.modules) {
             const normalizedId = normalizePath(relative(config.root, id))
             const mappedChunks =
               ssrManifest[normalizedId] ?? (ssrManifest[normalizedId] = [])
             if (!chunk.isEntry) {
               mappedChunks.push(base + chunk.fileName)
-            }
-            if (cssFiles) {
-              cssFiles.forEach((file) => {
-                mappedChunks.push(base + file)
-              })
-            }
-            if (assetFiles) {
-              assetFiles.forEach((file) => {
+              // <link> tags for entry chunks are already generated in static HTML,
+              // so we only need to record info for non-entry chunks.
+              chunk.viteMetadata.importedCss.forEach((file) => {
                 mappedChunks.push(base + file)
               })
             }
+            chunk.viteMetadata.importedAssets.forEach((file) => {
+              mappedChunks.push(base + file)
+            })
           }
           if (chunk.code.includes(preloadMethod)) {
             // generate css deps map
@@ -74,12 +64,9 @@ export function ssrManifestPlugin(config: ResolvedConfig): Plugin {
                     analyzed.add(filename)
                     const chunk = bundle[filename] as OutputChunk | undefined
                     if (chunk) {
-                      const cssFiles = chunkToEmittedCssFileMap.get(chunk)
-                      if (cssFiles) {
-                        cssFiles.forEach((file) => {
-                          deps.push(`/${file}`)
-                        })
-                      }
+                      chunk.viteMetadata.importedCss.forEach((file) => {
+                        deps.push(`/${file}`)
+                      })
                       chunk.imports.forEach(addDeps)
                     }
                   }

From ce07a0ad6a2323fa3619a6e4de59fa792a988e21 Mon Sep 17 00:00:00 2001
From: clocher Zhong <jeoy_z@126.com>
Date: Thu, 3 Mar 2022 15:44:14 +0800
Subject: [PATCH 35/50] feat(config): hmr add disable port config (#6624)

Co-authored-by: zhongyi <zhongyi@kuaishou.com>
Co-authored-by: Bjorn Lu <bjornlu.dev@gmail.com>
---
 docs/config/index.md                           |  4 +++-
 packages/vite/src/client/client.ts             |  7 +++++--
 .../vite/src/node/plugins/clientInjections.ts  | 18 +++++++++---------
 packages/vite/src/node/server/hmr.ts           |  2 +-
 4 files changed, 18 insertions(+), 13 deletions(-)

diff --git a/docs/config/index.md b/docs/config/index.md
index d4ee7a96a6fa67..27234b01a9b4af 100644
--- a/docs/config/index.md
+++ b/docs/config/index.md
@@ -508,12 +508,14 @@ export default defineConfig(async ({ command, mode }) => {
 
 ### server.hmr
 
-- **Type:** `boolean | { protocol?: string, host?: string, port?: number, path?: string, timeout?: number, overlay?: boolean, clientPort?: number, server?: Server }`
+- **Type:** `boolean | { protocol?: string, host?: string, port?: number | false, path?: string, timeout?: number, overlay?: boolean, clientPort?: number, server?: Server }`
 
   Disable or configure HMR connection (in cases where the HMR websocket must use a different address from the http server).
 
   Set `server.hmr.overlay` to `false` to disable the server error overlay.
 
+  Set `server.hmr.port` to `false` when connecting to a domain without a port.
+
   `clientPort` is an advanced option that overrides the port only on the client side, allowing you to serve the websocket on a different port than the client code looks for it on. Useful if you're using an SSL proxy in front of your dev server.
 
   When using `server.middlewareMode` or `server.https`, assigning `server.hmr.server` to your HTTP(S) server will process HMR connection requests through your server. This can be helpful when using self-signed certificates or when you want to expose Vite over a network on a single port.
diff --git a/packages/vite/src/client/client.ts b/packages/vite/src/client/client.ts
index 076e11e1e31aba..a9e8fb639de958 100644
--- a/packages/vite/src/client/client.ts
+++ b/packages/vite/src/client/client.ts
@@ -15,7 +15,7 @@ import '@vite/env'
 declare const __BASE__: string
 declare const __HMR_PROTOCOL__: string
 declare const __HMR_HOSTNAME__: string
-declare const __HMR_PORT__: string
+declare const __HMR_PORT__: string | false
 declare const __HMR_TIMEOUT__: number
 declare const __HMR_ENABLE_OVERLAY__: boolean
 
@@ -24,7 +24,10 @@ console.log('[vite] connecting...')
 // use server configuration, then fallback to inference
 const socketProtocol =
   __HMR_PROTOCOL__ || (location.protocol === 'https:' ? 'wss' : 'ws')
-const socketHost = `${__HMR_HOSTNAME__ || location.hostname}:${__HMR_PORT__}`
+const socketHost = __HMR_PORT__
+  ? `${__HMR_HOSTNAME__ || location.hostname}:${__HMR_PORT__}`
+  : `${__HMR_HOSTNAME__ || location.hostname}`
+
 const socket = new WebSocket(`${socketProtocol}://${socketHost}`, 'vite-hmr')
 const base = __BASE__ || '/'
 
diff --git a/packages/vite/src/node/plugins/clientInjections.ts b/packages/vite/src/node/plugins/clientInjections.ts
index 1c9a0d393327c7..e86bec0826d72f 100644
--- a/packages/vite/src/node/plugins/clientInjections.ts
+++ b/packages/vite/src/node/plugins/clientInjections.ts
@@ -23,7 +23,7 @@ export function clientInjectionsPlugin(config: ResolvedConfig): Plugin {
         const protocol = options.protocol || null
         const timeout = options.timeout || 30000
         const overlay = options.overlay !== false
-        let port: number | string | undefined
+        let port: number | string | false | undefined
         if (isObject(config.server.hmr)) {
           port = config.server.hmr.clientPort || config.server.hmr.port
         }
@@ -41,14 +41,14 @@ export function clientInjectionsPlugin(config: ResolvedConfig): Plugin {
         }
 
         return code
-          .replace(`__MODE__`, JSON.stringify(config.mode))
-          .replace(`__BASE__`, JSON.stringify(config.base))
-          .replace(`__DEFINES__`, serializeDefine(config.define || {}))
-          .replace(`__HMR_PROTOCOL__`, JSON.stringify(protocol))
-          .replace(`__HMR_HOSTNAME__`, JSON.stringify(host))
-          .replace(`__HMR_PORT__`, JSON.stringify(port))
-          .replace(`__HMR_TIMEOUT__`, JSON.stringify(timeout))
-          .replace(`__HMR_ENABLE_OVERLAY__`, JSON.stringify(overlay))
+          .replace(/__MODE__/g, JSON.stringify(config.mode))
+          .replace(/__BASE__/g, JSON.stringify(config.base))
+          .replace(/__DEFINES__/g, serializeDefine(config.define || {}))
+          .replace(/__HMR_PROTOCOL__/g, JSON.stringify(protocol))
+          .replace(/__HMR_HOSTNAME__/g, JSON.stringify(host))
+          .replace(/__HMR_PORT__/g, JSON.stringify(port))
+          .replace(/__HMR_TIMEOUT__/g, JSON.stringify(timeout))
+          .replace(/__HMR_ENABLE_OVERLAY__/g, JSON.stringify(overlay))
       } else if (!options?.ssr && code.includes('process.env.NODE_ENV')) {
         // replace process.env.NODE_ENV instead of defining a global
         // for it to avoid shimming a `process` object during dev,
diff --git a/packages/vite/src/node/server/hmr.ts b/packages/vite/src/node/server/hmr.ts
index 3e5be4cf599c03..eae184a64f4773 100644
--- a/packages/vite/src/node/server/hmr.ts
+++ b/packages/vite/src/node/server/hmr.ts
@@ -18,7 +18,7 @@ const normalizedClientDir = normalizePath(CLIENT_DIR)
 export interface HmrOptions {
   protocol?: string
   host?: string
-  port?: number
+  port?: number | false
   clientPort?: number
   path?: string
   timeout?: number

From 47fbe29a9780bcb99b2a34e19b94c750f39e88c6 Mon Sep 17 00:00:00 2001
From: Bjorn Lu <bjornlu.dev@gmail.com>
Date: Thu, 3 Mar 2022 16:31:46 +0800
Subject: [PATCH 36/50] fix: restart optimize (#7004)

---
 packages/vite/src/node/server/index.ts | 26 +++++++++++++++++++++-----
 1 file changed, 21 insertions(+), 5 deletions(-)

diff --git a/packages/vite/src/node/server/index.ts b/packages/vite/src/node/server/index.ts
index 77e33cd31a0995..f80e471028794f 100644
--- a/packages/vite/src/node/server/index.ts
+++ b/packages/vite/src/node/server/index.ts
@@ -10,7 +10,7 @@ import chokidar from 'chokidar'
 import type { CommonServerOptions } from '../http'
 import { resolveHttpsConfig, resolveHttpServer, httpServerStart } from '../http'
 import type { InlineConfig, ResolvedConfig } from '../config'
-import { resolveConfig } from '../config'
+import { mergeConfig, resolveConfig } from '../config'
 import type { PluginContainer } from './pluginContainer'
 import { createPluginContainer } from './pluginContainer'
 import type { FSWatcher, WatchOptions } from 'types/chokidar'
@@ -409,7 +409,7 @@ export async function createServer(
         throw new Error('cannot print server URLs in middleware mode.')
       }
     },
-    async restart(forceOptimize: boolean) {
+    async restart(forceOptimize?: boolean) {
       if (!server._restartPromise) {
         server._forceOptimizeOnRestart = !!forceOptimize
         server._restartPromise = restartServer(server).finally(() => {
@@ -574,7 +574,7 @@ export async function createServer(
     try {
       server._optimizeDepsMetadata = await optimizeDeps(
         config,
-        config.server.force || server._forceOptimizeOnRestart
+        config.server.force
       )
     } finally {
       server._isRunningOptimizer = false
@@ -743,9 +743,18 @@ async function restartServer(server: ViteDevServer) {
 
   await server.close()
 
+  let inlineConfig = server.config.inlineConfig
+  if (server._forceOptimizeOnRestart) {
+    inlineConfig = mergeConfig(inlineConfig, {
+      server: {
+        force: true
+      }
+    })
+  }
+
   let newServer = null
   try {
-    newServer = await createServer(server.config.inlineConfig)
+    newServer = await createServer(inlineConfig)
   } catch (err: any) {
     server.config.logger.error(err.message, {
       timestamp: true
@@ -754,7 +763,11 @@ async function restartServer(server: ViteDevServer) {
   }
 
   for (const key in newServer) {
-    if (key !== 'app') {
+    if (key === '_restartPromise') {
+      // prevent new server `restart` function from calling
+      // @ts-ignore
+      newServer[key] = server[key]
+    } else if (key !== 'app') {
       // @ts-ignore
       server[key] = newServer[key]
     }
@@ -774,4 +787,7 @@ async function restartServer(server: ViteDevServer) {
   } else {
     logger.info('server restarted.', { timestamp: true })
   }
+
+  // new server (the current server) can restart now
+  newServer._restartPromise = null
 }

From 993ea391a601a44c3da3aa325a0d1c2e0331f9d4 Mon Sep 17 00:00:00 2001
From: Dominik G <dominik.goepel@gmx.de>
Date: Thu, 3 Mar 2022 09:34:01 +0100
Subject: [PATCH 37/50] feat(perf): tsconfck perf improvement (#7055)

---
 packages/vite/package.json                |  2 +-
 packages/vite/src/node/plugins/esbuild.ts | 53 +++++++++++++++++------
 pnpm-lock.yaml                            | 14 +++---
 3 files changed, 47 insertions(+), 22 deletions(-)

diff --git a/packages/vite/package.json b/packages/vite/package.json
index 72bb90249a0286..2e0baac210a650 100644
--- a/packages/vite/package.json
+++ b/packages/vite/package.json
@@ -113,7 +113,7 @@
     "source-map-support": "^0.5.21",
     "strip-ansi": "^6.0.1",
     "terser": "^5.10.0",
-    "tsconfck": "1.1.2",
+    "tsconfck": "^1.2.0",
     "tslib": "^2.3.1",
     "types": "link:./types",
     "ws": "^8.5.0"
diff --git a/packages/vite/src/node/plugins/esbuild.ts b/packages/vite/src/node/plugins/esbuild.ts
index e0a7f884e000be..f0e25945828f49 100644
--- a/packages/vite/src/node/plugins/esbuild.ts
+++ b/packages/vite/src/node/plugins/esbuild.ts
@@ -20,8 +20,9 @@ import type { SourceMap } from 'rollup'
 import type { ResolvedConfig, ViteDevServer } from '..'
 import { createFilter } from '@rollup/pluginutils'
 import { combineSourcemaps } from '../utils'
-import type { TSConfckParseResult } from 'tsconfck'
-import { parse, TSConfckParseError } from 'tsconfck'
+import type { TSConfckParseOptions, TSConfckParseResult } from 'tsconfck'
+import { parse, findAll, TSConfckParseError } from 'tsconfck'
+import { searchForWorkspaceRoot } from '..'
 
 const debug = createDebugger('vite:esbuild')
 
@@ -179,6 +180,9 @@ export function esbuildPlugin(options: ESBuildOptions = {}): Plugin {
         .on('change', reloadOnTsconfigChange)
         .on('unlink', reloadOnTsconfigChange)
     },
+    async configResolved(config) {
+      await initTSConfck(config)
+    },
     buildEnd() {
       // recycle serve to avoid preventing Node self-exit (#6815)
       server = null as any
@@ -224,6 +228,9 @@ const rollupToEsbuildFormatMap: Record<
 export const buildEsbuildPlugin = (config: ResolvedConfig): Plugin => {
   return {
     name: 'vite:esbuild-transpile',
+    async configResolved(config) {
+      await initTSConfck(config)
+    },
     async renderChunk(code, chunk, opts) {
       // @ts-ignore injected by @vitejs/plugin-legacy
       if (opts.__vite_skip_esbuild__) {
@@ -274,15 +281,29 @@ function prettifyMessage(m: Message, code: string): string {
   return res + `\n`
 }
 
-const tsconfigCache = new Map<string, TSConfckParseResult>()
+const tsconfckParseOptions: TSConfckParseOptions = {
+  cache: new Map<string, TSConfckParseResult>(),
+  tsConfigPaths: undefined,
+  root: undefined,
+  resolveWithEmptyIfConfigNotFound: true
+}
+
+async function initTSConfck(config: ResolvedConfig) {
+  tsconfckParseOptions.cache!.clear()
+  const workspaceRoot = searchForWorkspaceRoot(config.root)
+  tsconfckParseOptions.root = workspaceRoot
+  tsconfckParseOptions.tsConfigPaths = new Set([
+    ...(await findAll(workspaceRoot, {
+      skip: (dir) => dir === 'node_modules' || dir === '.git'
+    }))
+  ])
+}
+
 async function loadTsconfigJsonForFile(
   filename: string
 ): Promise<TSConfigJSON> {
   try {
-    const result = await parse(filename, {
-      cache: tsconfigCache,
-      resolveWithEmptyIfConfigNotFound: true
-    })
+    const result = await parse(filename, tsconfckParseOptions)
     // tsconfig could be out of root, make sure it is watched on dev
     if (server && result.tsconfigFile !== 'no_tsconfig_file_found') {
       ensureWatchedFile(server.watcher, result.tsconfigFile, server.config.root)
@@ -304,20 +325,24 @@ function reloadOnTsconfigChange(changedFile: string) {
   // any json file in the tsconfig cache could have been used to compile ts
   if (
     path.basename(changedFile) === 'tsconfig.json' ||
-    (changedFile.endsWith('.json') && tsconfigCache.has(changedFile))
+    (changedFile.endsWith('.json') &&
+      tsconfckParseOptions?.cache?.has(changedFile))
   ) {
     server.config.logger.info(
       `changed tsconfig file detected: ${changedFile} - Clearing cache and forcing full-reload to ensure typescript is compiled with updated config values.`,
       { clear: server.config.clearScreen, timestamp: true }
     )
-    // clear tsconfig cache so that recompile works with up2date configs
-    tsconfigCache.clear()
+
     // clear module graph to remove code compiled with outdated config
     server.moduleGraph.invalidateAll()
-    // force full reload
-    server.ws.send({
-      type: 'full-reload',
-      path: '*'
+
+    // reset tsconfck so that recompile works with up2date configs
+    initTSConfck(server.config).finally(() => {
+      // force full reload
+      server.ws.send({
+        type: 'full-reload',
+        path: '*'
+      })
     })
   }
 }
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 943c918f8ad2aa..0b5ce9e20bf63b 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -808,7 +808,7 @@ importers:
       source-map-support: ^0.5.21
       strip-ansi: ^6.0.1
       terser: ^5.10.0
-      tsconfck: 1.1.2
+      tsconfck: ^1.2.0
       tslib: ^2.3.1
       types: link:./types
       ws: ^8.5.0
@@ -881,7 +881,7 @@ importers:
       source-map-support: 0.5.21
       strip-ansi: 6.0.1
       terser: 5.10.0_acorn@8.7.0
-      tsconfck: 1.1.2_typescript@4.5.4
+      tsconfck: 1.2.0_typescript@4.5.4
       tslib: 2.3.1
       types: link:types
       ws: 8.5.0
@@ -3108,7 +3108,7 @@ packages:
     resolution: {integrity: sha512-oagLNqpfNv7CvmyMoexMDNyVDSiq1rya0AEUgcLlNHdHgNl6U/hi8xY370n5y+ZIFEXOx0J4B1qF2NDjMRxklA==}
     engines: {node: '>=6.0.0'}
     dependencies:
-      pvutils: 1.0.17
+      pvutils: 1.1.2
     dev: true
 
   /assert-never/1.2.1:
@@ -7695,8 +7695,8 @@ packages:
       tslib: 2.3.1
     dev: true
 
-  /pvutils/1.0.17:
-    resolution: {integrity: sha512-wLHYUQxWaXVQvKnwIDWFVKDJku9XDCvyhhxoq8dc5MFdIlRenyPI9eSfEtcvgHgD7FlvCyGAlWgOzRnZD99GZQ==}
+  /pvutils/1.1.2:
+    resolution: {integrity: sha512-wlo0BUInyP+ZgBJHV8PnJW8S2HubdQfMMip8B9yXr9aFlauJFuF1jZ/RWFmzGYitC7GxkxqXdwbY9/R97v+Cqg==}
     engines: {node: '>=6.0.0'}
     dev: true
 
@@ -8921,8 +8921,8 @@ packages:
       yn: 3.1.1
     dev: true
 
-  /tsconfck/1.1.2_typescript@4.5.4:
-    resolution: {integrity: sha512-n6SkiUQ784Uu2pviyd0j2kspm/fipdjO5jZuR8zUHVVoQeRnR6BSV5zlbheDmpyP0lj7GvHWvFcaxxhUFrzQWQ==}
+  /tsconfck/1.2.0_typescript@4.5.4:
+    resolution: {integrity: sha512-uKBM6x6i5e7Tfof5Zhll2ypgYKwWZhsxsHOoCH/7enlcHjjlcZ8FnxFrqgVFtpN6ymzZX3zoDaVGIlkh/g4x6w==}
     engines: {node: ^12.20 || ^14.13.1 || >= 16}
     hasBin: true
     peerDependencies:

From f02f961f955277469b971cd35ffdb26d5fa95784 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Fran=C3=A7ois=20Wouts?= <f@zenc.io>
Date: Thu, 3 Mar 2022 09:31:45 +0000
Subject: [PATCH 38/50] fix: update postcss-load-config to load PostCSS plugins
 based on their config file path (#6856)

---
 .npmrc                                        |   7 ++++
 .../backend-integration/package.json          |   3 ++
 .../postcss-plugins-different-dir.spec.ts     |  29 +++++++++++++++++
 packages/playground/css/package.json          |   1 +
 packages/playground/legacy/package.json       |   3 +-
 .../multiple-entrypoints/package.json         |   4 +++
 .../playground/tailwind/src/views/Page.vue    |   4 ++-
 packages/playground/testUtils.ts              |   5 +++
 packages/playground/vue/public/favicon.ico    | Bin 0 -> 4286 bytes
 packages/vite/LICENSE.md                      |   2 +-
 packages/vite/package.json                    |   2 +-
 pnpm-lock.yaml                                |  30 ++++++++++++------
 12 files changed, 77 insertions(+), 13 deletions(-)
 create mode 100644 .npmrc
 create mode 100644 packages/playground/css/__tests__/postcss-plugins-different-dir.spec.ts
 create mode 100644 packages/playground/vue/public/favicon.ico

diff --git a/.npmrc b/.npmrc
new file mode 100644
index 00000000000000..4abbb42e5ef159
--- /dev/null
+++ b/.npmrc
@@ -0,0 +1,7 @@
+hoist-pattern[]=*eslint*
+hoist-pattern[]=*babel*
+hoist-pattern[]=*jest*
+hoist-pattern[]=@emotion/*
+hoist-pattern[]=postcss
+hoist-pattern[]=pug
+hoist-pattern[]=source-map-support
diff --git a/packages/playground/backend-integration/package.json b/packages/playground/backend-integration/package.json
index afbdb63d356a8b..b3d9b064db16e2 100644
--- a/packages/playground/backend-integration/package.json
+++ b/packages/playground/backend-integration/package.json
@@ -10,5 +10,8 @@
   },
   "dependencies": {
     "tailwindcss": "^2.2.19"
+  },
+  "devDependencies": {
+    "fast-glob": "^3.2.11"
   }
 }
diff --git a/packages/playground/css/__tests__/postcss-plugins-different-dir.spec.ts b/packages/playground/css/__tests__/postcss-plugins-different-dir.spec.ts
new file mode 100644
index 00000000000000..48500740b64613
--- /dev/null
+++ b/packages/playground/css/__tests__/postcss-plugins-different-dir.spec.ts
@@ -0,0 +1,29 @@
+import { getColor, getBgColor } from '../../testUtils'
+import { createServer } from 'vite'
+import path from 'path'
+
+// Regression test for https://github.com/vitejs/vite/issues/4000
+test('postcss plugins in different dir', async () => {
+  const port = 5005
+  const server = await createServer({
+    root: path.join(__dirname, '..', '..', 'tailwind'),
+    logLevel: 'silent',
+    server: {
+      port,
+      strictPort: true
+    },
+    build: {
+      // skip transpilation during tests to make it faster
+      target: 'esnext'
+    }
+  })
+  await server.listen()
+  try {
+    await page.goto(`http://localhost:${port}`)
+    const tailwindStyle = await page.$('.tailwind-style')
+    expect(await getBgColor(tailwindStyle)).toBe('rgb(254, 226, 226)')
+    expect(await getColor(tailwindStyle)).toBe('rgb(136, 136, 136)')
+  } finally {
+    await server.close()
+  }
+})
diff --git a/packages/playground/css/package.json b/packages/playground/css/package.json
index 13a58874578c09..b45063100be089 100644
--- a/packages/playground/css/package.json
+++ b/packages/playground/css/package.json
@@ -10,6 +10,7 @@
   },
   "devDependencies": {
     "css-dep": "link:./css-dep",
+    "fast-glob": "^3.2.11",
     "less": "^4.1.2",
     "postcss-nested": "^5.0.6",
     "sass": "^1.43.4",
diff --git a/packages/playground/legacy/package.json b/packages/playground/legacy/package.json
index 177aa5a0a5078b..3a3315c42aa832 100644
--- a/packages/playground/legacy/package.json
+++ b/packages/playground/legacy/package.json
@@ -10,6 +10,7 @@
     "preview": "vite preview"
   },
   "devDependencies": {
-    "@vitejs/plugin-legacy": "workspace:*"
+    "@vitejs/plugin-legacy": "workspace:*",
+    "express": "^4.17.1"
   }
 }
diff --git a/packages/playground/multiple-entrypoints/package.json b/packages/playground/multiple-entrypoints/package.json
index 7b4dab889c472e..6c338a64518ddb 100644
--- a/packages/playground/multiple-entrypoints/package.json
+++ b/packages/playground/multiple-entrypoints/package.json
@@ -7,5 +7,9 @@
     "build": "vite build",
     "debug": "node --inspect-brk ../../vite/bin/vite",
     "preview": "vite preview"
+  },
+  "devDependencies": {
+    "fast-glob": "^3.2.11",
+    "sass": "^1.43.4"
   }
 }
diff --git a/packages/playground/tailwind/src/views/Page.vue b/packages/playground/tailwind/src/views/Page.vue
index ec59b44238c733..764a2a18e54fdb 100644
--- a/packages/playground/tailwind/src/views/Page.vue
+++ b/packages/playground/tailwind/src/views/Page.vue
@@ -2,7 +2,9 @@
   <div>
     <h1 id="pagetitle" class="text-[rgb(11,22,33)] text-2xl">|Page title|</h1>
     <div @click="val = val + 1">{{ val }}</div>
-    <div class="bg-red-100 inline-block h-24 px-8 mb-8 text-[#888888]">
+    <div
+      class="tailwind-style bg-red-100 inline-block h-24 px-8 mb-8 text-[#888888]"
+    >
       Tailwind style
     </div>
     <HelloWorld />
diff --git a/packages/playground/testUtils.ts b/packages/playground/testUtils.ts
index 0ae0c6e8766e95..0c8186d4ed121d 100644
--- a/packages/playground/testUtils.ts
+++ b/packages/playground/testUtils.ts
@@ -64,6 +64,11 @@ export async function getBg(el: string | ElementHandle): Promise<string> {
   return el.evaluate((el) => getComputedStyle(el as Element).backgroundImage)
 }
 
+export async function getBgColor(el: string | ElementHandle): Promise<string> {
+  el = await toEl(el)
+  return el.evaluate((el) => getComputedStyle(el as Element).backgroundColor)
+}
+
 export function readFile(filename: string): string {
   return fs.readFileSync(path.resolve(testDir, filename), 'utf-8')
 }
diff --git a/packages/playground/vue/public/favicon.ico b/packages/playground/vue/public/favicon.ico
new file mode 100644
index 0000000000000000000000000000000000000000..df36fcfb72584e00488330b560ebcf34a41c64c2
GIT binary patch
literal 4286
zcmds*O-Phc6o&64GDVCEQHxsW(p4>LW*W<827=Unuo8sGpRux(DN@jWP-e29Wl%wj
zY84_aq9}^Am9-cWTD5GGEo#+5Fi2wX_P*bo+xO!)p*7B;iKlbFd(U~_d(U?#hLj56
zPhFkj-|A6~Qk#@g^#D^U0XT1cu=c-vu1+SElX9NR;kzAUV(q0|dl0|%h|dI$%VICy
zJnu2^L*Te9JrJMGh%-P79CL0}dq92RGU6gI{v2~|)p}sG5x0U*z<8U;Ij*hB9z?ei
z@g6Xq-pDoPl=MANPiR7%172VA%r)kev<ISBgE$F{SFy+(=9Z)f)De0Se}ZDZW}Z3B
zElCeVrw;K0Fdl_Cg=gZOFXXc3pL)Q05CAuT+XucQ<8g~3dteP~|7s7c6QYP;fy;mF
zMN;>tV-_5H*QJKFmd;8yA$98zCxBZYXTNZ#QFk2(TX0;Y2dt&WitL#$96|gJY=3xX
zpCoi|YNzgO3R`f@IiEeSmKrPSf#h#Qd<$%Ej^RIeeYfsxhPMOG`S`Pz8q``=511zm
zAm)MX5AV^5xIWPyEu7u>qYs?pn$I4nL9J!=K=SGlKLXpE<5x+2cDTXq?brj?n6sp=
zphe9;_JHf40^9~}9i08r{XM$7HB!`{Ys~TK0kx<}ZQng`UPvH*11|q7&l9?@FQz;8
zx!=3<4seY*%=OlbCbcae?<QnEgvj4i?s}Yk=qA2z`-^*<eK3c)MS4JOdbsTQEOa0)
z0NWqlna2rzs>5^V_}*K>Uo6ZWV8mTyE^B=DKy7-sdLYkR5Z?paTgK-zyIkKjIcpyO
z{+uIt&YSa_$QnN_@t~L014dyK(fOOo+W*MIxbA6Ndgr=Y!f#Tokqv}n<7-9qfHkc3
z=>a|HWqcX8fzQCT=dqVbogRq!-S>H%yA{1w#2Pn;=e>JiEj7Hl;zdt-2f+j2%DeVD
zsW0Ab)ZK@0cIW%W7<X*Er!BfRbvU93$DH%#v6dRt^6HBxz1xBNHx=$&_Gv<&J}Ljk
zJN<Fzx(`Oe@KgQ0F$<14=XV#WK`o#6Ku>z}H{&~yGhn~D;aiP4=;m-HCo`BEI+Kd6
z={Xwx{T<?%b6i9IjI)Ls)S{-*mq<@~R{?$}ZKjf;^k75i_}(2MXt}^SEBVg7AI@28
zo_uPg2V)_e-`2Ois=PYoe%9u*n9({PFR)OnHJPi{dNx>Kx<YG`4QQ>D#iCLfl2<BD
h7L=-;Q>vQGDitKtN>z|-AdCN|$jTFDg0m3O`WLD4_s#$S

literal 0
HcmV?d00001

diff --git a/packages/vite/LICENSE.md b/packages/vite/LICENSE.md
index 8b4d641a09f199..107329e4f89e81 100644
--- a/packages/vite/LICENSE.md
+++ b/packages/vite/LICENSE.md
@@ -3088,7 +3088,7 @@ Repository: https://github.com/postcss/postcss-import.git
 
 ## postcss-load-config
 License: MIT
-By: Michael Ciniawky, Ryan Dunckel, Mateusz Derks, Dalton Santos, Patrick Gilday
+By: Michael Ciniawky, Ryan Dunckel, Mateusz Derks, Dalton Santos, Patrick Gilday, François Wouts
 Repository: postcss/postcss-load-config
 
 > The MIT License (MIT)
diff --git a/packages/vite/package.json b/packages/vite/package.json
index 2e0baac210a650..f790184bf765f2 100644
--- a/packages/vite/package.json
+++ b/packages/vite/package.json
@@ -104,7 +104,7 @@
     "periscopic": "^2.0.3",
     "picocolors": "^1.0.0",
     "postcss-import": "^14.0.2",
-    "postcss-load-config": "^3.1.1",
+    "postcss-load-config": "^3.1.3",
     "postcss-modules": "^4.3.0",
     "resolve.exports": "^1.1.0",
     "rollup-plugin-license": "^2.6.1",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 0b5ce9e20bf63b..b7a9a8e96dc686 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -115,9 +115,12 @@ importers:
 
   packages/playground/backend-integration:
     specifiers:
+      fast-glob: ^3.2.11
       tailwindcss: ^2.2.19
     dependencies:
       tailwindcss: 2.2.19_ts-node@10.4.0
+    devDependencies:
+      fast-glob: 3.2.11
 
   packages/playground/cli:
     specifiers: {}
@@ -128,12 +131,14 @@ importers:
   packages/playground/css:
     specifiers:
       css-dep: link:./css-dep
+      fast-glob: ^3.2.11
       less: ^4.1.2
       postcss-nested: ^5.0.6
       sass: ^1.43.4
       stylus: ^0.55.0
     devDependencies:
       css-dep: link:css-dep
+      fast-glob: 3.2.11
       less: 4.1.2
       postcss-nested: 5.0.6
       sass: 1.45.1
@@ -215,14 +220,21 @@ importers:
   packages/playground/legacy:
     specifiers:
       '@vitejs/plugin-legacy': workspace:*
+      express: ^4.17.1
     devDependencies:
       '@vitejs/plugin-legacy': link:../../plugin-legacy
+      express: 4.17.2
 
   packages/playground/lib:
     specifiers: {}
 
   packages/playground/multiple-entrypoints:
-    specifiers: {}
+    specifiers:
+      fast-glob: ^3.2.11
+      sass: ^1.43.4
+    devDependencies:
+      fast-glob: 3.2.11
+      sass: 1.45.1
 
   packages/playground/nested-deps:
     specifiers:
@@ -797,7 +809,7 @@ importers:
       picocolors: ^1.0.0
       postcss: ^8.4.6
       postcss-import: ^14.0.2
-      postcss-load-config: ^3.1.1
+      postcss-load-config: ^3.1.3
       postcss-modules: ^4.3.0
       resolve: ^1.22.0
       resolve.exports: ^1.1.0
@@ -872,7 +884,7 @@ importers:
       periscopic: 2.0.3
       picocolors: 1.0.0
       postcss-import: 14.0.2_postcss@8.4.6
-      postcss-load-config: 3.1.1_ts-node@10.4.0
+      postcss-load-config: 3.1.3_ts-node@10.4.0
       postcss-modules: 4.3.0_postcss@8.4.6
       resolve.exports: 1.1.0
       rollup-plugin-license: 2.6.1_rollup@2.62.0
@@ -4816,7 +4828,6 @@ packages:
       glob-parent: 5.1.2
       merge2: 1.4.1
       micromatch: 4.0.4
-    dev: true
 
   /fast-glob/3.2.7:
     resolution: {integrity: sha512-rYGMRwip6lUMvYD3BTScMwT1HtAs2d71SMv66Vrxs0IekGZEjhM0pcMfjQPnknBt2zeCwQMEupiN02ZP4DiT1Q==}
@@ -4827,6 +4838,7 @@ packages:
       glob-parent: 5.1.2
       merge2: 1.4.1
       micromatch: 4.0.4
+    dev: true
 
   /fast-json-stable-stringify/2.1.0:
     resolution: {integrity: sha512-lhd/wF+Lk98HZoTCtlVraHtfh5XYijIjalXck7saUtuanSDyLMxnHhSXEDJqHxD7msR8D0uCmqlkwjCV8xvwHw==}
@@ -6145,7 +6157,7 @@ packages:
       '@types/node': 16.11.22
       chalk: 4.1.2
       ci-info: 3.3.0
-      graceful-fs: 4.2.8
+      graceful-fs: 4.2.9
       picomatch: 2.3.0
     dev: true
 
@@ -7355,8 +7367,8 @@ packages:
       yaml: 1.10.2
     dev: false
 
-  /postcss-load-config/3.1.1_ts-node@10.4.0:
-    resolution: {integrity: sha512-c/9XYboIbSEUZpiD1UQD0IKiUe8n9WHYV7YFe7X7J+ZwCsEKkUJSFWjS9hBU1RR9THR7jMXst8sxiqP0jjo2mg==}
+  /postcss-load-config/3.1.3_ts-node@10.4.0:
+    resolution: {integrity: sha512-5EYgaM9auHGtO//ljHH+v/aC/TQ5LHXtL7bQajNAUBKUVKiYE8rYpFms7+V26D9FncaGe2zwCoPQsFKb5zF/Hw==}
     engines: {node: '>= 10'}
     peerDependencies:
       ts-node: '>=9.0.0'
@@ -8616,7 +8628,7 @@ packages:
       detective: 5.2.0
       didyoumean: 1.2.2
       dlv: 1.1.3
-      fast-glob: 3.2.7
+      fast-glob: 3.2.11
       fs-extra: 10.0.0
       glob-parent: 6.0.2
       html-tags: 3.1.0
@@ -8660,7 +8672,7 @@ packages:
       detective: 5.2.0
       didyoumean: 1.2.2
       dlv: 1.1.3
-      fast-glob: 3.2.7
+      fast-glob: 3.2.11
       fs-extra: 10.0.0
       glob-parent: 6.0.2
       html-tags: 3.1.0

From 4517c2be5b432ffdd6d5abd0fb0d5dc0ea0afdaf Mon Sep 17 00:00:00 2001
From: patak <matias.capeletto@gmail.com>
Date: Thu, 3 Mar 2022 10:32:31 +0100
Subject: [PATCH 39/50] fix: reoptimize deps on esbuild options change (#6855)

---
 packages/vite/src/node/optimizer/index.ts | 8 +++++++-
 1 file changed, 7 insertions(+), 1 deletion(-)

diff --git a/packages/vite/src/node/optimizer/index.ts b/packages/vite/src/node/optimizer/index.ts
index c13a26c63b3c1c..da613273c4aa30 100644
--- a/packages/vite/src/node/optimizer/index.ts
+++ b/packages/vite/src/node/optimizer/index.ts
@@ -392,7 +392,13 @@ function getDepHash(root: string, config: ResolvedConfig): string {
       plugins: config.plugins.map((p) => p.name),
       optimizeDeps: {
         include: config.optimizeDeps?.include,
-        exclude: config.optimizeDeps?.exclude
+        exclude: config.optimizeDeps?.exclude,
+        esbuildOptions: {
+          ...config.optimizeDeps?.esbuildOptions,
+          plugins: config.optimizeDeps?.esbuildOptions?.plugins?.map(
+            (p) => p.name
+          )
+        }
       }
     },
     (_, value) => {

From c11af23287d2af1c39b2ff64daa9f08fb406e08c Mon Sep 17 00:00:00 2001
From: Bjorn Lu <bjornlu.dev@gmail.com>
Date: Thu, 3 Mar 2022 17:35:58 +0800
Subject: [PATCH 40/50] feat: optimize custom extensions (#6801)

---
 .../__tests__/optimize-deps.spec.ts           |  4 ++
 .../optimize-deps/dep-not-js/foo.js           |  1 +
 .../optimize-deps/dep-not-js/index.notjs      |  4 ++
 .../optimize-deps/dep-not-js/package.json     |  6 ++
 packages/playground/optimize-deps/index.html  |  6 ++
 .../playground/optimize-deps/package.json     |  1 +
 .../playground/optimize-deps/vite.config.js   | 38 +++++++++++
 .../src/node/optimizer/esbuildDepPlugin.ts    | 15 +++--
 packages/vite/src/node/optimizer/index.ts     | 64 +++++++++++++------
 packages/vite/src/node/optimizer/scan.ts      | 33 ++++++----
 pnpm-lock.yaml                                |  5 ++
 11 files changed, 140 insertions(+), 37 deletions(-)
 create mode 100644 packages/playground/optimize-deps/dep-not-js/foo.js
 create mode 100644 packages/playground/optimize-deps/dep-not-js/index.notjs
 create mode 100644 packages/playground/optimize-deps/dep-not-js/package.json

diff --git a/packages/playground/optimize-deps/__tests__/optimize-deps.spec.ts b/packages/playground/optimize-deps/__tests__/optimize-deps.spec.ts
index ad063cd04bba35..992627c6374df0 100644
--- a/packages/playground/optimize-deps/__tests__/optimize-deps.spec.ts
+++ b/packages/playground/optimize-deps/__tests__/optimize-deps.spec.ts
@@ -62,6 +62,10 @@ test('import * from optimized dep', async () => {
   expect(await page.textContent('.import-star')).toMatch(`[success]`)
 })
 
+test('import from dep with .notjs files', async () => {
+  expect(await page.textContent('.not-js')).toMatch(`[success]`)
+})
+
 test('dep with css import', async () => {
   expect(await getColor('h1')).toBe('red')
 })
diff --git a/packages/playground/optimize-deps/dep-not-js/foo.js b/packages/playground/optimize-deps/dep-not-js/foo.js
new file mode 100644
index 00000000000000..3d809780820c7b
--- /dev/null
+++ b/packages/playground/optimize-deps/dep-not-js/foo.js
@@ -0,0 +1 @@
+export const foo = '[success] imported from .notjs file'
diff --git a/packages/playground/optimize-deps/dep-not-js/index.notjs b/packages/playground/optimize-deps/dep-not-js/index.notjs
new file mode 100644
index 00000000000000..b4ef3a6936a797
--- /dev/null
+++ b/packages/playground/optimize-deps/dep-not-js/index.notjs
@@ -0,0 +1,4 @@
+<notjs>
+import { foo } from './foo'
+export const notjsValue = foo
+</notjs>
diff --git a/packages/playground/optimize-deps/dep-not-js/package.json b/packages/playground/optimize-deps/dep-not-js/package.json
new file mode 100644
index 00000000000000..39ebafb6217b6e
--- /dev/null
+++ b/packages/playground/optimize-deps/dep-not-js/package.json
@@ -0,0 +1,6 @@
+{
+  "name": "dep-not-js",
+  "private": true,
+  "version": "1.0.0",
+  "main": "index.notjs"
+}
diff --git a/packages/playground/optimize-deps/index.html b/packages/playground/optimize-deps/index.html
index 8451d968d2745b..e53e3375e79768 100644
--- a/packages/playground/optimize-deps/index.html
+++ b/packages/playground/optimize-deps/index.html
@@ -38,6 +38,9 @@ <h2>Optimizing force included dep even when it's linked</h2>
 <h2>import * as ...</h2>
 <div class="import-star"></div>
 
+<h2>Import from dependency with .notjs files</h2>
+<div class="not-js"></div>
+
 <h2>Dep w/ special file format supported via plugins</h2>
 <div class="plugin"></div>
 
@@ -73,6 +76,9 @@ <h2>Alias with colon</h2>
     text('.import-star', `[success] ${keys.join(', ')}`)
   }
 
+  import { notjsValue } from 'dep-not-js'
+  text('.not-js', notjsValue)
+
   import { createApp } from 'vue'
   import { createStore } from 'vuex'
   if (typeof createApp === 'function' && typeof createStore === 'function') {
diff --git a/packages/playground/optimize-deps/package.json b/packages/playground/optimize-deps/package.json
index 860474673685d3..09c578d684ffe7 100644
--- a/packages/playground/optimize-deps/package.json
+++ b/packages/playground/optimize-deps/package.json
@@ -17,6 +17,7 @@
     "dep-esbuild-plugin-transform": "file:./dep-esbuild-plugin-transform",
     "dep-linked": "link:./dep-linked",
     "dep-linked-include": "link:./dep-linked-include",
+    "dep-not-js": "file:./dep-not-js",
     "lodash-es": "^4.17.21",
     "nested-exclude": "file:./nested-exclude",
     "phoenix": "^1.6.2",
diff --git a/packages/playground/optimize-deps/vite.config.js b/packages/playground/optimize-deps/vite.config.js
index 1a0ac5afab87c9..a989cf1961de11 100644
--- a/packages/playground/optimize-deps/vite.config.js
+++ b/packages/playground/optimize-deps/vite.config.js
@@ -1,3 +1,4 @@
+const fs = require('fs')
 const vue = require('@vitejs/plugin-vue')
 
 /**
@@ -39,6 +40,7 @@ module.exports = {
 
   plugins: [
     vue(),
+    notjs(),
     // for axios request test
     {
       name: 'mock',
@@ -51,3 +53,39 @@ module.exports = {
     }
   ]
 }
+
+// Handles .notjs file, basically remove wrapping <notjs> and </notjs> tags
+function notjs() {
+  return {
+    name: 'notjs',
+    config() {
+      return {
+        optimizeDeps: {
+          extensions: ['.notjs'],
+          esbuildOptions: {
+            plugins: [
+              {
+                name: 'esbuild-notjs',
+                setup(build) {
+                  build.onLoad({ filter: /\.notjs$/ }, ({ path }) => {
+                    let contents = fs.readFileSync(path, 'utf-8')
+                    contents = contents
+                      .replace('<notjs>', '')
+                      .replace('</notjs>', '')
+                    return { contents, loader: 'js' }
+                  })
+                }
+              }
+            ]
+          }
+        }
+      }
+    },
+    transform(code, id) {
+      if (id.endsWith('.notjs')) {
+        code = code.replace('<notjs>', '').replace('</notjs>', '')
+        return { code }
+      }
+    }
+  }
+}
diff --git a/packages/vite/src/node/optimizer/esbuildDepPlugin.ts b/packages/vite/src/node/optimizer/esbuildDepPlugin.ts
index 6c778e2c8bf8d3..3ff86c213a54a2 100644
--- a/packages/vite/src/node/optimizer/esbuildDepPlugin.ts
+++ b/packages/vite/src/node/optimizer/esbuildDepPlugin.ts
@@ -1,5 +1,5 @@
 import path from 'path'
-import type { Loader, Plugin, ImportKind } from 'esbuild'
+import type { Plugin, ImportKind } from 'esbuild'
 import { KNOWN_ASSET_TYPES } from '../constants'
 import type { ResolvedConfig } from '..'
 import {
@@ -40,6 +40,13 @@ export function esbuildDepPlugin(
   config: ResolvedConfig,
   ssr?: boolean
 ): Plugin {
+  // remove optimizable extensions from `externalTypes` list
+  const allExternalTypes = config.optimizeDeps.extensions
+    ? externalTypes.filter(
+        (type) => !config.optimizeDeps.extensions?.includes('.' + type)
+      )
+    : externalTypes
+
   // default resolver which prefers ESM
   const _resolve = config.createResolver({ asSrc: false })
 
@@ -74,7 +81,7 @@ export function esbuildDepPlugin(
       // externalize assets and commonly known non-js file types
       build.onResolve(
         {
-          filter: new RegExp(`\\.(` + externalTypes.join('|') + `)(\\?.*)?$`)
+          filter: new RegExp(`\\.(` + allExternalTypes.join('|') + `)(\\?.*)?$`)
         },
         async ({ path: id, importer, kind }) => {
           const resolved = await resolve(id, importer, kind)
@@ -181,10 +188,8 @@ export function esbuildDepPlugin(
           }
         }
 
-        let ext = path.extname(entryFile).slice(1)
-        if (ext === 'mjs') ext = 'js'
         return {
-          loader: ext as Loader,
+          loader: 'js',
           contents,
           resolveDir: root
         }
diff --git a/packages/vite/src/node/optimizer/index.ts b/packages/vite/src/node/optimizer/index.ts
index da613273c4aa30..302ce66842a276 100644
--- a/packages/vite/src/node/optimizer/index.ts
+++ b/packages/vite/src/node/optimizer/index.ts
@@ -79,6 +79,16 @@ export interface DepOptimizationOptions {
    * @deprecated use `esbuildOptions.keepNames`
    */
   keepNames?: boolean
+  /**
+   * List of file extensions that can be optimized. A corresponding esbuild
+   * plugin must exist to handle the specific extension.
+   *
+   * By default, Vite can optimize `.mjs`, `.js`, and `.ts` files. This option
+   * allows specifying additional extensions.
+   *
+   * @experimental
+   */
+  extensions?: string[]
 }
 
 export interface DepOptimizationMetadata {
@@ -244,29 +254,43 @@ export async function optimizeDeps(
   for (const id in deps) {
     const flatId = flattenId(id)
     const filePath = (flatIdDeps[flatId] = deps[id])
-    const entryContent = fs.readFileSync(filePath, 'utf-8')
     let exportsData: ExportsData
-    try {
-      exportsData = parse(entryContent) as ExportsData
-    } catch {
-      debug(
-        `Unable to parse dependency: ${id}. Trying again with a JSX transform.`
-      )
-      const transformed = await transformWithEsbuild(entryContent, filePath, {
-        loader: 'jsx'
+    if (config.optimizeDeps.extensions?.some((ext) => filePath.endsWith(ext))) {
+      // For custom supported extensions, build the entry file to transform it into JS,
+      // and then parse with es-module-lexer. Note that the `bundle` option is not `true`,
+      // so only the entry file is being transformed.
+      const result = await build({
+        ...esbuildOptions,
+        plugins,
+        entryPoints: [filePath],
+        write: false,
+        format: 'esm'
       })
-      // Ensure that optimization won't fail by defaulting '.js' to the JSX parser.
-      // This is useful for packages such as Gatsby.
-      esbuildOptions.loader = {
-        '.js': 'jsx',
-        ...esbuildOptions.loader
+      exportsData = parse(result.outputFiles[0].text) as ExportsData
+    } else {
+      const entryContent = fs.readFileSync(filePath, 'utf-8')
+      try {
+        exportsData = parse(entryContent) as ExportsData
+      } catch {
+        debug(
+          `Unable to parse dependency: ${id}. Trying again with a JSX transform.`
+        )
+        const transformed = await transformWithEsbuild(entryContent, filePath, {
+          loader: 'jsx'
+        })
+        // Ensure that optimization won't fail by defaulting '.js' to the JSX parser.
+        // This is useful for packages such as Gatsby.
+        esbuildOptions.loader = {
+          '.js': 'jsx',
+          ...esbuildOptions.loader
+        }
+        exportsData = parse(transformed.code) as ExportsData
       }
-      exportsData = parse(transformed.code) as ExportsData
-    }
-    for (const { ss, se } of exportsData[0]) {
-      const exp = entryContent.slice(ss, se)
-      if (/export\s+\*\s+from/.test(exp)) {
-        exportsData.hasReExports = true
+      for (const { ss, se } of exportsData[0]) {
+        const exp = entryContent.slice(ss, se)
+        if (/export\s+\*\s+from/.test(exp)) {
+          exportsData.hasReExports = true
+        }
       }
     }
     idToExports[id] = exportsData
diff --git a/packages/vite/src/node/optimizer/scan.ts b/packages/vite/src/node/optimizer/scan.ts
index 280776b2e7d38d..b0f5f7985b0f78 100644
--- a/packages/vite/src/node/optimizer/scan.ts
+++ b/packages/vite/src/node/optimizer/scan.ts
@@ -181,6 +181,10 @@ function esbuildScanPlugin(
     '@vite/env'
   ]
 
+  const isOptimizable = (id: string) =>
+    OPTIMIZABLE_ENTRY_RE.test(id) ||
+    !!config.optimizeDeps.extensions?.some((ext) => id.endsWith(ext))
+
   const externalUnlessEntry = ({ path }: { path: string }) => ({
     path,
     external: !entries.includes(path)
@@ -218,8 +222,14 @@ function esbuildScanPlugin(
 
       // html types: extract script contents -----------------------------------
       build.onResolve({ filter: htmlTypesRE }, async ({ path, importer }) => {
+        const resolved = await resolve(path, importer)
+        if (!resolved) return
+        // It is possible for the scanner to scan html types in node_modules.
+        // If we can optimize this html type, skip it so it's handled by the
+        // bare import resolve, and recorded as optimization dep.
+        if (resolved.includes('node_modules') && isOptimizable(resolved)) return
         return {
-          path: await resolve(path, importer),
+          path: resolved,
           namespace: 'html'
         }
       })
@@ -340,17 +350,19 @@ function esbuildScanPlugin(
             }
             if (resolved.includes('node_modules') || include?.includes(id)) {
               // dependency or forced included, externalize and stop crawling
-              if (OPTIMIZABLE_ENTRY_RE.test(resolved)) {
+              if (isOptimizable(resolved)) {
                 depImports[id] = resolved
               }
               return externalUnlessEntry({ path: id })
-            } else {
+            } else if (isScannable(resolved)) {
               const namespace = htmlTypesRE.test(resolved) ? 'html' : undefined
               // linked package, keep crawling
               return {
                 path: path.resolve(resolved),
                 namespace
               }
+            } else {
+              return externalUnlessEntry({ path: id })
             }
           } else {
             missing[id] = normalizePath(importer)
@@ -396,7 +408,7 @@ function esbuildScanPlugin(
           // use vite resolver to support urls and omitted extensions
           const resolved = await resolve(id, importer)
           if (resolved) {
-            if (shouldExternalizeDep(resolved, id)) {
+            if (shouldExternalizeDep(resolved, id) || !isScannable(resolved)) {
               return externalUnlessEntry({ path: id })
             }
 
@@ -499,10 +511,7 @@ function extractImportPaths(code: string) {
   return js
 }
 
-export function shouldExternalizeDep(
-  resolvedId: string,
-  rawId: string
-): boolean {
+function shouldExternalizeDep(resolvedId: string, rawId: string): boolean {
   // not a valid file path
   if (!path.isAbsolute(resolvedId)) {
     return true
@@ -511,9 +520,9 @@ export function shouldExternalizeDep(
   if (resolvedId === rawId || resolvedId.includes('\0')) {
     return true
   }
-  // resolved is not a scannable type
-  if (!JS_TYPES_RE.test(resolvedId) && !htmlTypesRE.test(resolvedId)) {
-    return true
-  }
   return false
 }
+
+function isScannable(id: string): boolean {
+  return JS_TYPES_RE.test(id) || htmlTypesRE.test(id)
+}
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index b7a9a8e96dc686..9982e48276c096 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -295,6 +295,7 @@ importers:
       dep-esbuild-plugin-transform: file:./dep-esbuild-plugin-transform
       dep-linked: link:./dep-linked
       dep-linked-include: link:./dep-linked-include
+      dep-not-js: file:./dep-not-js
       lodash-es: ^4.17.21
       nested-exclude: file:./nested-exclude
       phoenix: ^1.6.2
@@ -312,6 +313,7 @@ importers:
       dep-esbuild-plugin-transform: link:dep-esbuild-plugin-transform
       dep-linked: link:dep-linked
       dep-linked-include: link:dep-linked-include
+      dep-not-js: link:dep-not-js
       lodash-es: 4.17.21
       nested-exclude: link:nested-exclude
       phoenix: 1.6.5
@@ -345,6 +347,9 @@ importers:
     dependencies:
       react: 17.0.2
 
+  packages/playground/optimize-deps/dep-not-js:
+    specifiers: {}
+
   packages/playground/optimize-deps/nested-exclude:
     specifiers:
       nested-include: link:./nested-include

From a516e857ed4de28c421904dd938233a78e2ff368 Mon Sep 17 00:00:00 2001
From: Yanlin Jiang <cncolder@gmail.com>
Date: Thu, 3 Mar 2022 17:37:32 +0800
Subject: [PATCH 41/50] fix(server): base middleware redirect with search and
 hash (#6574)

---
 packages/vite/src/node/server/middlewares/base.ts | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/vite/src/node/server/middlewares/base.ts b/packages/vite/src/node/server/middlewares/base.ts
index d37e5d3e60794b..b72f0fd7949f0b 100644
--- a/packages/vite/src/node/server/middlewares/base.ts
+++ b/packages/vite/src/node/server/middlewares/base.ts
@@ -28,9 +28,9 @@ export function baseMiddleware({
     }
 
     if (path === '/' || path === '/index.html') {
-      // redirect root visit to based url
+      // redirect root visit to based url with search and hash
       res.writeHead(302, {
-        Location: base
+        Location: base + (parsed.search || '') + (parsed.hash || '')
       })
       res.end()
       return

From b214115bffd07c5baca9da36d3b3608007d00920 Mon Sep 17 00:00:00 2001
From: Dominik G <dominik.goepel@gmx.de>
Date: Thu, 3 Mar 2022 10:45:09 +0100
Subject: [PATCH 42/50] fix(server): ensure consistency for url to file mapping
 in importAnalysis and static middleware (#6518)

---
 .../playground/fs-serve/root/src/index.html   | 13 +++++
 .../fs-serve/root/src/subdir/safe.txt         |  1 +
 .../vite/src/node/plugins/importAnalysis.ts   |  7 ++-
 packages/vite/src/node/server/index.ts        |  6 +--
 .../src/node/server/middlewares/static.ts     | 11 ++--
 packages/vite/src/node/utils.ts               | 52 ++++++++++++++++---
 6 files changed, 71 insertions(+), 19 deletions(-)
 create mode 100644 packages/playground/fs-serve/root/src/subdir/safe.txt

diff --git a/packages/playground/fs-serve/root/src/index.html b/packages/playground/fs-serve/root/src/index.html
index c8b294e86ab0ea..9e4f728a593a91 100644
--- a/packages/playground/fs-serve/root/src/index.html
+++ b/packages/playground/fs-serve/root/src/index.html
@@ -8,6 +8,10 @@ <h2>Safe Fetch</h2>
 <pre class="safe-fetch-status"></pre>
 <pre class="safe-fetch"></pre>
 
+<h2>Safe Fetch Subdirectory</h2>
+<pre class="safe-fetch-subdir-status"></pre>
+<pre class="safe-fetch-subdir"></pre>
+
 <h2>Unsafe Fetch</h2>
 <pre class="unsafe-fetch-status"></pre>
 <pre class="unsafe-fetch"></pre>
@@ -42,6 +46,15 @@ <h2>Denied</h2>
     .then((data) => {
       text('.safe-fetch', JSON.stringify(data))
     })
+  // inside allowed dir, safe fetch
+  fetch('/src/subdir/safe.txt')
+    .then((r) => {
+      text('.safe-fetch-subdir-status', r.status)
+      return r.text()
+    })
+    .then((data) => {
+      text('.safe-fetch-subdir', JSON.stringify(data))
+    })
 
   // outside of allowed dir, treated as unsafe
   fetch('/unsafe.txt')
diff --git a/packages/playground/fs-serve/root/src/subdir/safe.txt b/packages/playground/fs-serve/root/src/subdir/safe.txt
new file mode 100644
index 00000000000000..3f3d0607101642
--- /dev/null
+++ b/packages/playground/fs-serve/root/src/subdir/safe.txt
@@ -0,0 +1 @@
+KEY=safe
diff --git a/packages/vite/src/node/plugins/importAnalysis.ts b/packages/vite/src/node/plugins/importAnalysis.ts
index 953304e0ac38c2..082aa35dfae213 100644
--- a/packages/vite/src/node/plugins/importAnalysis.ts
+++ b/packages/vite/src/node/plugins/importAnalysis.ts
@@ -21,7 +21,8 @@ import {
   normalizePath,
   removeImportQuery,
   unwrapId,
-  moduleListContains
+  moduleListContains,
+  fsPathFromUrl
 } from '../utils'
 import {
   debugHmr,
@@ -399,9 +400,7 @@ export function importAnalysisPlugin(config: ResolvedConfig): Plugin {
           let url = normalizedUrl
 
           // record as safe modules
-          server?.moduleGraph.safeModulesPath.add(
-            cleanUrl(url).slice(4 /* '/@fs'.length */)
-          )
+          server?.moduleGraph.safeModulesPath.add(fsPathFromUrl(url))
 
           // rewrite
           if (url !== specifier) {
diff --git a/packages/vite/src/node/server/index.ts b/packages/vite/src/node/server/index.ts
index f80e471028794f..bd3161717405df 100644
--- a/packages/vite/src/node/server/index.ts
+++ b/packages/vite/src/node/server/index.ts
@@ -33,7 +33,7 @@ import { timeMiddleware } from './middlewares/time'
 import type { ModuleNode } from './moduleGraph'
 import { ModuleGraph } from './moduleGraph'
 import type { Connect } from 'types/connect'
-import { ensureLeadingSlash, normalizePath } from '../utils'
+import { isParentDirectory, normalizePath } from '../utils'
 import { errorMiddleware, prepareError } from './middlewares/error'
 import type { HmrOptions } from './hmr'
 import { handleHMRUpdate, handleFileAddUnlink } from './hmr'
@@ -702,7 +702,7 @@ function createServerCloseFn(server: http.Server | null) {
 }
 
 function resolvedAllowDir(root: string, dir: string): string {
-  return ensureLeadingSlash(normalizePath(path.resolve(root, dir)))
+  return normalizePath(path.resolve(root, dir))
 }
 
 export function resolveServerOptions(
@@ -724,7 +724,7 @@ export function resolveServerOptions(
 
   // only push client dir when vite itself is outside-of-root
   const resolvedClientDir = resolvedAllowDir(root, CLIENT_DIR)
-  if (!allowDirs.some((i) => resolvedClientDir.startsWith(i))) {
+  if (!allowDirs.some((dir) => isParentDirectory(dir, resolvedClientDir))) {
     allowDirs.push(resolvedClientDir)
   }
 
diff --git a/packages/vite/src/node/server/middlewares/static.ts b/packages/vite/src/node/server/middlewares/static.ts
index 0b8e2db93255ed..a6623338783cc8 100644
--- a/packages/vite/src/node/server/middlewares/static.ts
+++ b/packages/vite/src/node/server/middlewares/static.ts
@@ -4,17 +4,17 @@ import type { Options } from 'sirv'
 import sirv from 'sirv'
 import type { Connect } from 'types/connect'
 import type { ViteDevServer } from '../..'
-import { normalizePath } from '../..'
 import { FS_PREFIX } from '../../constants'
 import {
   cleanUrl,
-  ensureLeadingSlash,
   fsPathFromId,
+  fsPathFromUrl,
   isImportRequest,
   isInternalRequest,
   isWindows,
   slash,
-  isFileReadable
+  isFileReadable,
+  isParentDirectory
 } from '../../utils'
 import { isMatch } from 'micromatch'
 
@@ -148,15 +148,14 @@ export function isFileServingAllowed(
 ): boolean {
   if (!server.config.server.fs.strict) return true
 
-  const cleanedUrl = cleanUrl(url)
-  const file = ensureLeadingSlash(normalizePath(cleanedUrl))
+  const file = fsPathFromUrl(url)
 
   if (server.config.server.fs.deny.some((i) => isMatch(file, i, _matchOptions)))
     return false
 
   if (server.moduleGraph.safeModulesPath.has(file)) return true
 
-  if (server.config.server.fs.allow.some((i) => file.startsWith(i + '/')))
+  if (server.config.server.fs.allow.some((dir) => isParentDirectory(dir, file)))
     return true
 
   return false
diff --git a/packages/vite/src/node/utils.ts b/packages/vite/src/node/utils.ts
index 935c5c8401071b..fb479a511abbd4 100644
--- a/packages/vite/src/node/utils.ts
+++ b/packages/vite/src/node/utils.ts
@@ -9,7 +9,8 @@ import {
   DEFAULT_EXTENSIONS,
   VALID_ID_PREFIX,
   CLIENT_PUBLIC_PATH,
-  ENV_PUBLIC_PATH
+  ENV_PUBLIC_PATH,
+  CLIENT_ENTRY
 } from './constants'
 import resolve from 'resolve'
 import { builtinModules } from 'module'
@@ -139,7 +140,25 @@ export function createDebugger(
   }
 }
 
+function testCaseInsensitiveFS() {
+  if (!CLIENT_ENTRY.endsWith('client.mjs')) {
+    throw new Error(
+      `cannot test case insensitive FS, CLIENT_ENTRY const doesn't contain client.mjs`
+    )
+  }
+  if (!fs.existsSync(CLIENT_ENTRY)) {
+    throw new Error(
+      'cannot test case insensitive FS, CLIENT_ENTRY does not point to an existing file: ' +
+        CLIENT_ENTRY
+    )
+  }
+  return fs.existsSync(CLIENT_ENTRY.replace('client.mjs', 'cLiEnT.mjs'))
+}
+
+export const isCaseInsensitiveFS = testCaseInsensitiveFS()
+
 export const isWindows = os.platform() === 'win32'
+
 const VOLUME_RE = /^[A-Z]:/i
 
 export function normalizePath(id: string): string {
@@ -147,12 +166,37 @@ export function normalizePath(id: string): string {
 }
 
 export function fsPathFromId(id: string): string {
-  const fsPath = normalizePath(id.slice(FS_PREFIX.length))
+  const fsPath = normalizePath(
+    id.startsWith(FS_PREFIX) ? id.slice(FS_PREFIX.length) : id
+  )
   return fsPath.startsWith('/') || fsPath.match(VOLUME_RE)
     ? fsPath
     : `/${fsPath}`
 }
 
+export function fsPathFromUrl(url: string): string {
+  return fsPathFromId(cleanUrl(url))
+}
+
+/**
+ * Check if dir is a parent of file
+ *
+ * Warning: parameters are not validated, only works with normalized absolute paths
+ *
+ * @param dir - normalized absolute path
+ * @param file - normalized absolute path
+ * @returns true if dir is a parent of file
+ */
+export function isParentDirectory(dir: string, file: string): boolean {
+  if (!dir.endsWith('/')) {
+    dir = `${dir}/`
+  }
+  return (
+    file.startsWith(dir) ||
+    (isCaseInsensitiveFS && file.toLowerCase().startsWith(dir.toLowerCase()))
+  )
+}
+
 export function ensureVolumeInPath(file: string): string {
   return isWindows ? path.resolve(file) : file
 }
@@ -480,10 +524,6 @@ export function copyDir(srcDir: string, destDir: string): void {
   }
 }
 
-export function ensureLeadingSlash(path: string): string {
-  return !path.startsWith('/') ? '/' + path : path
-}
-
 export function ensureWatchedFile(
   watcher: FSWatcher,
   file: string | null,

From 24bb3e40c1add050c4c7bac9eac6b2edf7ddc73c Mon Sep 17 00:00:00 2001
From: patak <matias.capeletto@gmail.com>
Date: Thu, 3 Mar 2022 14:03:46 +0100
Subject: [PATCH 43/50] feat: non-blocking pre bundling of dependencies (#6758)

---
 packages/vite/src/node/index.ts               |   5 +-
 packages/vite/src/node/optimizer/index.ts     | 641 +++++++++++++-----
 .../src/node/optimizer/registerMissing.ts     | 204 ++++--
 .../vite/src/node/plugins/importAnalysis.ts   |  82 ++-
 packages/vite/src/node/plugins/index.ts       |   2 +
 .../vite/src/node/plugins/optimizedDeps.ts    | 117 ++++
 packages/vite/src/node/plugins/resolve.ts     |  40 +-
 packages/vite/src/node/server/index.ts        |  55 +-
 .../src/node/server/middlewares/transform.ts  | 138 ++--
 9 files changed, 933 insertions(+), 351 deletions(-)
 create mode 100644 packages/vite/src/node/plugins/optimizedDeps.ts

diff --git a/packages/vite/src/node/index.ts b/packages/vite/src/node/index.ts
index a6d74e5dfd46fc..fe67e8efac8f8c 100644
--- a/packages/vite/src/node/index.ts
+++ b/packages/vite/src/node/index.ts
@@ -32,7 +32,10 @@ export type {
 } from './preview'
 export type {
   DepOptimizationMetadata,
-  DepOptimizationOptions
+  DepOptimizationOptions,
+  DepOptimizationResult,
+  DepOptimizationProcessing,
+  OptimizedDepInfo
 } from './optimizer'
 export type { Plugin } from './plugin'
 export type { PackageCache, PackageData } from './packages'
diff --git a/packages/vite/src/node/optimizer/index.ts b/packages/vite/src/node/optimizer/index.ts
index 302ce66842a276..0cae19ec0f0769 100644
--- a/packages/vite/src/node/optimizer/index.ts
+++ b/packages/vite/src/node/optimizer/index.ts
@@ -91,6 +91,34 @@ export interface DepOptimizationOptions {
   extensions?: string[]
 }
 
+export interface DepOptimizationResult {
+  /**
+   * After a re-optimization, the internal bundled chunks may change
+   * and a full page reload is required if that is the case
+   * If the files are stable, we can avoid the reload that is expensive
+   * for large applications
+   */
+  alteredFiles: boolean
+}
+
+export interface DepOptimizationProcessing {
+  promise: Promise<DepOptimizationResult | undefined>
+  resolve: (result?: DepOptimizationResult) => void
+}
+
+export interface OptimizedDepInfo {
+  file: string
+  src: string
+  needsInterop?: boolean
+  browserHash?: string
+  fileHash?: string
+  /**
+   * During optimization, ids can still be resolved to their final location
+   * but the bundles may not yet be saved to disk
+   */
+  processing: Promise<DepOptimizationResult | undefined>
+}
+
 export interface DepOptimizationMetadata {
   /**
    * The main hash is determined by user config and dependency lockfiles.
@@ -103,254 +131,501 @@ export interface DepOptimizationMetadata {
    * optimized deps.
    */
   browserHash: string
-  optimized: Record<
-    string,
-    {
-      file: string
-      src: string
-      needsInterop: boolean
-    }
-  >
+  /**
+   * Metadata for each already optimized dependency
+   */
+  optimized: Record<string, OptimizedDepInfo>
+  /**
+   * Metadata for each newly discovered dependency after processing
+   */
+  discovered: Record<string, OptimizedDepInfo>
+  /**
+   * During optimization, ids can still be resolved to their final location
+   * but the bundles may not yet be saved to disk
+   */
+  processing: Promise<DepOptimizationResult | undefined>
 }
 
+/**
+ * Used by Vite CLI when running `vite optimize`
+ */
 export async function optimizeDeps(
   config: ResolvedConfig,
   force = config.server.force,
   asCommand = false,
-  newDeps?: Record<string, string>, // missing imports encountered after server has started
+  newDeps?: Record<string, OptimizedDepInfo>, // missing imports encountered after server has started
   ssr?: boolean
-): Promise<DepOptimizationMetadata | null> {
+): Promise<DepOptimizationMetadata> {
+  const { metadata, run } = await createOptimizeDepsRun(
+    config,
+    force,
+    asCommand,
+    null,
+    newDeps,
+    ssr
+  )
+  await run()
+  return metadata
+}
+
+/**
+ * Internally, Vite uses this function to prepare a optimizeDeps run. When Vite starts, we can get
+ * the metadata and start the server without waiting for the optimizeDeps processing to be completed
+ */
+export async function createOptimizeDepsRun(
+  config: ResolvedConfig,
+  force = config.server.force,
+  asCommand = false,
+  currentData: DepOptimizationMetadata | null = null,
+  newDeps?: Record<string, OptimizedDepInfo>, // missing imports encountered after server has started
+  ssr?: boolean
+): Promise<{
+  metadata: DepOptimizationMetadata
+  run: () => Promise<DepOptimizationResult | undefined>
+}> {
   config = {
     ...config,
     command: 'build'
   }
 
-  const { root, logger, cacheDir } = config
+  const { root, logger } = config
   const log = asCommand ? logger.info : debug
 
-  const dataPath = path.join(cacheDir, '_metadata.json')
+  // Before Vite 2.9, dependencies were cached in the root of the cacheDir
+  // For compat, we remove the cache if we find the old structure
+  if (fs.existsSync(path.join(config.cacheDir, '_metadata.json'))) {
+    emptyDir(config.cacheDir)
+  }
+
+  const depsCacheDir = getDepsCacheDir(config)
+  const processingCacheDir = getProcessingDepsCacheDir(config)
+
   const mainHash = getDepHash(root, config)
-  const data: DepOptimizationMetadata = {
+
+  const processing = newDepOptimizationProcessing()
+
+  const metadata: DepOptimizationMetadata = {
     hash: mainHash,
     browserHash: mainHash,
-    optimized: {}
+    optimized: {},
+    discovered: {},
+    processing: processing.promise
   }
 
   if (!force) {
     let prevData: DepOptimizationMetadata | undefined
     try {
-      prevData = JSON.parse(fs.readFileSync(dataPath, 'utf-8'))
+      const prevDataPath = path.join(depsCacheDir, '_metadata.json')
+      prevData = parseOptimizedDepsMetadata(
+        fs.readFileSync(prevDataPath, 'utf-8'),
+        depsCacheDir,
+        processing.promise
+      )
     } catch (e) {}
     // hash is consistent, no need to re-bundle
-    if (prevData && prevData.hash === data.hash) {
+    if (prevData && prevData.hash === metadata.hash) {
       log('Hash is consistent. Skipping. Use --force to override.')
-      return prevData
+      return {
+        metadata: prevData,
+        run: () => (processing.resolve(), processing.promise)
+      }
     }
   }
 
-  if (fs.existsSync(cacheDir)) {
-    emptyDir(cacheDir)
+  // Create a temporal directory so we don't need to delete optimized deps
+  // until they have been processed. This also avoids leaving the deps cache
+  // directory in a corrupted state if there is an error
+  if (fs.existsSync(processingCacheDir)) {
+    emptyDir(processingCacheDir)
   } else {
-    fs.mkdirSync(cacheDir, { recursive: true })
+    fs.mkdirSync(processingCacheDir, { recursive: true })
   }
+
   // a hint for Node.js
   // all files in the cache directory should be recognized as ES modules
   writeFile(
-    path.resolve(cacheDir, 'package.json'),
+    path.resolve(processingCacheDir, 'package.json'),
     JSON.stringify({ type: 'module' })
   )
 
-  let deps: Record<string, string>, missing: Record<string, string>
+  let deps: Record<string, string>
   if (!newDeps) {
-    ;({ deps, missing } = await scanImports(config))
-  } else {
-    deps = newDeps
-    missing = {}
-  }
+    // Initial optimizeDeps at server start. Perform a fast scan using esbuild to
+    // find deps to pre-bundle and include user hard-coded dependencies
 
-  // update browser hash
-  data.browserHash = createHash('sha256')
-    .update(data.hash + JSON.stringify(deps))
-    .digest('hex')
-    .substring(0, 8)
-
-  const missingIds = Object.keys(missing)
-  if (missingIds.length) {
-    throw new Error(
-      `The following dependencies are imported but could not be resolved:\n\n  ${missingIds
-        .map(
-          (id) =>
-            `${colors.cyan(id)} ${colors.white(
-              colors.dim(`(imported by ${missing[id]})`)
-            )}`
-        )
-        .join(`\n  `)}\n\nAre they installed?`
-    )
-  }
+    let missing: Record<string, string>
+    ;({ deps, missing } = await scanImports(config))
 
-  const include = config.optimizeDeps?.include
-  if (include) {
-    const resolve = config.createResolver({ asSrc: false })
-    for (const id of include) {
-      // normalize 'foo   >bar` as 'foo > bar' to prevent same id being added
-      // and for pretty printing
-      const normalizedId = normalizeId(id)
-      if (!deps[normalizedId]) {
-        const entry = await resolve(id)
-        if (entry) {
-          deps[normalizedId] = entry
-        } else {
-          throw new Error(
-            `Failed to resolve force included dependency: ${colors.cyan(id)}`
+    const missingIds = Object.keys(missing)
+    if (missingIds.length) {
+      processing.resolve()
+      throw new Error(
+        `The following dependencies are imported but could not be resolved:\n\n  ${missingIds
+          .map(
+            (id) =>
+              `${colors.cyan(id)} ${colors.white(
+                colors.dim(`(imported by ${missing[id]})`)
+              )}`
           )
+          .join(`\n  `)}\n\nAre they installed?`
+      )
+    }
+
+    const include = config.optimizeDeps?.include
+    if (include) {
+      const resolve = config.createResolver({ asSrc: false })
+      for (const id of include) {
+        // normalize 'foo   >bar` as 'foo > bar' to prevent same id being added
+        // and for pretty printing
+        const normalizedId = normalizeId(id)
+        if (!deps[normalizedId]) {
+          const entry = await resolve(id)
+          if (entry) {
+            deps[normalizedId] = entry
+          } else {
+            processing.resolve()
+            throw new Error(
+              `Failed to resolve force included dependency: ${colors.cyan(id)}`
+            )
+          }
         }
       }
     }
-  }
 
-  const qualifiedIds = Object.keys(deps)
+    // update browser hash
+    metadata.browserHash = getOptimizedBrowserHash(metadata.hash, deps)
+
+    // We generate the mapping of dependency ids to their cache file location
+    // before processing the dependencies with esbuild. This allow us to continue
+    // processing files in the importAnalysis and resolve plugins
+    for (const id in deps) {
+      const entry = deps[id]
+      metadata.optimized[id] = {
+        file: getOptimizedDepPath(id, config),
+        src: entry,
+        browserHash: metadata.browserHash,
+        processing: processing.promise
+      }
+    }
+  } else {
+    // Missing dependencies were found at run-time, optimizeDeps called while the
+    // server is running
+    deps = depsFromOptimizedDepInfo(newDeps)
+
+    // Clone optimized info objects, fileHash, browserHash may be changed for them
+    for (const o of Object.keys(newDeps)) {
+      metadata.optimized[o] = { ...newDeps[o] }
+    }
 
-  if (!qualifiedIds.length) {
-    writeFile(dataPath, JSON.stringify(data, null, 2))
-    log(`No dependencies to bundle. Skipping.\n\n\n`)
-    return data
+    // update global browser hash, but keep newDeps individual hashs until we know
+    // if files are stable so we can avoid a full page reload
+    metadata.browserHash = getOptimizedBrowserHash(metadata.hash, deps)
   }
 
-  const total = qualifiedIds.length
-  const maxListed = 5
-  const listed = Math.min(total, maxListed)
-  const extra = Math.max(0, total - maxListed)
-  const depsString = colors.yellow(
-    qualifiedIds.slice(0, listed).join(`\n  `) +
-      (extra > 0 ? `\n  (...and ${extra} more)` : ``)
-  )
-  if (!asCommand) {
-    if (!newDeps) {
-      // This is auto run on server start - let the user know that we are
-      // pre-optimizing deps
-      logger.info(colors.green(`Pre-bundling dependencies:\n  ${depsString}`))
-      logger.info(
-        `(this will be run only when your dependencies or config have changed)`
-      )
+  return { metadata, run: prebundleDeps }
+
+  async function prebundleDeps(): Promise<DepOptimizationResult | undefined> {
+    // We prebundle dependencies with esbuild and cache them, but there is no need
+    // to wait here. Code that needs to access the cached deps needs to await
+    // the optimizeDepsMetadata.processing promise
+
+    const qualifiedIds = Object.keys(deps)
+
+    if (!qualifiedIds.length) {
+      // Write metadata file, delete `deps` folder and rename the `processing` folder to `deps`
+      commitProcessingDepsCacheSync()
+      log(`No dependencies to bundle. Skipping.\n\n\n`)
+      processing.resolve()
+      return
     }
-  } else {
-    logger.info(colors.green(`Optimizing dependencies:\n  ${depsString}`))
-  }
 
-  // esbuild generates nested directory output with lowest common ancestor base
-  // this is unpredictable and makes it difficult to analyze entry / output
-  // mapping. So what we do here is:
-  // 1. flatten all ids to eliminate slash
-  // 2. in the plugin, read the entry ourselves as virtual files to retain the
-  //    path.
-  const flatIdDeps: Record<string, string> = {}
-  const idToExports: Record<string, ExportsData> = {}
-  const flatIdToExports: Record<string, ExportsData> = {}
-
-  const { plugins = [], ...esbuildOptions } =
-    config.optimizeDeps?.esbuildOptions ?? {}
-
-  await init
-  for (const id in deps) {
-    const flatId = flattenId(id)
-    const filePath = (flatIdDeps[flatId] = deps[id])
-    let exportsData: ExportsData
-    if (config.optimizeDeps.extensions?.some((ext) => filePath.endsWith(ext))) {
-      // For custom supported extensions, build the entry file to transform it into JS,
-      // and then parse with es-module-lexer. Note that the `bundle` option is not `true`,
-      // so only the entry file is being transformed.
-      const result = await build({
-        ...esbuildOptions,
-        plugins,
-        entryPoints: [filePath],
-        write: false,
-        format: 'esm'
-      })
-      exportsData = parse(result.outputFiles[0].text) as ExportsData
-    } else {
-      const entryContent = fs.readFileSync(filePath, 'utf-8')
-      try {
-        exportsData = parse(entryContent) as ExportsData
-      } catch {
-        debug(
-          `Unable to parse dependency: ${id}. Trying again with a JSX transform.`
+    const total = qualifiedIds.length
+    const maxListed = 5
+    const listed = Math.min(total, maxListed)
+    const extra = Math.max(0, total - maxListed)
+    const depsString = colors.yellow(
+      qualifiedIds.slice(0, listed).join(`\n  `) +
+        (extra > 0 ? `\n  (...and ${extra} more)` : ``)
+    )
+    if (!asCommand) {
+      if (!newDeps) {
+        // This is auto run on server start - let the user know that we are
+        // pre-optimizing deps
+        logger.info(colors.green(`Pre-bundling dependencies:\n  ${depsString}`))
+        logger.info(
+          `(this will be run only when your dependencies or config have changed)`
         )
-        const transformed = await transformWithEsbuild(entryContent, filePath, {
-          loader: 'jsx'
+      }
+    } else {
+      logger.info(colors.green(`Optimizing dependencies:\n  ${depsString}`))
+    }
+
+    // esbuild generates nested directory output with lowest common ancestor base
+    // this is unpredictable and makes it difficult to analyze entry / output
+    // mapping. So what we do here is:
+    // 1. flatten all ids to eliminate slash
+    // 2. in the plugin, read the entry ourselves as virtual files to retain the
+    //    path.
+    const flatIdDeps: Record<string, string> = {}
+    const idToExports: Record<string, ExportsData> = {}
+    const flatIdToExports: Record<string, ExportsData> = {}
+
+    const { plugins = [], ...esbuildOptions } =
+      config.optimizeDeps?.esbuildOptions ?? {}
+
+    await init
+    for (const id in deps) {
+      const flatId = flattenId(id)
+      const filePath = (flatIdDeps[flatId] = deps[id])
+      let exportsData: ExportsData
+      if (
+        config.optimizeDeps.extensions?.some((ext) => filePath.endsWith(ext))
+      ) {
+        // For custom supported extensions, build the entry file to transform it into JS,
+        // and then parse with es-module-lexer. Note that the `bundle` option is not `true`,
+        // so only the entry file is being transformed.
+        const result = await build({
+          ...esbuildOptions,
+          plugins,
+          entryPoints: [filePath],
+          write: false,
+          format: 'esm'
         })
-        // Ensure that optimization won't fail by defaulting '.js' to the JSX parser.
-        // This is useful for packages such as Gatsby.
-        esbuildOptions.loader = {
-          '.js': 'jsx',
-          ...esbuildOptions.loader
+        exportsData = parse(result.outputFiles[0].text) as ExportsData
+      } else {
+        const entryContent = fs.readFileSync(filePath, 'utf-8')
+        try {
+          exportsData = parse(entryContent) as ExportsData
+        } catch {
+          debug(
+            `Unable to parse dependency: ${id}. Trying again with a JSX transform.`
+          )
+          const transformed = await transformWithEsbuild(
+            entryContent,
+            filePath,
+            {
+              loader: 'jsx'
+            }
+          )
+          // Ensure that optimization won't fail by defaulting '.js' to the JSX parser.
+          // This is useful for packages such as Gatsby.
+          esbuildOptions.loader = {
+            '.js': 'jsx',
+            ...esbuildOptions.loader
+          }
+          exportsData = parse(transformed.code) as ExportsData
         }
-        exportsData = parse(transformed.code) as ExportsData
-      }
-      for (const { ss, se } of exportsData[0]) {
-        const exp = entryContent.slice(ss, se)
-        if (/export\s+\*\s+from/.test(exp)) {
-          exportsData.hasReExports = true
+        for (const { ss, se } of exportsData[0]) {
+          const exp = entryContent.slice(ss, se)
+          if (/export\s+\*\s+from/.test(exp)) {
+            exportsData.hasReExports = true
+          }
         }
       }
+
+      idToExports[id] = exportsData
+      flatIdToExports[flatId] = exportsData
     }
-    idToExports[id] = exportsData
-    flatIdToExports[flatId] = exportsData
-  }
 
-  const define: Record<string, string> = {
-    'process.env.NODE_ENV': JSON.stringify(config.mode)
-  }
-  for (const key in config.define) {
-    const value = config.define[key]
-    define[key] = typeof value === 'string' ? value : JSON.stringify(value)
-  }
+    const define: Record<string, string> = {
+      'process.env.NODE_ENV': JSON.stringify(config.mode)
+    }
+    for (const key in config.define) {
+      const value = config.define[key]
+      define[key] = typeof value === 'string' ? value : JSON.stringify(value)
+    }
+
+    const start = performance.now()
+
+    const result = await build({
+      absWorkingDir: process.cwd(),
+      entryPoints: Object.keys(flatIdDeps),
+      bundle: true,
+      format: 'esm',
+      target: config.build.target || undefined,
+      external: config.optimizeDeps?.exclude,
+      logLevel: 'error',
+      splitting: true,
+      sourcemap: true,
+      outdir: processingCacheDir,
+      ignoreAnnotations: true,
+      metafile: true,
+      define,
+      plugins: [
+        ...plugins,
+        esbuildDepPlugin(flatIdDeps, flatIdToExports, config, ssr)
+      ],
+      ...esbuildOptions
+    })
+
+    const meta = result.metafile!
+
+    // the paths in `meta.outputs` are relative to `process.cwd()`
+    const processingCacheDirOutputPath = path.relative(
+      process.cwd(),
+      processingCacheDir
+    )
 
-  const start = performance.now()
-
-  const result = await build({
-    absWorkingDir: process.cwd(),
-    entryPoints: Object.keys(flatIdDeps),
-    bundle: true,
-    format: 'esm',
-    target: config.build.target || undefined,
-    external: config.optimizeDeps?.exclude,
-    logLevel: 'error',
-    splitting: true,
-    sourcemap: true,
-    outdir: cacheDir,
-    ignoreAnnotations: true,
-    metafile: true,
-    define,
-    plugins: [
-      ...plugins,
-      esbuildDepPlugin(flatIdDeps, flatIdToExports, config, ssr)
-    ],
-    ...esbuildOptions
-  })
-
-  const meta = result.metafile!
-
-  // the paths in `meta.outputs` are relative to `process.cwd()`
-  const cacheDirOutputPath = path.relative(process.cwd(), cacheDir)
-
-  for (const id in deps) {
-    const entry = deps[id]
-    data.optimized[id] = {
-      file: normalizePath(path.resolve(cacheDir, flattenId(id) + '.js')),
-      src: entry,
-      needsInterop: needsInterop(
+    for (const id in deps) {
+      const optimizedInfo = metadata.optimized[id]
+      optimizedInfo.needsInterop = needsInterop(
         id,
         idToExports[id],
         meta.outputs,
-        cacheDirOutputPath
+        processingCacheDirOutputPath
       )
+      const output =
+        meta.outputs[path.relative(process.cwd(), optimizedInfo.file)]
+      if (output) {
+        // We only need to hash the output.imports in to check for stability, but adding the hash
+        // and file path gives us a unique hash that may be useful for other things in the future
+        optimizedInfo.fileHash = getHash(
+          metadata.hash + optimizedInfo.file + JSON.stringify(output.imports)
+        )
+      }
+    }
+
+    // This only runs when missing deps are processed. Previous optimized deps are stable if
+    // the newly discovered deps don't have common chunks with them. Comparing their fileHash we
+    // can find out if it is safe to keep the current browser state. If one of the file hashes
+    // changed, a full page reload is needed
+    let alteredFiles = false
+    if (currentData) {
+      alteredFiles = Object.keys(currentData.optimized).some((dep) => {
+        const currentInfo = currentData.optimized[dep]
+        const info = metadata.optimized[dep]
+        return (
+          !info?.fileHash ||
+          !currentInfo?.fileHash ||
+          info?.fileHash !== currentInfo?.fileHash
+        )
+      })
+      debug(`optimized deps have altered files: ${alteredFiles}`)
     }
+
+    if (alteredFiles) {
+      // Overrite individual hashes with the new global browserHash, a full page reload is required
+      // New deps that ended up with a different hash replaced while doing analysis import are going to
+      // return a not found so the browser doesn't cache them. And will properly get loaded after the reload
+      for (const id in deps) {
+        metadata.optimized[id].browserHash = metadata.browserHash
+      }
+    }
+
+    // Write metadata file, delete `deps` folder and rename the new `processing` folder to `deps` in sync
+    commitProcessingDepsCacheSync()
+
+    debug(`deps bundled in ${(performance.now() - start).toFixed(2)}ms`)
+    processing.resolve({ alteredFiles })
+    return processing.promise
+  }
+
+  function commitProcessingDepsCacheSync() {
+    // Rewire the file paths from the temporal processing dir to the final deps cache dir
+    const dataPath = path.join(processingCacheDir, '_metadata.json')
+    writeFile(dataPath, stringifyOptimizedDepsMetadata(metadata))
+    // Processing is done, we can now replace the depsCacheDir with processingCacheDir
+    if (fs.existsSync(depsCacheDir)) {
+      const rmSync = fs.rmSync ?? fs.rmdirSync // TODO: Remove after support for Node 12 is dropped
+      rmSync(depsCacheDir, { recursive: true })
+    }
+    fs.renameSync(processingCacheDir, depsCacheDir)
+  }
+}
+
+export function newDepOptimizationProcessing(): DepOptimizationProcessing {
+  let resolve: (result?: DepOptimizationResult) => void
+  const promise = new Promise((_resolve) => {
+    resolve = _resolve
+  }) as Promise<DepOptimizationResult | undefined>
+  return { promise, resolve: resolve! }
+}
+
+// Convert to { id: src }
+export function depsFromOptimizedDepInfo(
+  depsInfo: Record<string, OptimizedDepInfo>
+) {
+  return Object.fromEntries(
+    Object.entries(depsInfo).map((d) => [d[0], d[1].src])
+  )
+}
+
+function getHash(text: string) {
+  return createHash('sha256').update(text).digest('hex').substring(0, 8)
+}
+
+export function getOptimizedBrowserHash(
+  hash: string,
+  deps: Record<string, string>,
+  missing?: Record<string, string>
+) {
+  // update browser hash
+  return getHash(
+    hash + JSON.stringify(deps) + (missing ? JSON.stringify(missing) : '')
+  )
+}
+
+function getCachedDepFilePath(id: string, depsCacheDir: string) {
+  return normalizePath(path.resolve(depsCacheDir, flattenId(id) + '.js'))
+}
+
+export function getOptimizedDepPath(id: string, config: ResolvedConfig) {
+  return getCachedDepFilePath(id, getDepsCacheDir(config))
+}
+
+export function getDepsCacheDir(config: ResolvedConfig) {
+  return normalizePath(path.resolve(config.cacheDir, 'deps'))
+}
+
+export function getProcessingDepsCacheDir(config: ResolvedConfig) {
+  return normalizePath(path.resolve(config.cacheDir, 'processing'))
+}
+
+export function isOptimizedDepFile(id: string, config: ResolvedConfig) {
+  return id.startsWith(getDepsCacheDir(config))
+}
+
+export function createIsOptimizedDepUrl(config: ResolvedConfig) {
+  const { root } = config
+  const depsCacheDir = getDepsCacheDir(config)
+
+  // determine the url prefix of files inside cache directory
+  const depsCacheDirRelative = normalizePath(path.relative(root, depsCacheDir))
+  const depsCacheDirPrefix = depsCacheDirRelative.startsWith('../')
+    ? // if the cache directory is outside root, the url prefix would be something
+      // like '/@fs/absolute/path/to/node_modules/.vite'
+      `/@fs/${normalizePath(depsCacheDir).replace(/^\//, '')}`
+    : // if the cache directory is inside root, the url prefix would be something
+      // like '/node_modules/.vite'
+      `/${depsCacheDirRelative}`
+
+  return function isOptimizedDepUrl(url: string): boolean {
+    return url.startsWith(depsCacheDirPrefix)
   }
+}
+
+function parseOptimizedDepsMetadata(
+  jsonMetadata: string,
+  depsCacheDir: string,
+  processing: Promise<DepOptimizationResult | undefined>
+) {
+  const metadata = JSON.parse(jsonMetadata)
+  for (const o of Object.keys(metadata.optimized)) {
+    metadata.optimized[o].processing = processing
+  }
+  return { ...metadata, discovered: {}, processing }
+}
 
-  writeFile(dataPath, JSON.stringify(data, null, 2))
+function stringifyOptimizedDepsMetadata(metadata: DepOptimizationMetadata) {
+  return JSON.stringify(
+    metadata,
+    (key: string, value: any) => {
+      if (key === 'processing' || key === 'discovered') return
 
-  debug(`deps bundled in ${(performance.now() - start).toFixed(2)}ms`)
-  return data
+      return value
+    },
+    2
+  )
 }
 
 // https://github.com/vitejs/vite/issues/1724#issuecomment-767619642
diff --git a/packages/vite/src/node/optimizer/registerMissing.ts b/packages/vite/src/node/optimizer/registerMissing.ts
index 2d0c8b98a99a20..cdc9e8006c1f52 100644
--- a/packages/vite/src/node/optimizer/registerMissing.ts
+++ b/packages/vite/src/node/optimizer/registerMissing.ts
@@ -1,5 +1,16 @@
 import colors from 'picocolors'
-import { optimizeDeps } from '.'
+import {
+  createOptimizeDepsRun,
+  getOptimizedDepPath,
+  getOptimizedBrowserHash,
+  depsFromOptimizedDepInfo,
+  newDepOptimizationProcessing
+} from '.'
+import type {
+  DepOptimizationMetadata,
+  DepOptimizationResult,
+  OptimizedDepInfo
+} from '.'
 import type { ViteDevServer } from '..'
 import { resolveSSRExternal } from '../ssr/ssrExternal'
 
@@ -11,21 +22,53 @@ const debounceMs = 100
 
 export function createMissingImporterRegisterFn(
   server: ViteDevServer
-): (id: string, resolved: string, ssr?: boolean) => void {
+): (id: string, resolved: string, ssr?: boolean) => OptimizedDepInfo {
   const { logger } = server.config
-  let knownOptimized = server._optimizeDepsMetadata!.optimized
-  let currentMissing: Record<string, string> = {}
+  let metadata = server._optimizeDepsMetadata!
+
   let handle: NodeJS.Timeout | undefined
+  let needFullReload: boolean = false
+
+  let depOptimizationProcessing = newDepOptimizationProcessing()
 
-  let pendingResolve: (() => void) | null = null
+  let lastDepOptimizationPromise = metadata.processing
 
   async function rerun(ssr: boolean | undefined) {
-    const newDeps = currentMissing
-    currentMissing = {}
+    // debounce time to wait for new missing deps finished, issue a new
+    // optimization of deps (both old and newly found) once the previous
+    // optimizeDeps processing is finished
+
+    // a succesful completion of the optimizeDeps rerun will end up
+    // creating new bundled version of all current and discovered deps
+    // in the cache dir and a new metadata info object assigned
+    // to server._optimizeDepsMetadata. A fullReload is only issued if
+    // the previous bundled dependencies have changed.
+
+    // if the rerun fails, server._optimizeDepsMetadata remains untouched,
+    // current discovered deps are cleaned, and a fullReload is issued
+
+    // optimizeDeps needs to be run in serie. Await until the previous
+    // rerun is finished here. It could happen that two reruns are queued
+    // in that case, we only need to run one of them
+    const awaitedOptimizeDepsPromise = lastDepOptimizationPromise
+
+    await lastDepOptimizationPromise
+
+    if (awaitedOptimizeDepsPromise !== lastDepOptimizationPromise) {
+      // There were two or more rerun queued and one of them already
+      // started. Only let through the first one, and discard the others
+      return
+    }
+
+    if (handle) {
+      // New deps could have been found here, skip this rerun. Once the
+      // debounce time is over, a new rerun will be issued
+      return
+    }
 
     logger.info(
       colors.yellow(
-        `new dependencies found: ${Object.keys(newDeps).join(
+        `new dependencies found: ${Object.keys(metadata.discovered).join(
           ', '
         )}, updating...`
       ),
@@ -34,50 +77,100 @@ export function createMissingImporterRegisterFn(
       }
     )
 
-    for (const id in knownOptimized) {
-      newDeps[id] = knownOptimized[id].src
-    }
+    // All deps, previous known and newly discovered are rebundled,
+    // respect insertion order to keep the metadata file stable
+    const newDeps = { ...metadata.optimized, ...metadata.discovered }
+    const thisDepOptimizationProcessing = depOptimizationProcessing
 
-    try {
-      // Nullify previous metadata so that the resolver won't
-      // resolve to optimized files during the optimizer re-run
-      server._isRunningOptimizer = true
-      server._optimizeDepsMetadata = null
+    // Other rerun will await until this run is finished
+    lastDepOptimizationPromise = thisDepOptimizationProcessing.promise
+
+    let processingResult: DepOptimizationResult | undefined
 
-      const newData = (server._optimizeDepsMetadata = await optimizeDeps(
+    // Create a new promise for the next rerun, discovered missing
+    // dependencies will be asigned this promise from this point
+    depOptimizationProcessing = newDepOptimizationProcessing()
+
+    let newData: DepOptimizationMetadata | null = null
+
+    try {
+      const optimizeDeps = await createOptimizeDepsRun(
         server.config,
         true,
         false,
+        metadata,
         newDeps,
         ssr
-      ))
-      knownOptimized = newData!.optimized
+      )
+
+      // We await the optimizeDeps run here, we are only going to use
+      // the newData if there wasn't an error
+      newData = optimizeDeps.metadata
+      processingResult = await optimizeDeps.run()
 
       // update ssr externals
       if (ssr) {
         server._ssrExternals = resolveSSRExternal(
           server.config,
-          Object.keys(knownOptimized)
+          Object.keys(newData.optimized)
         )
       }
 
-      logger.info(colors.green(`✨ dependencies updated, reloading page...`), {
-        timestamp: true
-      })
+      // While optimizeDeps is running, new missing deps may be discovered,
+      // in which case they will keep being added to metadata.discovered
+      for (const o of Object.keys(metadata.discovered)) {
+        if (!newData.optimized[o] && !newData.discovered[o]) {
+          newData.discovered[o] = metadata.discovered[o]
+          delete metadata.discovered[o]
+        }
+      }
+      newData.processing = thisDepOptimizationProcessing.promise
+      metadata = server._optimizeDepsMetadata = newData
+
+      if (!needFullReload && !processingResult?.alteredFiles) {
+        logger.info(colors.green(`✨ new dependencies pre-bundled...`), {
+          timestamp: true
+        })
+      } else {
+        if (Object.keys(metadata.discovered).length > 0) {
+          // There are newly discovered deps, and another rerun is about to be
+          // excecuted. Avoid the current full reload, but queue it for the next one
+          needFullReload = true
+          logger.info(
+            colors.green(
+              `✨ dependencies updated, delaying reload as new dependencies have been found...`
+            ),
+            {
+              timestamp: true
+            }
+          )
+        } else {
+          logger.info(
+            colors.green(`✨ dependencies updated, reloading page...`),
+            {
+              timestamp: true
+            }
+          )
+          fullReload()
+        }
+      }
     } catch (e) {
       logger.error(
         colors.red(`error while updating dependencies:\n${e.stack}`),
         { timestamp: true, error: e }
       )
+
+      // Reset missing deps, let the server rediscover the dependencies
+      metadata.discovered = {}
+      fullReload()
     } finally {
-      server._isRunningOptimizer = false
-      if (!handle) {
-        // No other rerun() pending so resolve and let pending requests proceed
-        pendingResolve && pendingResolve()
-        server._pendingReload = pendingResolve = null
-      }
+      // Rerun finished, resolve the promise to let awaiting requests or
+      // other rerun queued be processed
+      thisDepOptimizationProcessing.resolve()
     }
+  }
 
+  function fullReload() {
     // Cached transform results have stale imports (resolved to
     // old locations) so they need to be invalidated before the page is
     // reloaded.
@@ -87,25 +180,52 @@ export function createMissingImporterRegisterFn(
       type: 'full-reload',
       path: '*'
     })
+
+    needFullReload = false
   }
 
   return function registerMissingImport(
     id: string,
     resolved: string,
     ssr?: boolean
-  ) {
-    if (!knownOptimized[id]) {
-      currentMissing[id] = resolved
-      if (handle) clearTimeout(handle)
-      handle = setTimeout(() => {
-        handle = undefined
-        rerun(ssr)
-      }, debounceMs)
-      if (!server._pendingReload) {
-        server._pendingReload = new Promise((r) => {
-          pendingResolve = r
-        })
-      }
+  ): OptimizedDepInfo {
+    const optimized = metadata.optimized[id]
+    if (optimized) {
+      return optimized
+    }
+    let missing = metadata.discovered[id]
+    if (missing) {
+      // We are already discover this dependency
+      // It will be processed in the next rerun call
+      return missing
     }
+    missing = metadata.discovered[id] = {
+      file: getOptimizedDepPath(id, server.config),
+      src: resolved,
+      // Assing a browserHash to this missing dependency that is unique to
+      // the current state of known + missing deps. If its optimizeDeps run
+      // doesn't alter the bundled files of previous known dependendencies,
+      // we don't need a full reload and this browserHash will be kept
+      browserHash: getOptimizedBrowserHash(
+        metadata.hash,
+        depsFromOptimizedDepInfo(metadata.optimized),
+        depsFromOptimizedDepInfo(metadata.discovered)
+      ),
+      // loading of this pre-bundled dep needs to await for its processing
+      // promise to be resolved
+      processing: depOptimizationProcessing.promise
+    }
+
+    // Debounced rerun, let other missing dependencies be discovered before
+    // the running next optimizeDeps
+    if (handle) clearTimeout(handle)
+    handle = setTimeout(() => {
+      handle = undefined
+      rerun(ssr)
+    }, debounceMs)
+
+    // Return the path for the optimized bundle, this path is known before
+    // esbuild is run to generate the pre-bundle
+    return missing
   }
 }
diff --git a/packages/vite/src/node/plugins/importAnalysis.ts b/packages/vite/src/node/plugins/importAnalysis.ts
index 082aa35dfae213..3ff2000b6d3f7d 100644
--- a/packages/vite/src/node/plugins/importAnalysis.ts
+++ b/packages/vite/src/node/plugins/importAnalysis.ts
@@ -46,6 +46,11 @@ import { makeLegalIdentifier } from '@rollup/pluginutils'
 import { shouldExternalizeForSSR } from '../ssr/ssrExternal'
 import { performance } from 'perf_hooks'
 import { transformRequest } from '../server/transformRequest'
+import {
+  isOptimizedDepFile,
+  createIsOptimizedDepUrl,
+  getDepsCacheDir
+} from '../optimizer'
 
 const isDebug = !!process.env.DEBUG
 const debug = createDebugger('vite:import-analysis')
@@ -55,6 +60,8 @@ const clientDir = normalizePath(CLIENT_DIR)
 const skipRE = /\.(map|json)$/
 const canSkip = (id: string) => skipRE.test(id) || isDirectCSSRequest(id)
 
+const optimizedDepChunkRE = /\/chunk-[A-Z0-9]{8}\.js/
+
 function isExplicitImportRequired(url: string) {
   return !isJSRequest(cleanUrl(url)) && !isCSSRequest(url)
 }
@@ -100,12 +107,14 @@ export function importAnalysisPlugin(config: ResolvedConfig): Plugin {
   const clientPublicPath = path.posix.join(base, CLIENT_PUBLIC_PATH)
 
   let server: ViteDevServer
+  let isOptimizedDepUrl: (url: string) => boolean
 
   return {
     name: 'vite:import-analysis',
 
     configureServer(_server) {
       server = _server
+      isOptimizedDepUrl = createIsOptimizedDepUrl(server.config)
     },
 
     async transform(source, importer, options) {
@@ -221,8 +230,12 @@ export function importAnalysisPlugin(config: ResolvedConfig): Plugin {
         if (resolved.id.startsWith(root + '/')) {
           // in root: infer short absolute path from root
           url = resolved.id.slice(root.length)
-        } else if (fs.existsSync(cleanUrl(resolved.id))) {
-          // exists but out of root: rewrite to absolute /@fs/ paths
+        } else if (
+          resolved.id.startsWith(getDepsCacheDir(config)) ||
+          fs.existsSync(cleanUrl(resolved.id))
+        ) {
+          // an optimized deps may not yet exists in the filesystem, or
+          // a regular file exists but is out of root: rewrite to absolute /@fs/ paths
           url = path.posix.join(FS_PREFIX + resolved.id)
         } else {
           url = resolved.id
@@ -245,11 +258,16 @@ export function importAnalysisPlugin(config: ResolvedConfig): Plugin {
           // mark non-js/css imports with `?import`
           url = markExplicitImport(url)
 
+          // If the url isn't a request for a pre-bundled common chunk,
           // for relative js/css imports, or self-module virtual imports
           // (e.g. vue blocks), inherit importer's version query
           // do not do this for unknown type imports, otherwise the appended
           // query can break 3rd party plugin's extension checks.
-          if ((isRelative || isSelfImport) && !/[\?&]import=?\b/.test(url)) {
+          if (
+            (isRelative || isSelfImport) &&
+            !(isOptimizedDepUrl(url) && optimizedDepChunkRE.test(url)) &&
+            !/[\?&]import=?\b/.test(url)
+          ) {
             const versionMatch = importer.match(DEP_VERSION_RE)
             if (versionMatch) {
               url = injectQuery(url, versionMatch[1])
@@ -397,35 +415,53 @@ export function importAnalysisPlugin(config: ResolvedConfig): Plugin {
             specifier,
             start
           )
-          let url = normalizedUrl
+          const url = normalizedUrl
 
           // record as safe modules
           server?.moduleGraph.safeModulesPath.add(fsPathFromUrl(url))
 
           // rewrite
           if (url !== specifier) {
-            // for optimized cjs deps, support named imports by rewriting named
-            // imports to const assignments.
-            if (resolvedId.endsWith(`&es-interop`)) {
-              url = url.slice(0, -11)
-              if (isDynamicImport) {
-                // rewrite `import('package')` to expose the default directly
-                str().overwrite(
-                  dynamicIndex,
-                  end + 1,
-                  `import('${url}').then(m => m.default && m.default.__esModule ? m.default : ({ ...m.default, default: m.default }))`
-                )
-              } else {
-                const exp = source.slice(expStart, expEnd)
-                const rewritten = transformCjsImport(exp, url, rawUrl, index)
-                if (rewritten) {
-                  str().overwrite(expStart, expEnd, rewritten)
+            let rewriteDone = false
+            if (isOptimizedDepFile(resolvedId, config)) {
+              // for optimized cjs deps, support named imports by rewriting named
+              // imports to const assignments.
+              const optimizeDepsMetadata = server._optimizeDepsMetadata!
+              const { optimized } = optimizeDepsMetadata
+
+              // The browserHash in resolvedId could be stale in which case there will be a full
+              // page reload. We could return a 404 in that case but it is safe to return the request
+              const file = cleanUrl(resolvedId) // Remove ?v={hash}
+              const dep = Object.keys(optimized).find(
+                (k) => optimized[k].file === file
+              )
+
+              // Wait until the dependency has been pre-bundled
+              dep && (await optimized[dep].processing)
+
+              if (dep && optimized[dep].needsInterop) {
+                debug(`${dep} needs interop`)
+                if (isDynamicImport) {
+                  // rewrite `import('package')` to expose the default directly
+                  str().overwrite(
+                    dynamicIndex,
+                    end + 1,
+                    `import('${url}').then(m => m.default && m.default.__esModule ? m.default : ({ ...m.default, default: m.default }))`
+                  )
                 } else {
-                  // #1439 export * from '...'
-                  str().overwrite(start, end, url)
+                  const exp = source.slice(expStart, expEnd)
+                  const rewritten = transformCjsImport(exp, url, rawUrl, index)
+                  if (rewritten) {
+                    str().overwrite(expStart, expEnd, rewritten)
+                  } else {
+                    // #1439 export * from '...'
+                    str().overwrite(start, end, url)
+                  }
                 }
+                rewriteDone = true
               }
-            } else {
+            }
+            if (!rewriteDone) {
               str().overwrite(start, end, isDynamicImport ? `'${url}'` : url)
             }
           }
diff --git a/packages/vite/src/node/plugins/index.ts b/packages/vite/src/node/plugins/index.ts
index 5213714febb12b..825798a73c8493 100644
--- a/packages/vite/src/node/plugins/index.ts
+++ b/packages/vite/src/node/plugins/index.ts
@@ -3,6 +3,7 @@ import type { Plugin } from '../plugin'
 import aliasPlugin from '@rollup/plugin-alias'
 import { jsonPlugin } from './json'
 import { resolvePlugin } from './resolve'
+import { optimizedDepsPlugin } from './optimizedDeps'
 import { esbuildPlugin } from './esbuild'
 import { importAnalysisPlugin } from './importAnalysis'
 import { cssPlugin, cssPostPlugin } from './css'
@@ -47,6 +48,7 @@ export async function resolvePlugins(
       ssrConfig: config.ssr,
       asSrc: true
     }),
+    isBuild ? null : optimizedDepsPlugin(),
     htmlInlineProxyPlugin(config),
     cssPlugin(config),
     config.esbuild !== false ? esbuildPlugin(config.esbuild) : null,
diff --git a/packages/vite/src/node/plugins/optimizedDeps.ts b/packages/vite/src/node/plugins/optimizedDeps.ts
new file mode 100644
index 00000000000000..c7e03927cf6574
--- /dev/null
+++ b/packages/vite/src/node/plugins/optimizedDeps.ts
@@ -0,0 +1,117 @@
+import { promises as fs } from 'fs'
+import type { Plugin } from '../plugin'
+import colors from 'picocolors'
+import { DEP_VERSION_RE } from '../constants'
+import { cleanUrl, createDebugger } from '../utils'
+import { isOptimizedDepFile } from '../optimizer'
+import type { DepOptimizationMetadata, OptimizedDepInfo } from '../optimizer'
+import type { ViteDevServer } from '..'
+
+export const ERR_OPTIMIZE_DEPS_PROCESSING_ERROR =
+  'ERR_OPTIMIZE_DEPS_PROCESSING_ERROR'
+export const ERR_OUTDATED_OPTIMIZED_DEP = 'ERR_OUTDATED_OPTIMIZED_DEP'
+
+const isDebug = process.env.DEBUG
+const debug = createDebugger('vite:optimize-deps')
+
+export function optimizedDepsPlugin(): Plugin {
+  let server: ViteDevServer | undefined
+
+  return {
+    name: 'vite:optimized-deps',
+
+    configureServer(_server) {
+      server = _server
+    },
+
+    async load(id) {
+      if (server && isOptimizedDepFile(id, server.config)) {
+        const metadata = server?._optimizeDepsMetadata
+        if (metadata) {
+          const file = cleanUrl(id)
+          const versionMatch = id.match(DEP_VERSION_RE)
+          const browserHash = versionMatch
+            ? versionMatch[1].split('=')[1]
+            : undefined
+          const info = optimizeDepInfoFromFile(metadata, file)
+          if (info) {
+            if (browserHash && info.browserHash !== browserHash) {
+              throwOutdatedRequest(id)
+            }
+            try {
+              // This is an entry point, it may still not be bundled
+              await info.processing
+            } catch {
+              // If the refresh has not happened after timeout, Vite considers
+              // something unexpected has happened. In this case, Vite
+              // returns an empty response that will error.
+              throwProcessingError(id)
+              return
+            }
+            const newMetadata = server._optimizeDepsMetadata
+            if (metadata !== newMetadata) {
+              const currentInfo = optimizeDepInfoFromFile(newMetadata!, file)
+              if (info.browserHash !== currentInfo?.browserHash) {
+                throwOutdatedRequest(id)
+              }
+            }
+          }
+          isDebug && debug(`load ${colors.cyan(file)}`)
+          // Load the file from the cache instead of waiting for other plugin
+          // load hooks to avoid race conditions, once processing is resolved,
+          // we are sure that the file has been properly save to disk
+          try {
+            return await fs.readFile(file, 'utf-8')
+          } catch (e) {
+            // Outdated non-entry points (CHUNK), loaded after a rerun
+            throwOutdatedRequest(id)
+          }
+        }
+      }
+    }
+  }
+}
+
+function throwProcessingError(id: string) {
+  const err: any = new Error(
+    `Something unexpected happened while optimizing "${id}". ` +
+      `The current page should have reloaded by now`
+  )
+  err.code = ERR_OPTIMIZE_DEPS_PROCESSING_ERROR
+  // This error will be caught by the transform middleware that will
+  // send a 504 status code request timeout
+  throw err
+}
+
+function throwOutdatedRequest(id: string) {
+  const err: any = new Error(
+    `There is a new version of the pre-bundle for "${id}", ` +
+      `a page reload is going to ask for it.`
+  )
+  err.code = ERR_OUTDATED_OPTIMIZED_DEP
+  // This error will be caught by the transform middleware that will
+  // send a 504 status code request timeout
+  throw err
+}
+
+function optimizeDepInfoFromFile(
+  metadata: DepOptimizationMetadata,
+  file: string
+): OptimizedDepInfo | undefined {
+  return (
+    findFileInfo(metadata.optimized, file) ||
+    findFileInfo(metadata.discovered, file)
+  )
+}
+
+function findFileInfo(
+  dependenciesInfo: Record<string, OptimizedDepInfo>,
+  file: string
+): OptimizedDepInfo | undefined {
+  for (const o of Object.keys(dependenciesInfo)) {
+    const info = dependenciesInfo[o]
+    if (info.file === file) {
+      return info
+    }
+  }
+}
diff --git a/packages/vite/src/node/plugins/resolve.ts b/packages/vite/src/node/plugins/resolve.ts
index ce899abbdf1dc5..b5493aa7d2ef83 100644
--- a/packages/vite/src/node/plugins/resolve.ts
+++ b/packages/vite/src/node/plugins/resolve.ts
@@ -29,6 +29,8 @@ import {
   isPossibleTsOutput,
   getPotentialTsSrcPaths
 } from '../utils'
+import { createIsOptimizedDepUrl } from '../optimizer'
+import type { OptimizedDepInfo } from '../optimizer'
 import type { ViteDevServer, SSROptions } from '..'
 import type { PartialResolvedId } from 'rollup'
 import { resolve as _resolveExports } from 'resolve.exports'
@@ -87,6 +89,7 @@ export function resolvePlugin(baseOptions: InternalResolveOptions): Plugin {
     preferRelative = false
   } = baseOptions
   let server: ViteDevServer | undefined
+  let isOptimizedDepUrl: (url: string) => boolean
 
   const { target: ssrTarget, noExternal: ssrNoExternal } = ssrConfig ?? {}
 
@@ -95,6 +98,7 @@ export function resolvePlugin(baseOptions: InternalResolveOptions): Plugin {
 
     configureServer(_server) {
       server = _server
+      isOptimizedDepUrl = createIsOptimizedDepUrl(server.config)
     },
 
     resolveId(id, importer, resolveOpts) {
@@ -123,6 +127,15 @@ export function resolvePlugin(baseOptions: InternalResolveOptions): Plugin {
 
       let res: string | PartialResolvedId | undefined
 
+      // resolve pre-bundled deps requests, these could be resolved by
+      // tryFileResolve or /fs/ resolution but these files may not yet
+      // exists if we are in the middle of a deps re-processing
+      if (asSrc && isOptimizedDepUrl?.(id)) {
+        return id.startsWith(FS_PREFIX)
+          ? fsPathFromId(id)
+          : normalizePath(ensureVolumeInPath(path.resolve(root, id.slice(1))))
+      }
+
       // explicit fs paths that starts with /@fs/*
       if (asSrc && id.startsWith(FS_PREFIX)) {
         const fsPath = fsPathFromId(id)
@@ -572,8 +585,7 @@ export function tryNodeResolve(
     if (
       !resolved.includes('node_modules') || // linked
       !server || // build
-      server._isRunningOptimizer || // optimizing
-      !server._optimizeDepsMetadata
+      !server._registerMissingImport // initial esbuild scan phase
     ) {
       return { id: resolved }
     }
@@ -593,19 +605,24 @@ export function tryNodeResolve(
       // can cache it without re-validation, but only do so for known js types.
       // otherwise we may introduce duplicated modules for externalized files
       // from pre-bundled deps.
-      const versionHash = server._optimizeDepsMetadata?.browserHash
+
+      const versionHash = server._optimizeDepsMetadata?.hash
       if (versionHash && isJsType) {
         resolved = injectQuery(resolved, `v=${versionHash}`)
       }
     } else {
-      // this is a missing import.
-      // queue optimize-deps re-run.
-      server._registerMissingImport?.(id, resolved, ssr)
+      // this is a missing import, queue optimize-deps re-run and
+      // get a resolved its optimized info
+      const optimizedInfo = server._registerMissingImport!(id, resolved, ssr)
+      resolved = getOptimizedUrl(optimizedInfo)
     }
-    return { id: resolved }
+    return { id: resolved! }
   }
 }
 
+const getOptimizedUrl = (optimizedData: OptimizedDepInfo) =>
+  `${optimizedData.file}?v=${optimizedData.browserHash}`
+
 export function tryOptimizedResolve(
   id: string,
   server: ViteDevServer,
@@ -615,15 +632,6 @@ export function tryOptimizedResolve(
 
   if (!depData) return
 
-  const getOptimizedUrl = (optimizedData: typeof depData.optimized[string]) => {
-    return (
-      optimizedData.file +
-      `?v=${depData.browserHash}${
-        optimizedData.needsInterop ? `&es-interop` : ``
-      }`
-    )
-  }
-
   // check if id has been optimized
   const isOptimized = depData.optimized[id]
   if (isOptimized) {
diff --git a/packages/vite/src/node/server/index.ts b/packages/vite/src/node/server/index.ts
index bd3161717405df..9dba9f8ebb92d9 100644
--- a/packages/vite/src/node/server/index.ts
+++ b/packages/vite/src/node/server/index.ts
@@ -44,8 +44,8 @@ import { transformRequest } from './transformRequest'
 import type { ESBuildTransformResult } from '../plugins/esbuild'
 import { transformWithEsbuild } from '../plugins/esbuild'
 import type { TransformOptions as EsbuildTransformOptions } from 'esbuild'
-import type { DepOptimizationMetadata } from '../optimizer'
-import { optimizeDeps } from '../optimizer'
+import type { DepOptimizationMetadata, OptimizedDepInfo } from '../optimizer'
+import { createOptimizeDepsRun } from '../optimizer'
 import { ssrLoadModule } from '../ssr/ssrModuleLoader'
 import { resolveSSRExternal } from '../ssr/ssrExternal'
 import {
@@ -280,20 +280,16 @@ export interface ViteDevServer {
    * @internal
    */
   _forceOptimizeOnRestart: boolean
-  /**
-   * @internal
-   */
-  _isRunningOptimizer: boolean
   /**
    * @internal
    */
   _registerMissingImport:
-    | ((id: string, resolved: string, ssr: boolean | undefined) => void)
+    | ((
+        id: string,
+        resolved: string,
+        ssr: boolean | undefined
+      ) => OptimizedDepInfo)
     | null
-  /**
-   * @internal
-   */
-  _pendingReload: Promise<void> | null
   /**
    * @internal
    */
@@ -364,12 +360,17 @@ export async function createServer(
       return transformRequest(url, server, options)
     },
     transformIndexHtml: null!, // to be immediately set
-    ssrLoadModule(url, opts?: { fixStacktrace?: boolean }) {
+    async ssrLoadModule(url, opts?: { fixStacktrace?: boolean }) {
+      let configFileDependencies: string[] = []
+      const metadata = server._optimizeDepsMetadata
+      if (metadata) {
+        await metadata.processing
+        configFileDependencies = Object.keys(metadata.optimized)
+      }
+
       server._ssrExternals ||= resolveSSRExternal(
         config,
-        server._optimizeDepsMetadata
-          ? Object.keys(server._optimizeDepsMetadata.optimized)
-          : []
+        configFileDependencies
       )
       return ssrLoadModule(
         url,
@@ -425,9 +426,7 @@ export async function createServer(
     _globImporters: Object.create(null),
     _restartPromise: null,
     _forceOptimizeOnRestart: false,
-    _isRunningOptimizer: false,
     _registerMissingImport: null,
-    _pendingReload: null,
     _pendingRequests: new Map()
   }
 
@@ -570,15 +569,19 @@ export async function createServer(
   middlewares.use(errorMiddleware(server, !!middlewareMode))
 
   const runOptimize = async () => {
-    server._isRunningOptimizer = true
-    try {
-      server._optimizeDepsMetadata = await optimizeDeps(
-        config,
-        config.server.force
-      )
-    } finally {
-      server._isRunningOptimizer = false
-    }
+    const optimizeDeps = await createOptimizeDepsRun(
+      config,
+      config.server.force
+    )
+
+    // Don't await for the optimization to finish, we can start the
+    // server right away here
+    server._optimizeDepsMetadata = optimizeDeps.metadata
+    optimizeDeps.run()
+
+    // While running the first optimizeDeps, _registerMissingImport is null
+    // so the resolve plugin resolves straight to node_modules during the
+    // deps discovery scan phase
     server._registerMissingImport = createMissingImporterRegisterFn(server)
   }
 
diff --git a/packages/vite/src/node/server/middlewares/transform.ts b/packages/vite/src/node/server/middlewares/transform.ts
index 15f2355e0e389c..ae7bec6e185113 100644
--- a/packages/vite/src/node/server/middlewares/transform.ts
+++ b/packages/vite/src/node/server/middlewares/transform.ts
@@ -1,3 +1,4 @@
+import { promises as fs } from 'fs'
 import path from 'path'
 import type { ViteDevServer } from '..'
 import type { Connect } from 'types/connect'
@@ -11,28 +12,29 @@ import {
   prettifyUrl,
   removeImportQuery,
   removeTimestampQuery,
-  unwrapId
+  unwrapId,
+  fsPathFromId,
+  ensureVolumeInPath
 } from '../../utils'
 import { send } from '../send'
 import { transformRequest } from '../transformRequest'
 import { isHTMLProxy } from '../../plugins/html'
 import colors from 'picocolors'
 import {
-  CLIENT_PUBLIC_PATH,
   DEP_VERSION_RE,
-  NULL_BYTE_PLACEHOLDER
+  NULL_BYTE_PLACEHOLDER,
+  FS_PREFIX
 } from '../../constants'
 import {
   isCSSRequest,
   isDirectCSSRequest,
   isDirectRequest
 } from '../../plugins/css'
-
-/**
- * Time (ms) Vite has to full-reload the page before returning
- * an empty response.
- */
-const NEW_DEPENDENCY_BUILD_TIMEOUT = 1000
+import {
+  ERR_OPTIMIZE_DEPS_PROCESSING_ERROR,
+  ERR_OUTDATED_OPTIMIZED_DEP
+} from '../../plugins/optimizedDeps'
+import { createIsOptimizedDepUrl } from '../../optimizer'
 
 const debugCache = createDebugger('vite:cache')
 const isDebug = !!process.env.DEBUG
@@ -43,19 +45,11 @@ export function transformMiddleware(
   server: ViteDevServer
 ): Connect.NextHandleFunction {
   const {
-    config: { root, logger, cacheDir },
+    config: { root, logger },
     moduleGraph
   } = server
 
-  // determine the url prefix of files inside cache directory
-  const cacheDirRelative = normalizePath(path.relative(root, cacheDir))
-  const cacheDirPrefix = cacheDirRelative.startsWith('../')
-    ? // if the cache directory is outside root, the url prefix would be something
-      // like '/@fs/absolute/path/to/node_modules/.vite'
-      `/@fs/${normalizePath(cacheDir).replace(/^\//, '')}`
-    : // if the cache directory is inside root, the url prefix would be something
-      // like '/node_modules/.vite'
-      `/${cacheDirRelative}`
+  const isOptimizedDepUrl = createIsOptimizedDepUrl(server.config)
 
   // Keep the named function. The name is visible in debug logs via `DEBUG=connect:dispatcher ...`
   return async function viteTransformMiddleware(req, res, next) {
@@ -63,36 +57,6 @@ export function transformMiddleware(
       return next()
     }
 
-    if (
-      server._pendingReload &&
-      // always allow vite client requests so that it can trigger page reload
-      !req.url?.startsWith(CLIENT_PUBLIC_PATH) &&
-      !req.url?.includes('vite/dist/client')
-    ) {
-      try {
-        // missing dep pending reload, hold request until reload happens
-        await Promise.race([
-          server._pendingReload,
-          // If the refresh has not happened after timeout, Vite considers
-          // something unexpected has happened. In this case, Vite
-          // returns an empty response that will error.
-          new Promise((_, reject) =>
-            setTimeout(reject, NEW_DEPENDENCY_BUILD_TIMEOUT)
-          )
-        ])
-      } catch {
-        // Don't do anything if response has already been sent
-        if (!res.writableEnded) {
-          // status code request timeout
-          res.statusCode = 408
-          res.end(
-            `<h1>[vite] Something unexpected happened while optimizing "${req.url}"<h1>` +
-              `<p>The current page should have reloaded by now</p>`
-          )
-        }
-        return
-      }
-    }
     let url: string
     try {
       url = decodeURI(removeTimestampQuery(req.url!)).replace(
@@ -109,15 +73,47 @@ export function transformMiddleware(
       const isSourceMap = withoutQuery.endsWith('.map')
       // since we generate source map references, handle those requests here
       if (isSourceMap) {
-        const originalUrl = url.replace(/\.map($|\?)/, '$1')
-        const map = (await moduleGraph.getModuleByUrl(originalUrl, false))
-          ?.transformResult?.map
-        if (map) {
-          return send(req, res, JSON.stringify(map), 'json', {
-            headers: server.config.server.headers
-          })
+        if (isOptimizedDepUrl(url)) {
+          // If the browser is requesting a source map for an optimized dep, it
+          // means that the dependency has already been pre-bundled and loaded
+          const mapFile = url.startsWith(FS_PREFIX)
+            ? fsPathFromId(url)
+            : normalizePath(
+                ensureVolumeInPath(path.resolve(root, url.slice(1)))
+              )
+          try {
+            const map = await fs.readFile(mapFile, 'utf-8')
+            return send(req, res, map, 'json', {
+              headers: server.config.server.headers
+            })
+          } catch (e) {
+            // Outdated source map request for optimized deps, this isn't an error
+            // but part of the normal flow when re-optimizing after missing deps
+            // Send back an empty source map so the browser doesn't issue warnings
+            const dummySourceMap = {
+              version: 3,
+              file: mapFile.replace(/\.map$/, ''),
+              sources: [],
+              sourcesContent: [],
+              names: [],
+              mappings: ';;;;;;;;;'
+            }
+            return send(req, res, JSON.stringify(dummySourceMap), 'json', {
+              cacheControl: 'no-cache',
+              headers: server.config.server.headers
+            })
+          }
         } else {
-          return next()
+          const originalUrl = url.replace(/\.map($|\?)/, '$1')
+          const map = (await moduleGraph.getModuleByUrl(originalUrl, false))
+            ?.transformResult?.map
+          if (map) {
+            return send(req, res, JSON.stringify(map), 'json', {
+              headers: server.config.server.headers
+            })
+          } else {
+            return next()
+          }
         }
       }
 
@@ -179,9 +175,7 @@ export function transformMiddleware(
         })
         if (result) {
           const type = isDirectCSSRequest(url) ? 'css' : 'js'
-          const isDep =
-            DEP_VERSION_RE.test(url) ||
-            (cacheDirPrefix && url.startsWith(cacheDirPrefix))
+          const isDep = DEP_VERSION_RE.test(url) || isOptimizedDepUrl(url)
           return send(req, res, result.code, type, {
             etag: result.etag,
             // allow browser to cache npm deps!
@@ -192,6 +186,30 @@ export function transformMiddleware(
         }
       }
     } catch (e) {
+      if (e?.code === ERR_OPTIMIZE_DEPS_PROCESSING_ERROR) {
+        if (!res.writableEnded) {
+          // Don't do anything if response has already been sent
+          res.statusCode = 504 // status code request timeout
+          res.end()
+        }
+        // This timeout is unexpected
+        logger.error(e.message)
+        return
+      }
+      if (e?.code === ERR_OUTDATED_OPTIMIZED_DEP) {
+        if (!res.writableEnded) {
+          // Don't do anything if response has already been sent
+          res.statusCode = 504 // status code request timeout
+          res.end()
+        }
+        // We don't need to log an error in this case, the request
+        // is outdated because new dependencies were discovered and
+        // the new pre-bundle dependendencies have changed.
+        // A full-page reload has been issued, and these old requests
+        // can't be properly fullfilled. This isn't an unexpected
+        // error but a normal part of the missing deps discovery flow
+        return
+      }
       return next(e)
     }
 

From 3c0a6091fe96044e9dd84fbe5db3343339a88986 Mon Sep 17 00:00:00 2001
From: yoho <907415276@qq.com>
Date: Thu, 3 Mar 2022 21:46:25 +0800
Subject: [PATCH 44/50] fix: execute classic worker in dev mode (#7099)

---
 .prettierignore                               |  1 +
 .../worker/__tests__/worker.spec.ts           |  7 +-
 packages/playground/worker/classic-worker.js  | 29 ++++++
 packages/playground/worker/index.html         | 23 +++--
 .../worker/newUrl/classic-shared-worker.js    |  6 ++
 .../worker/newUrl/classic-worker.js           |  5 ++
 packages/playground/worker/public/classic.js  |  1 +
 packages/vite/src/node/importGlob.ts          | 52 ++++-------
 .../src/node/plugins/workerImportMetaUrl.ts   | 88 +++++++++++++++++--
 packages/vite/src/node/utils.ts               |  2 +
 10 files changed, 164 insertions(+), 50 deletions(-)
 create mode 100644 packages/playground/worker/classic-worker.js
 create mode 100644 packages/playground/worker/newUrl/classic-shared-worker.js
 create mode 100644 packages/playground/worker/newUrl/classic-worker.js
 create mode 100644 packages/playground/worker/public/classic.js

diff --git a/.prettierignore b/.prettierignore
index 1692b9d26cfa20..c624a3a21eecfe 100644
--- a/.prettierignore
+++ b/.prettierignore
@@ -10,3 +10,4 @@ pnpm-lock.yaml
 pnpm-workspace.yaml
 packages/playground/tsconfig-json-load-error/has-error/tsconfig.json
 packages/playground/html/invalid.html
+packages/playground/worker/classic-worker.js
diff --git a/packages/playground/worker/__tests__/worker.spec.ts b/packages/playground/worker/__tests__/worker.spec.ts
index 5992a37f933f2a..1c33e6ec68daf9 100644
--- a/packages/playground/worker/__tests__/worker.spec.ts
+++ b/packages/playground/worker/__tests__/worker.spec.ts
@@ -56,7 +56,7 @@ if (isBuild) {
   // assert correct files
   test('inlined code generation', async () => {
     const files = fs.readdirSync(assetsDir)
-    expect(files.length).toBe(6)
+    expect(files.length).toBe(8)
     const index = files.find((f) => f.includes('index'))
     const content = fs.readFileSync(path.resolve(assetsDir, index), 'utf-8')
     const worker = files.find((f) => f.includes('my-worker'))
@@ -88,3 +88,8 @@ if (isBuild) {
       })
   })
 }
+
+test('classic worker is run', async () => {
+  expect(await page.textContent('.classic-worker')).toMatch('A classic')
+  expect(await page.textContent('.classic-shared-worker')).toMatch('A classic')
+})
diff --git a/packages/playground/worker/classic-worker.js b/packages/playground/worker/classic-worker.js
new file mode 100644
index 00000000000000..bb6f9c3f49fc84
--- /dev/null
+++ b/packages/playground/worker/classic-worker.js
@@ -0,0 +1,29 @@
+// prettier-ignore
+function text(el, text) {
+  document.querySelector(el).textContent = text
+}
+
+const classicWorker = new Worker(
+  new URL('./newUrl/classic-worker.js', import.meta.url) /* , */  ,
+  // test comment
+
+)
+
+classicWorker.addEventListener('message', ({ data }) => {
+  text('.classic-worker', data)
+})
+classicWorker.postMessage('ping')
+
+const classicSharedWorker = new SharedWorker(
+  new URL('./newUrl/classic-shared-worker.js', import.meta.url),
+  {
+    type: 'classic'
+  }
+)
+classicSharedWorker.port.addEventListener('message', (ev) => {
+  text(
+    '.classic-shared-worker',
+    ev.data
+  )
+})
+classicSharedWorker.port.start()
diff --git a/packages/playground/worker/index.html b/packages/playground/worker/index.html
index be0b3becb5f94f..10207453712aa2 100644
--- a/packages/playground/worker/index.html
+++ b/packages/playground/worker/index.html
@@ -20,18 +20,25 @@
   <span class="tick-count">0</span>
 </div>
 
-<p>new Worker(new Url('path', import.meta.url))</p>
+<p>new Worker(new Url('path', import.meta.url), { type: 'module' })</p>
 <div class="worker-import-meta-url"></div>
 
-<p>new SharedWorker(new Url('path', import.meta.url))</p>
+<p>new SharedWorker(new Url('path', import.meta.url), { type: 'module' })</p>
 <div class="shared-worker-import-meta-url"></div>
 
+<p>new Worker(new Url('path', import.meta.url))</p>
+<div class="classic-worker"></div>
+
+<p>new Worker(new Url('path', import.meta.url), { type: 'classic' })</p>
+<div class="classic-shared-worker"></div>
+
 <script type="module">
   import myWorker from './my-worker?worker'
   import InlineWorker from './my-worker?worker&inline'
   import mySharedWorker from './my-shared-worker?sharedworker&name=shared'
   import TSOutputWorker from './possible-ts-output-worker?worker'
   import { mode } from './workerImport'
+  import './classic-worker'
 
   document.querySelector('.mode-true').textContent = mode
 
@@ -78,11 +85,12 @@
   function text(el, text) {
     document.querySelector(el).textContent = text
   }
-
+  const workerOptions = { type: 'module' }
   // url import worker
-  const w = new Worker(new URL('./newUrl/url-worker.js', import.meta.url), {
-    type: 'module'
-  })
+  const w = new Worker(
+    new URL('./newUrl/url-worker.js', import.meta.url),
+    /* @vite-ignore */ workerOptions
+  )
   w.addEventListener('message', (ev) =>
     text(
       '.worker-import-meta-url',
@@ -90,9 +98,12 @@
     )
   )
 
+  const genWorkerName = () => 'module'
   const w2 = new SharedWorker(
     new URL('./newUrl/url-shared-worker.js', import.meta.url),
     {
+      /* @vite-ignore */
+      name: genWorkerName(),
       type: 'module'
     }
   )
diff --git a/packages/playground/worker/newUrl/classic-shared-worker.js b/packages/playground/worker/newUrl/classic-shared-worker.js
new file mode 100644
index 00000000000000..462e49dfa8847f
--- /dev/null
+++ b/packages/playground/worker/newUrl/classic-shared-worker.js
@@ -0,0 +1,6 @@
+importScripts('/classic.js')
+
+self.onconnect = (event) => {
+  const port = event.ports[0]
+  port.postMessage(self.constant)
+}
diff --git a/packages/playground/worker/newUrl/classic-worker.js b/packages/playground/worker/newUrl/classic-worker.js
new file mode 100644
index 00000000000000..865810c76fbf85
--- /dev/null
+++ b/packages/playground/worker/newUrl/classic-worker.js
@@ -0,0 +1,5 @@
+importScripts('/classic.js')
+
+self.addEventListener('message', () => {
+  self.postMessage(self.constant)
+})
diff --git a/packages/playground/worker/public/classic.js b/packages/playground/worker/public/classic.js
new file mode 100644
index 00000000000000..c074cc050c2587
--- /dev/null
+++ b/packages/playground/worker/public/classic.js
@@ -0,0 +1 @@
+self.constant = 'A classic'
diff --git a/packages/vite/src/node/importGlob.ts b/packages/vite/src/node/importGlob.ts
index faa65da8cdafd9..41bbb90a1f8a37 100644
--- a/packages/vite/src/node/importGlob.ts
+++ b/packages/vite/src/node/importGlob.ts
@@ -8,7 +8,12 @@ import {
   preloadMarker
 } from './plugins/importAnalysisBuild'
 import { isCSSRequest } from './plugins/css'
-import { cleanUrl } from './utils'
+import {
+  cleanUrl,
+  singlelineCommentsRE,
+  multilineCommentsRE,
+  blankReplacer
+} from './utils'
 import type { RollupError } from 'rollup'
 
 export interface AssertOptions {
@@ -182,45 +187,20 @@ function lexGlobPattern(
         throw new Error('unknown import.meta.glob lexer state')
     }
   }
+  const noCommentCode = code
+    .slice(i + 1)
+    .replace(singlelineCommentsRE, blankReplacer)
+    .replace(multilineCommentsRE, blankReplacer)
+
+  const endIndex = noCommentCode.indexOf(')')
+  const options = noCommentCode.substring(0, endIndex)
+  const commaIndex = options.indexOf(',')
 
-  const endIndex = getEndIndex(code, i)
-  const options = code.substring(i + 1, endIndex)
-  const commaIndex = options.indexOf(`,`)
   let assert = {}
   if (commaIndex > -1) {
-    assert = JSON5.parse(options.substr(commaIndex + 1))
-  }
-  return [pattern, assert, endIndex + 1]
-}
-
-// reg without the 'g' option, only matches the first match
-const multilineCommentsRE = /\/\*(.|[\r\n])*?\*\//m
-const singlelineCommentsRE = /\/\/.*/
-
-function getEndIndex(code: string, i: number): number {
-  const findStart = i
-  const endIndex = code.indexOf(`)`, findStart)
-  const subCode = code.substring(findStart)
-
-  const matched =
-    subCode.match(singlelineCommentsRE) ?? subCode.match(multilineCommentsRE)
-  if (!matched) {
-    return endIndex
-  }
-
-  const str = matched[0]
-  const index = matched.index
-  if (!index) {
-    return endIndex
-  }
-
-  const commentStart = findStart + index
-  const commentEnd = commentStart + str.length
-  if (endIndex > commentStart && endIndex < commentEnd) {
-    return getEndIndex(code, commentEnd)
-  } else {
-    return endIndex
+    assert = JSON5.parse(options.substring(commaIndex + 1))
   }
+  return [pattern, assert, endIndex + i + 2]
 }
 
 function error(pos: number) {
diff --git a/packages/vite/src/node/plugins/workerImportMetaUrl.ts b/packages/vite/src/node/plugins/workerImportMetaUrl.ts
index 13c0ef2bb3883b..023b567ab9fb45 100644
--- a/packages/vite/src/node/plugins/workerImportMetaUrl.ts
+++ b/packages/vite/src/node/plugins/workerImportMetaUrl.ts
@@ -1,7 +1,9 @@
+import JSON5 from 'json5'
 import type { ResolvedConfig } from '../config'
 import type { Plugin } from '../plugin'
 import { getAssetHash, fileToUrl } from './asset'
 import {
+  blankReplacer,
   cleanUrl,
   injectQuery,
   multilineCommentsRE,
@@ -10,22 +12,90 @@ import {
 import path from 'path'
 import { bundleWorkerEntry } from './worker'
 import { parseRequest } from '../utils'
-import { ENV_PUBLIC_PATH } from '../constants'
+import { ENV_ENTRY, ENV_PUBLIC_PATH } from '../constants'
 import MagicString from 'magic-string'
+import type { ViteDevServer } from '..'
+
+type WorkerType = 'classic' | 'module' | 'ignore'
 
 const WORKER_FILE_ID = 'worker_url_file'
 
+function getWorkerType(
+  code: string,
+  noCommentsCode: string,
+  i: number
+): WorkerType {
+  const commaIndex = noCommentsCode.indexOf(',', i)
+  if (commaIndex === -1) {
+    return 'classic'
+  }
+  const endIndex = noCommentsCode.indexOf(')', i)
+
+  // need to find in comment code
+  let workerOptsString = code.substring(commaIndex + 1, endIndex)
+  const hasViteIgnore = /\/\*\s*@vite-ignore\s*\*\//.test(workerOptsString)
+  if (hasViteIgnore) {
+    return 'ignore'
+  }
+
+  // need to find in no comment code
+  workerOptsString = noCommentsCode.substring(commaIndex + 1, endIndex)
+  if (!workerOptsString.trim().length) {
+    return 'classic'
+  }
+
+  let workerOpts: { type: WorkerType } = { type: 'classic' }
+  try {
+    workerOpts = JSON5.parse(workerOptsString)
+  } catch (e) {
+    // can't parse by JSON5, so the worker options had unexpect char.
+    throw new Error(
+      'Vite is unable to parse the worker options as the value is not static.' +
+        'To ignore this error, please use /* @vite-ignore */ in the worker options.'
+    )
+  }
+
+  if (['classic', 'module'].includes(workerOpts.type)) {
+    return workerOpts.type
+  }
+  return 'classic'
+}
+
 export function workerImportMetaUrlPlugin(config: ResolvedConfig): Plugin {
   const isBuild = config.command === 'build'
+  let server: ViteDevServer
 
   return {
     name: 'vite:worker-import-meta-url',
 
+    configureServer(_server) {
+      server = _server
+    },
+
     async transform(code, id, options) {
       const query = parseRequest(id)
-      if (query && query[WORKER_FILE_ID] != null) {
+      if (query && query[WORKER_FILE_ID] != null && query['type'] != null) {
+        const workerType = query['type'] as WorkerType
+        let injectEnv = ''
+
+        if (workerType === 'classic') {
+          injectEnv = `importScripts('${ENV_PUBLIC_PATH}')\n`
+        } else if (workerType === 'module') {
+          injectEnv = `import '${ENV_PUBLIC_PATH}'\n`
+        } else if (workerType === 'ignore') {
+          if (isBuild) {
+            injectEnv = ''
+          } else if (server) {
+            // dynamic worker type we can't know how import the env
+            // so we copy /@vite/env code of server transform result into file header
+            const { moduleGraph } = server
+            const module = moduleGraph.getModuleById(ENV_ENTRY)
+            injectEnv = module?.transformResult?.code || ''
+          }
+        }
+
         return {
-          code: `import '${ENV_PUBLIC_PATH}'\n` + code
+          code: injectEnv + code
         }
       }
       if (
@@ -36,13 +106,12 @@ export function workerImportMetaUrlPlugin(config: ResolvedConfig): Plugin {
         const importMetaUrlRE =
           /\bnew\s+(Worker|SharedWorker)\s*\(\s*(new\s+URL\s*\(\s*('[^']+'|"[^"]+"|`[^`]+`)\s*,\s*import\.meta\.url\s*\))/g
         const noCommentsCode = code
-          .replace(multilineCommentsRE, (m) => ' '.repeat(m.length))
-          .replace(singlelineCommentsRE, (m) => ' '.repeat(m.length))
+          .replace(multilineCommentsRE, blankReplacer)
+          .replace(singlelineCommentsRE, blankReplacer)
         let match: RegExpExecArray | null
         let s: MagicString | null = null
         while ((match = importMetaUrlRE.exec(noCommentsCode))) {
           const { 0: allExp, 2: exp, 3: rawUrl, index } = match
-
           const urlIndex = allExp.indexOf(exp) + index
 
           if (options?.ssr) {
@@ -61,7 +130,11 @@ export function workerImportMetaUrlPlugin(config: ResolvedConfig): Plugin {
           }
 
           s ||= new MagicString(code)
-
+          const workerType = getWorkerType(
+            code,
+            noCommentsCode,
+            index + allExp.length
+          )
           const file = path.resolve(path.dirname(id), rawUrl.slice(1, -1))
           let url: string
           if (isBuild) {
@@ -80,6 +153,7 @@ export function workerImportMetaUrlPlugin(config: ResolvedConfig): Plugin {
           } else {
             url = await fileToUrl(cleanUrl(file), config, this)
             url = injectQuery(url, WORKER_FILE_ID)
+            url = injectQuery(url, `type=${workerType}`)
           }
           s.overwrite(urlIndex, urlIndex + exp.length, JSON.stringify(url))
         }
diff --git a/packages/vite/src/node/utils.ts b/packages/vite/src/node/utils.ts
index fb479a511abbd4..f830944da879cc 100644
--- a/packages/vite/src/node/utils.ts
+++ b/packages/vite/src/node/utils.ts
@@ -696,3 +696,5 @@ export function parseRequest(id: string): Record<string, string> | null {
   }
   return Object.fromEntries(new URLSearchParams(search.slice(1)))
 }
+
+export const blankReplacer = (match: string) => ' '.repeat(match.length)

From a4927c51da5f3ec1b7cf4701f3bab0fbd91d7221 Mon Sep 17 00:00:00 2001
From: Anthony Fu <anthonyfu117@hotmail.com>
Date: Fri, 4 Mar 2022 05:04:10 +0800
Subject: [PATCH 45/50] fix(ssr): bypass missing resolve error in SSR (#7164)

---
 packages/vite/src/node/plugins/importAnalysis.ts | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/packages/vite/src/node/plugins/importAnalysis.ts b/packages/vite/src/node/plugins/importAnalysis.ts
index 3ff2000b6d3f7d..76dfe77a8cfe96 100644
--- a/packages/vite/src/node/plugins/importAnalysis.ts
+++ b/packages/vite/src/node/plugins/importAnalysis.ts
@@ -213,6 +213,10 @@ export function importAnalysisPlugin(config: ResolvedConfig): Plugin {
         const resolved = await this.resolve(url, importerFile)
 
         if (!resolved) {
+          // in ssr, we should let node handle the missing modules
+          if (ssr) {
+            return [url, url]
+          }
           this.error(
             `Failed to resolve import "${url}" from "${path.relative(
               process.cwd(),

From e626055eebf37c784c62da369b7249e233c5ca42 Mon Sep 17 00:00:00 2001
From: Bjorn Lu <bjornlu.dev@gmail.com>
Date: Sat, 5 Mar 2022 01:27:08 +0800
Subject: [PATCH 46/50] feat: show all prebundle deps when debug (#6726)

---
 packages/vite/src/node/optimizer/index.ts | 24 +++++++++++++++--------
 1 file changed, 16 insertions(+), 8 deletions(-)

diff --git a/packages/vite/src/node/optimizer/index.ts b/packages/vite/src/node/optimizer/index.ts
index 0cae19ec0f0769..5455de5cc23e06 100644
--- a/packages/vite/src/node/optimizer/index.ts
+++ b/packages/vite/src/node/optimizer/index.ts
@@ -1,5 +1,6 @@
 import fs from 'fs'
 import path from 'path'
+import _debug from 'debug'
 import colors from 'picocolors'
 import { createHash } from 'crypto'
 import type { BuildOptions as EsbuildBuildOptions } from 'esbuild'
@@ -21,6 +22,7 @@ import { transformWithEsbuild } from '../plugins/esbuild'
 import { performance } from 'perf_hooks'
 
 const debug = createDebugger('vite:deps')
+const isDebugEnabled = _debug('vite:deps').enabled
 
 export type ExportsData = ReturnType<typeof parse> & {
   // es-module-lexer has a facade detection but isn't always accurate for our
@@ -339,14 +341,20 @@ export async function createOptimizeDepsRun(
       return
     }
 
-    const total = qualifiedIds.length
-    const maxListed = 5
-    const listed = Math.min(total, maxListed)
-    const extra = Math.max(0, total - maxListed)
-    const depsString = colors.yellow(
-      qualifiedIds.slice(0, listed).join(`\n  `) +
-        (extra > 0 ? `\n  (...and ${extra} more)` : ``)
-    )
+    let depsString: string
+    if (isDebugEnabled) {
+      depsString = colors.yellow(qualifiedIds.join(`\n  `))
+    } else {
+      const total = qualifiedIds.length
+      const maxListed = 5
+      const listed = Math.min(total, maxListed)
+      const extra = Math.max(0, total - maxListed)
+      depsString = colors.yellow(
+        qualifiedIds.slice(0, listed).join(`\n  `) +
+          (extra > 0 ? `\n  (...and ${extra} more)` : ``)
+      )
+    }
+
     if (!asCommand) {
       if (!newDeps) {
         // This is auto run on server start - let the user know that we are

From 6cb0647834762bca9aa0cef542719882b42c2cf0 Mon Sep 17 00:00:00 2001
From: Dominik G <dominik.goepel@gmx.de>
Date: Fri, 4 Mar 2022 21:16:49 +0100
Subject: [PATCH 47/50] fix: revert #6340, definePlugin tests, warning box
 (#7174)

Co-authored-by: patak-dev <matias.capeletto@gmail.com>
---
 docs/config/index.md                          |  2 +
 .../define/__tests__/define.spec.ts           |  9 -----
 packages/playground/define/index.html         |  6 ---
 packages/playground/define/vite.config.js     |  5 +--
 .../src/node/__tests__/plugins/define.spec.ts | 39 +++++++++++++++++++
 packages/vite/src/node/plugins/define.ts      | 39 +++++++------------
 6 files changed, 57 insertions(+), 43 deletions(-)
 create mode 100644 packages/vite/src/node/__tests__/plugins/define.spec.ts

diff --git a/docs/config/index.md b/docs/config/index.md
index 27234b01a9b4af..4d42063e30e82c 100644
--- a/docs/config/index.md
+++ b/docs/config/index.md
@@ -139,9 +139,11 @@ export default defineConfig(async ({ command, mode }) => {
 
   - Replacements are performed only when the match is surrounded by word boundaries (`\b`).
 
+  ::: warning
   Because it's implemented as straightforward text replacements without any syntax analysis, we recommend using `define` for CONSTANTS only.
 
   For example, `process.env.FOO` and `__APP_VERSION__` are good fits. But `process` or `global` should not be put into this option. Variables can be shimmed or polyfilled instead.
+  :::
 
   ::: tip NOTE
   For TypeScript users, make sure to add the type declarations in the `env.d.ts` or `vite-env.d.ts` file to get type checks and Intellisense.
diff --git a/packages/playground/define/__tests__/define.spec.ts b/packages/playground/define/__tests__/define.spec.ts
index f417026ebd186d..f5eb78ea4e2766 100644
--- a/packages/playground/define/__tests__/define.spec.ts
+++ b/packages/playground/define/__tests__/define.spec.ts
@@ -20,13 +20,4 @@ test('string', async () => {
   expect(await page.textContent('.spread-array')).toBe(
     JSON.stringify([...defines.__STRING__])
   )
-  expect(await page.textContent('.import-file')).not.toBe(
-    `import * from "${defines.__IMPORT_FILE_NAME__}"`
-  )
-  expect(await page.textContent('.export-file')).not.toBe(
-    `export * from "${defines.__EXPORT_FILE_NAME__}"`
-  )
-  expect(await page.textContent('.path')).not.toBe(
-    `import * from "xxxx/${defines.PATH}"`
-  )
 })
diff --git a/packages/playground/define/index.html b/packages/playground/define/index.html
index a285764dd9e0b4..bf6a9c59689396 100644
--- a/packages/playground/define/index.html
+++ b/packages/playground/define/index.html
@@ -9,9 +9,6 @@ <h1>Define</h1>
 <p>process as property: <code class="process-as-property"></code></p>
 <p>spread object: <code class="spread-object"></code></p>
 <p>spread array: <code class="spread-array"></code></p>
-<p>import file: <code class="import-file"></code></p>
-<p>export file: <code class="export-file"></code></p>
-<p>path: <code class="path"></code></p>
 
 <script type="module">
   const __VAR_NAME__ = true // ensure define doesn't replace var name
@@ -29,9 +26,6 @@ <h1>Define</h1>
     })
   )
   text('.spread-array', JSON.stringify([...`"${__STRING__}"`]))
-  text('.import-file', `import * from "__IMPORT_FILE_NAME__"`)
-  text('.export-file', `export * from "__EXPORT_FILE_NAME__"`)
-  text('.path', `import * from "xxxx/PATH"`)
 
   function text(el, text) {
     document.querySelector(el).textContent = text
diff --git a/packages/playground/define/vite.config.js b/packages/playground/define/vite.config.js
index 7f6c914b3062f1..848abd09322df6 100644
--- a/packages/playground/define/vite.config.js
+++ b/packages/playground/define/vite.config.js
@@ -16,9 +16,6 @@ module.exports = {
       }
     },
     __VAR_NAME__: false,
-    'process.env.SOMEVAR': '"SOMEVAR"',
-    __IMPORT_FILE_NAME__: '"importFileName"',
-    __EXPORT_FILE_NAME__: '"exportFileName"',
-    PATH: '"filePath"'
+    'process.env.SOMEVAR': '"SOMEVAR"'
   }
 }
diff --git a/packages/vite/src/node/__tests__/plugins/define.spec.ts b/packages/vite/src/node/__tests__/plugins/define.spec.ts
new file mode 100644
index 00000000000000..9a65f8f3a51cea
--- /dev/null
+++ b/packages/vite/src/node/__tests__/plugins/define.spec.ts
@@ -0,0 +1,39 @@
+import { definePlugin } from '../../plugins/define'
+import { resolveConfig } from '../../config'
+
+async function createDefinePluginTransform(
+  define: Record<string, any> = {},
+  build = true,
+  ssr = false
+) {
+  const config = await resolveConfig({ define }, build ? 'build' : 'serve')
+  const instance = definePlugin(config)
+  return async (code: string) => {
+    const result = await instance.transform.call({}, code, 'foo.ts', { ssr })
+    return result?.code || result
+  }
+}
+
+describe('definePlugin', () => {
+  test('replaces custom define', async () => {
+    const transform = await createDefinePluginTransform({
+      __APP_VERSION__: JSON.stringify('1.0')
+    })
+    expect(await transform('const version = __APP_VERSION__ ;')).toBe(
+      'const version = "1.0" ;'
+    )
+    expect(await transform('const version = __APP_VERSION__;')).toBe(
+      'const version = "1.0";'
+    )
+  })
+
+  test('replaces import.meta.env.SSR with false', async () => {
+    const transform = await createDefinePluginTransform()
+    expect(await transform('const isSSR = import.meta.env.SSR ;')).toBe(
+      'const isSSR = false ;'
+    )
+    expect(await transform('const isSSR = import.meta.env.SSR;')).toBe(
+      'const isSSR = false;'
+    )
+  })
+})
diff --git a/packages/vite/src/node/plugins/define.ts b/packages/vite/src/node/plugins/define.ts
index 7d10035a0d51d0..187cacf54ab1c8 100644
--- a/packages/vite/src/node/plugins/define.ts
+++ b/packages/vite/src/node/plugins/define.ts
@@ -53,6 +53,7 @@ export function definePlugin(config: ResolvedConfig): Plugin {
         'globalThis.process.env.': `({}).`
       })
     }
+
     const replacements: Record<string, string> = {
       ...(isNeedProcessEnv ? processNodeEnv : {}),
       ...userDefine,
@@ -61,30 +62,20 @@ export function definePlugin(config: ResolvedConfig): Plugin {
     }
 
     const replacementsKeys = Object.keys(replacements)
-
-    if (!replacementsKeys.length) {
-      return [replacements, null]
-    }
-
-    const replacementsStr = replacementsKeys
-      .map((str) => {
-        return str.replace(/[-[\]/{}()*+?.\\^$|]/g, '\\$&')
-      })
-      .join('|')
-
-    // The following characters are not allowed because they are String boundaries
-    const characters = '[\'"`\\/-_]'
-
-    const pattern = new RegExp(
-      `(?<!${characters})` +
-        // Do not allow preceding '.', but do allow preceding '...' for spread operations
-        '(?<!(?<!\\.\\.)\\.)' +
-        `\\b(${replacementsStr})\\b` +
-        `(?!${characters})` +
-        // prevent trailing assignments
-        '(?!\\s*?=[^=])',
-      'g'
-    )
+    const pattern = replacementsKeys.length
+      ? new RegExp(
+          // Do not allow preceding '.', but do allow preceding '...' for spread operations
+          '(?<!(?<!\\.\\.)\\.)\\b(' +
+            replacementsKeys
+              .map((str) => {
+                return str.replace(/[-[\]/{}()*+?.\\^$|]/g, '\\$&')
+              })
+              .join('|') +
+            // prevent trailing assignments
+            ')\\b(?!\\s*?=[^=])',
+          'g'
+        )
+      : null
 
     return [replacements, pattern]
   }

From 86882add0d85b9af390e4fd2bc5a978174124eff Mon Sep 17 00:00:00 2001
From: yoho <907415276@qq.com>
Date: Sat, 5 Mar 2022 05:28:07 +0800
Subject: [PATCH 48/50] feat(glob): import.meta.glob support alias path (#6526)

---
 .../glob-import/__tests__/glob-import.spec.ts | 13 ++++
 packages/playground/glob-import/dir/alias.js  |  1 +
 packages/playground/glob-import/dir/index.js  |  3 +-
 .../playground/glob-import/vite.config.ts     | 10 +++
 packages/vite/src/node/importGlob.ts          | 70 ++++++++++++++-----
 packages/vite/src/node/optimizer/scan.ts      | 31 +++++---
 .../vite/src/node/plugins/importAnalysis.ts   |  9 ++-
 .../src/node/plugins/importAnalysisBuild.ts   |  6 ++
 8 files changed, 112 insertions(+), 31 deletions(-)
 create mode 100644 packages/playground/glob-import/dir/alias.js
 create mode 100644 packages/playground/glob-import/vite.config.ts

diff --git a/packages/playground/glob-import/__tests__/glob-import.spec.ts b/packages/playground/glob-import/__tests__/glob-import.spec.ts
index 3a2425736548ea..fff8d9fe202ebc 100644
--- a/packages/playground/glob-import/__tests__/glob-import.spec.ts
+++ b/packages/playground/glob-import/__tests__/glob-import.spec.ts
@@ -7,6 +7,9 @@ import {
 } from '../../testUtils'
 
 const filteredResult = {
+  './alias.js': {
+    default: 'hi'
+  },
   './foo.js': {
     msg: 'foo'
   }
@@ -30,11 +33,19 @@ const json = isBuild
 
 const allResult = {
   // JSON file should be properly transformed
+  '/dir/alias.js': {
+    default: 'hi'
+  },
   '/dir/baz.json': json,
   '/dir/foo.js': {
     msg: 'foo'
   },
   '/dir/index.js': {
+    globWithAlias: {
+      './alias.js': {
+        default: 'hi'
+      }
+    },
     modules: filteredResult
   },
   '/dir/nested/bar.js': {
@@ -80,6 +91,7 @@ if (!isBuild) {
           '/dir/a.js': {},
           ...allResult,
           '/dir/index.js': {
+            ...allResult['/dir/index.js'],
             modules: {
               './a.js': {},
               ...allResult['/dir/index.js'].modules
@@ -102,6 +114,7 @@ if (!isBuild) {
           },
           ...allResult,
           '/dir/index.js': {
+            ...allResult['/dir/index.js'],
             modules: {
               './a.js': {
                 msg: 'a'
diff --git a/packages/playground/glob-import/dir/alias.js b/packages/playground/glob-import/dir/alias.js
new file mode 100644
index 00000000000000..9c533d93b9a98a
--- /dev/null
+++ b/packages/playground/glob-import/dir/alias.js
@@ -0,0 +1 @@
+export default 'hi'
diff --git a/packages/playground/glob-import/dir/index.js b/packages/playground/glob-import/dir/index.js
index d13d470e2b2b80..fb87f69f0f3a61 100644
--- a/packages/playground/glob-import/dir/index.js
+++ b/packages/playground/glob-import/dir/index.js
@@ -1,3 +1,4 @@
 const modules = import.meta.globEager('./*.(js|ts)')
+const globWithAlias = import.meta.globEager('@dir/al*.js')
 
-export { modules }
+export { modules, globWithAlias }
diff --git a/packages/playground/glob-import/vite.config.ts b/packages/playground/glob-import/vite.config.ts
new file mode 100644
index 00000000000000..abc75b51656503
--- /dev/null
+++ b/packages/playground/glob-import/vite.config.ts
@@ -0,0 +1,10 @@
+import path from 'path'
+import { defineConfig } from 'vite'
+
+export default defineConfig({
+  resolve: {
+    alias: {
+      '@dir': path.resolve(__dirname, './dir/')
+    }
+  }
+})
diff --git a/packages/vite/src/node/importGlob.ts b/packages/vite/src/node/importGlob.ts
index 41bbb90a1f8a37..1247d60f1284d9 100644
--- a/packages/vite/src/node/importGlob.ts
+++ b/packages/vite/src/node/importGlob.ts
@@ -12,16 +12,38 @@ import {
   cleanUrl,
   singlelineCommentsRE,
   multilineCommentsRE,
-  blankReplacer
+  blankReplacer,
+  normalizePath
 } from './utils'
 import type { RollupError } from 'rollup'
 
+interface GlobParams {
+  base: string
+  pattern: string
+  parentDepth: number
+  isAbsolute: boolean
+}
+
 export interface AssertOptions {
   assert?: {
     type: string
   }
 }
 
+function formatGlobRelativePattern(base: string, pattern: string): GlobParams {
+  let parentDepth = 0
+  while (pattern.startsWith('../')) {
+    pattern = pattern.slice(3)
+    base = path.resolve(base, '../')
+    parentDepth++
+  }
+  if (pattern.startsWith('./')) {
+    pattern = pattern.slice(2)
+  }
+
+  return { base, pattern, parentDepth, isAbsolute: false }
+}
+
 export async function transformImportGlob(
   source: string,
   pos: number,
@@ -29,6 +51,7 @@ export async function transformImportGlob(
   importIndex: number,
   root: string,
   normalizeUrl?: (url: string, pos: number) => Promise<[string, string]>,
+  resolve?: (url: string, importer?: string) => Promise<string | undefined>,
   preload = true
 ): Promise<{
   importsString: string
@@ -52,27 +75,36 @@ export async function transformImportGlob(
   importer = cleanUrl(importer)
   const importerBasename = path.basename(importer)
 
-  let [pattern, assertion, endIndex] = lexGlobPattern(source, pos)
-  if (!pattern.startsWith('.') && !pattern.startsWith('/')) {
-    throw err(`pattern must start with "." or "/" (relative to project root)`)
-  }
-  let base: string
-  let parentDepth = 0
-  const isAbsolute = pattern.startsWith('/')
-  if (isAbsolute) {
-    base = path.resolve(root)
-    pattern = pattern.slice(1)
-  } else {
-    base = path.dirname(importer)
-    while (pattern.startsWith('../')) {
-      pattern = pattern.slice(3)
-      base = path.resolve(base, '../')
-      parentDepth++
+  const [userPattern, assertion, endIndex] = lexGlobPattern(source, pos)
+
+  let globParams: GlobParams | null = null
+  if (userPattern.startsWith('/')) {
+    globParams = {
+      isAbsolute: true,
+      base: path.resolve(root),
+      pattern: userPattern.slice(1),
+      parentDepth: 0
     }
-    if (pattern.startsWith('./')) {
-      pattern = pattern.slice(2)
+  } else if (userPattern.startsWith('.')) {
+    globParams = formatGlobRelativePattern(path.dirname(importer), userPattern)
+  } else if (resolve) {
+    const resolvedId = await resolve(userPattern, importer)
+    if (resolvedId) {
+      const importerDirname = path.dirname(importer)
+      globParams = formatGlobRelativePattern(
+        importerDirname,
+        normalizePath(path.relative(importerDirname, resolvedId))
+      )
     }
   }
+
+  if (!globParams) {
+    throw err(
+      `pattern must start with "." or "/" (relative to project root) or alias path`
+    )
+  }
+  const { base, parentDepth, isAbsolute, pattern } = globParams
+
   const files = glob.sync(pattern, {
     cwd: base,
     // Ignore node_modules by default unless explicitly indicated in the pattern
diff --git a/packages/vite/src/node/optimizer/scan.ts b/packages/vite/src/node/optimizer/scan.ts
index b0f5f7985b0f78..f1112bd38db423 100644
--- a/packages/vite/src/node/optimizer/scan.ts
+++ b/packages/vite/src/node/optimizer/scan.ts
@@ -319,7 +319,13 @@ function esbuildScanPlugin(
             return {
               // transformGlob already transforms to js
               loader: 'js',
-              contents: await transformGlob(js, path, config.root, loader)
+              contents: await transformGlob(
+                js,
+                path,
+                config.root,
+                loader,
+                resolve
+              )
             }
           }
 
@@ -438,12 +444,16 @@ function esbuildScanPlugin(
         }
 
         if (contents.includes('import.meta.glob')) {
-          return transformGlob(contents, id, config.root, ext as Loader).then(
-            (contents) => ({
-              loader: ext as Loader,
-              contents
-            })
-          )
+          return transformGlob(
+            contents,
+            id,
+            config.root,
+            ext as Loader,
+            resolve
+          ).then((contents) => ({
+            loader: ext as Loader,
+            contents
+          }))
         }
         return {
           loader: ext as Loader,
@@ -458,7 +468,8 @@ async function transformGlob(
   source: string,
   importer: string,
   root: string,
-  loader: Loader
+  loader: Loader,
+  resolve: (url: string, importer?: string) => Promise<string | undefined>
 ) {
   // transform the content first since es-module-lexer can't handle non-js
   if (loader !== 'js') {
@@ -478,7 +489,9 @@ async function transformGlob(
       start,
       normalizePath(importer),
       index,
-      root
+      root,
+      undefined,
+      resolve
     )
     s.prepend(importsString)
     s.overwrite(expStart, endIndex, exp)
diff --git a/packages/vite/src/node/plugins/importAnalysis.ts b/packages/vite/src/node/plugins/importAnalysis.ts
index 76dfe77a8cfe96..939764c7a7a53c 100644
--- a/packages/vite/src/node/plugins/importAnalysis.ts
+++ b/packages/vite/src/node/plugins/importAnalysis.ts
@@ -105,7 +105,11 @@ function markExplicitImport(url: string) {
 export function importAnalysisPlugin(config: ResolvedConfig): Plugin {
   const { root, base } = config
   const clientPublicPath = path.posix.join(base, CLIENT_PUBLIC_PATH)
-
+  const resolve = config.createResolver({
+    preferRelative: true,
+    tryIndex: false,
+    extensions: []
+  })
   let server: ViteDevServer
   let isOptimizedDepUrl: (url: string) => boolean
 
@@ -351,7 +355,8 @@ export function importAnalysisPlugin(config: ResolvedConfig): Plugin {
               importer,
               index,
               root,
-              normalizeUrl
+              normalizeUrl,
+              resolve
             )
             str().prepend(importsString)
             str().overwrite(expStart, endIndex, exp)
diff --git a/packages/vite/src/node/plugins/importAnalysisBuild.ts b/packages/vite/src/node/plugins/importAnalysisBuild.ts
index 41d9671a853cdd..2e2b116572752e 100644
--- a/packages/vite/src/node/plugins/importAnalysisBuild.ts
+++ b/packages/vite/src/node/plugins/importAnalysisBuild.ts
@@ -91,6 +91,11 @@ export function buildImportAnalysisPlugin(config: ResolvedConfig): Plugin {
     ? `'modulepreload'`
     : `(${detectScriptRel.toString()})()`
   const preloadCode = `const scriptRel = ${scriptRel};const seen = {};const base = '${preloadBaseMarker}';export const ${preloadMethod} = ${preload.toString()}`
+  const resolve = config.createResolver({
+    preferRelative: true,
+    tryIndex: false,
+    extensions: []
+  })
 
   return {
     name: 'vite:build-import-analysis',
@@ -154,6 +159,7 @@ export function buildImportAnalysisPlugin(config: ResolvedConfig): Plugin {
               index,
               config.root,
               undefined,
+              resolve,
               insertPreload
             )
           str().prepend(importsString)

From 849e8456e1f7609040030c87cdc51e2fc76235b7 Mon Sep 17 00:00:00 2001
From: patak <matias.capeletto@gmail.com>
Date: Fri, 4 Mar 2022 22:30:50 +0100
Subject: [PATCH 49/50] refactor: avoid splitting vendor chunk by default
 (#6534)

---
 docs/guide/build.md                           |  14 ++
 packages/playground/vue/vite.config.ts        |  15 +-
 packages/vite/src/node/build.ts               |  59 --------
 packages/vite/src/node/index.ts               |   5 +
 .../vite/src/node/plugins/splitVendorChunk.ts | 131 ++++++++++++++++++
 5 files changed, 163 insertions(+), 61 deletions(-)
 create mode 100644 packages/vite/src/node/plugins/splitVendorChunk.ts

diff --git a/docs/guide/build.md b/docs/guide/build.md
index aac86a237b6819..1f1f149a07f7c9 100644
--- a/docs/guide/build.md
+++ b/docs/guide/build.md
@@ -43,6 +43,20 @@ module.exports = defineConfig({
 
 For example, you can specify multiple Rollup outputs with plugins that are only applied during build.
 
+## Chunking Strategy
+
+You can configure how chunks are split using `build.rollupOptions.manualChunks` (see [Rollup docs](https://rollupjs.org/guide/en/#outputmanualchunks)). Until Vite 2.7, the default chunking strategy divided the chunks into `index` and `vendor`. It is a good strategy for some SPAs, but it is hard to provide a general solution for every Vite target use case. From Vite 2.8, `manualChunks` is no longer modified by default. You can continue to use the Split Vendor Chunk strategy by adding the `splitVendorChunkPlugin` in your config file:
+
+```js
+// vite.config.js
+import { splitVendorChunkPlugin } from 'vite'
+module.exports = defineConfig({
+  plugins: [splitVendorChunkPlugin()]
+})
+```
+
+This strategy is also provided as a `splitVendorChunk({ cache: SplitVendorChunkCache })` factory, in case composition with custom logic is needed. `cache.reset()` needs to be called at `buildStart` for build watch mode to work correctly in this case.
+
 ## Rebuild on files changes
 
 You can enable rollup watcher with `vite build --watch`. Or, you can directly adjust the underlying [`WatcherOptions`](https://rollupjs.org/guide/en/#watch-options) via `build.watch`:
diff --git a/packages/playground/vue/vite.config.ts b/packages/playground/vue/vite.config.ts
index 82efdac5e9f876..f99a68ce8b6b10 100644
--- a/packages/playground/vue/vite.config.ts
+++ b/packages/playground/vue/vite.config.ts
@@ -1,4 +1,4 @@
-import { defineConfig } from 'vite'
+import { defineConfig, splitVendorChunkPlugin } from 'vite'
 import vuePlugin from '@vitejs/plugin-vue'
 import { vueI18nPlugin } from './CustomBlockPlugin'
 
@@ -12,11 +12,22 @@ export default defineConfig({
     vuePlugin({
       reactivityTransform: true
     }),
+    splitVendorChunkPlugin(),
     vueI18nPlugin
   ],
   build: {
     // to make tests faster
-    minify: false
+    minify: false,
+    rollupOptions: {
+      output: {
+        // Test splitVendorChunkPlugin composition
+        manualChunks(id) {
+          if (id.includes('src-import')) {
+            return 'src-import'
+          }
+        }
+      }
+    }
   },
   css: {
     modules: {
diff --git a/packages/vite/src/node/build.ts b/packages/vite/src/node/build.ts
index c8a1a0f17fa4a4..9a3a2a65702e58 100644
--- a/packages/vite/src/node/build.ts
+++ b/packages/vite/src/node/build.ts
@@ -12,8 +12,6 @@ import type {
   OutputOptions,
   RollupOutput,
   ExternalOption,
-  GetManualChunk,
-  GetModuleInfo,
   WatcherOptions,
   RollupWatcher,
   RollupError,
@@ -37,7 +35,6 @@ import { dataURIPlugin } from './plugins/dataUri'
 import { buildImportAnalysisPlugin } from './plugins/importAnalysisBuild'
 import { resolveSSRExternal, shouldExternalizeForSSR } from './ssr/ssrExternal'
 import { ssrManifestPlugin } from './ssr/ssrManifestPlugin'
-import { isCSSRequest } from './plugins/css'
 import type { DepOptimizationMetadata } from './optimizer'
 import { scanImports } from './optimizer/scan'
 import { assetImportMetaUrlPlugin } from './plugins/assetImportMetaUrl'
@@ -483,13 +480,6 @@ async function doBuild(
         // #1048 add `Symbol.toStringTag` for module default export
         namespaceToStringTag: true,
         inlineDynamicImports: ssr && typeof input === 'string',
-        manualChunks:
-          !ssr &&
-          !libOptions &&
-          output?.format !== 'umd' &&
-          output?.format !== 'iife'
-            ? createMoveToVendorChunkFn(config)
-            : undefined,
         ...output
       }
     }
@@ -616,55 +606,6 @@ function getPkgName(root: string) {
   return name?.startsWith('@') ? name.split('/')[1] : name
 }
 
-function createMoveToVendorChunkFn(config: ResolvedConfig): GetManualChunk {
-  const cache = new Map<string, boolean>()
-  return (id, { getModuleInfo }) => {
-    if (
-      id.includes('node_modules') &&
-      !isCSSRequest(id) &&
-      staticImportedByEntry(id, getModuleInfo, cache)
-    ) {
-      return 'vendor'
-    }
-  }
-}
-
-function staticImportedByEntry(
-  id: string,
-  getModuleInfo: GetModuleInfo,
-  cache: Map<string, boolean>,
-  importStack: string[] = []
-): boolean {
-  if (cache.has(id)) {
-    return cache.get(id) as boolean
-  }
-  if (importStack.includes(id)) {
-    // circular deps!
-    cache.set(id, false)
-    return false
-  }
-  const mod = getModuleInfo(id)
-  if (!mod) {
-    cache.set(id, false)
-    return false
-  }
-
-  if (mod.isEntry) {
-    cache.set(id, true)
-    return true
-  }
-  const someImporterIs = mod.importers.some((importer) =>
-    staticImportedByEntry(
-      importer,
-      getModuleInfo,
-      cache,
-      importStack.concat(id)
-    )
-  )
-  cache.set(id, someImporterIs)
-  return someImporterIs
-}
-
 export function resolveLibFilename(
   libOptions: LibraryOptions,
   format: ModuleFormat,
diff --git a/packages/vite/src/node/index.ts b/packages/vite/src/node/index.ts
index fe67e8efac8f8c..99567735b21757 100644
--- a/packages/vite/src/node/index.ts
+++ b/packages/vite/src/node/index.ts
@@ -7,6 +7,10 @@ export { send } from './server/send'
 export { createLogger, printHttpServerUrls } from './logger'
 export { transformWithEsbuild } from './plugins/esbuild'
 export { resolvePackageEntry } from './plugins/resolve'
+export {
+  splitVendorChunkPlugin,
+  splitVendorChunk
+} from './plugins/splitVendorChunk'
 export { resolvePackageData } from './packages'
 export { normalizePath } from './utils'
 
@@ -99,6 +103,7 @@ export type { Terser } from 'types/terser'
 export type { RollupCommonJSOptions } from 'types/commonjs'
 export type { RollupDynamicImportVarsOptions } from 'types/dynamicImportVars'
 export type { Matcher, AnymatchPattern, AnymatchFn } from 'types/anymatch'
+export type { SplitVendorChunkCache } from './plugins/splitVendorChunk'
 
 import type { ChunkMetadata } from './plugins/metadata'
 
diff --git a/packages/vite/src/node/plugins/splitVendorChunk.ts b/packages/vite/src/node/plugins/splitVendorChunk.ts
new file mode 100644
index 00000000000000..3f7c16067a5f8e
--- /dev/null
+++ b/packages/vite/src/node/plugins/splitVendorChunk.ts
@@ -0,0 +1,131 @@
+import type { UserConfig } from '../../node'
+import type { Plugin } from '../plugin'
+import type {
+  OutputOptions,
+  GetManualChunk,
+  GetManualChunkApi,
+  GetModuleInfo
+} from 'rollup'
+import { isCSSRequest } from './css'
+
+// Use splitVendorChunkPlugin() to get the same manualChunks strategy as Vite 2.7
+// We don't recommend using this strategy as a general solution moving forward
+
+// splitVendorChunk is a simple index/vendor strategy that was used in Vite
+// until v2.8. It is exposed to let people continue to use it in case it was
+// working well for their setups.
+// The cache needs to be reset on buildStart for watch mode to work correctly
+// Don't use this manualChunks strategy for ssr, lib mode, and 'umd' or 'iife'
+
+export class SplitVendorChunkCache {
+  cache: Map<string, boolean>
+  constructor() {
+    this.cache = new Map<string, boolean>()
+  }
+  reset() {
+    this.cache = new Map<string, boolean>()
+  }
+}
+
+export function splitVendorChunk(
+  options: { cache?: SplitVendorChunkCache } = {}
+): GetManualChunk {
+  const cache = options.cache ?? new SplitVendorChunkCache()
+  return (id, { getModuleInfo }) => {
+    if (
+      id.includes('node_modules') &&
+      !isCSSRequest(id) &&
+      staticImportedByEntry(id, getModuleInfo, cache.cache)
+    ) {
+      return 'vendor'
+    }
+  }
+}
+
+function staticImportedByEntry(
+  id: string,
+  getModuleInfo: GetModuleInfo,
+  cache: Map<string, boolean>,
+  importStack: string[] = []
+): boolean {
+  if (cache.has(id)) {
+    return cache.get(id) as boolean
+  }
+  if (importStack.includes(id)) {
+    // circular deps!
+    cache.set(id, false)
+    return false
+  }
+  const mod = getModuleInfo(id)
+  if (!mod) {
+    cache.set(id, false)
+    return false
+  }
+
+  if (mod.isEntry) {
+    cache.set(id, true)
+    return true
+  }
+  const someImporterIs = mod.importers.some((importer) =>
+    staticImportedByEntry(
+      importer,
+      getModuleInfo,
+      cache,
+      importStack.concat(id)
+    )
+  )
+  cache.set(id, someImporterIs)
+  return someImporterIs
+}
+
+export function splitVendorChunkPlugin(): Plugin {
+  const caches: SplitVendorChunkCache[] = []
+  function createSplitVendorChunk(output: OutputOptions, config: UserConfig) {
+    const cache = new SplitVendorChunkCache()
+    caches.push(cache)
+    const build = config.build ?? {}
+    const format = output?.format
+    if (!build.ssr && !build.lib && format !== 'umd' && format !== 'iife') {
+      return splitVendorChunk({ cache })
+    }
+  }
+  return {
+    name: 'vite:split-vendor-chunk',
+    config(config) {
+      let outputs = config?.build?.rollupOptions?.output
+      if (outputs) {
+        outputs = Array.isArray(outputs) ? outputs : [outputs]
+        for (const output of outputs) {
+          const viteManualChunks = createSplitVendorChunk(output, config)
+          if (viteManualChunks) {
+            if (output.manualChunks) {
+              if (typeof output.manualChunks === 'function') {
+                const userManualChunks = output.manualChunks
+                output.manualChunks = (id: string, api: GetManualChunkApi) => {
+                  return userManualChunks(id, api) ?? viteManualChunks(id, api)
+                }
+              }
+              // else, leave the object form of manualChunks untouched, as
+              // we can't safely replicate rollup handling.
+            } else {
+              output.manualChunks = viteManualChunks
+            }
+          }
+        }
+      } else {
+        return {
+          build: {
+            rollupOptions: {
+              output: {
+                manualChunks: createSplitVendorChunk({}, config)
+              }
+            }
+          }
+        }
+      }
+    },
+    buildStart() {
+      caches.forEach((cache) => cache.reset())
+    }
+  }
+}

From 79dd003f13e6398d6f15ca462bddedb7c1a5b7dc Mon Sep 17 00:00:00 2001
From: yoho <907415276@qq.com>
Date: Sat, 5 Mar 2022 05:49:58 +0800
Subject: [PATCH 50/50] fix(html): build mode ignore html define transform
 (#6663)

---
 packages/playground/define/__tests__/define.spec.ts | 2 ++
 packages/playground/define/index.html               | 1 +
 packages/vite/src/node/plugins/define.ts            | 5 ++++-
 packages/vite/src/node/plugins/html.ts              | 5 +++++
 4 files changed, 12 insertions(+), 1 deletion(-)

diff --git a/packages/playground/define/__tests__/define.spec.ts b/packages/playground/define/__tests__/define.spec.ts
index f5eb78ea4e2766..93ba1ca198fbcc 100644
--- a/packages/playground/define/__tests__/define.spec.ts
+++ b/packages/playground/define/__tests__/define.spec.ts
@@ -20,4 +20,6 @@ test('string', async () => {
   expect(await page.textContent('.spread-array')).toBe(
     JSON.stringify([...defines.__STRING__])
   )
+  // html would't need to define replacement
+  expect(await page.textContent('.exp-define')).toBe('__EXP__')
 })
diff --git a/packages/playground/define/index.html b/packages/playground/define/index.html
index bf6a9c59689396..4788ec9f2d2a57 100644
--- a/packages/playground/define/index.html
+++ b/packages/playground/define/index.html
@@ -9,6 +9,7 @@ <h1>Define</h1>
 <p>process as property: <code class="process-as-property"></code></p>
 <p>spread object: <code class="spread-object"></code></p>
 <p>spread array: <code class="spread-array"></code></p>
+<p>define variable in html: <code class="exp-define">__EXP__</code></p>
 
 <script type="module">
   const __VAR_NAME__ = true // ensure define doesn't replace var name
diff --git a/packages/vite/src/node/plugins/define.ts b/packages/vite/src/node/plugins/define.ts
index 187cacf54ab1c8..27c4b82f9b379e 100644
--- a/packages/vite/src/node/plugins/define.ts
+++ b/packages/vite/src/node/plugins/define.ts
@@ -3,6 +3,7 @@ import type { TransformResult } from 'rollup'
 import type { ResolvedConfig } from '../config'
 import type { Plugin } from '../plugin'
 import { isCSSRequest } from './css'
+import { isHTMLRequest } from './html'
 
 export function definePlugin(config: ResolvedConfig): Plugin {
   const isBuild = config.command === 'build'
@@ -85,6 +86,7 @@ export function definePlugin(config: ResolvedConfig): Plugin {
 
   return {
     name: 'vite:define',
+
     transform(code, id, options) {
       const ssr = options?.ssr === true
       if (!ssr && !isBuild) {
@@ -94,7 +96,8 @@ export function definePlugin(config: ResolvedConfig): Plugin {
       }
 
       if (
-        // exclude css and static assets for performance
+        // exclude html, css and static assets for performance
+        isHTMLRequest(id) ||
         isCSSRequest(id) ||
         config.assetsInclude(id)
       ) {
diff --git a/packages/vite/src/node/plugins/html.ts b/packages/vite/src/node/plugins/html.ts
index f2fd4aca98ff2f..b1509ac2cdecdd 100644
--- a/packages/vite/src/node/plugins/html.ts
+++ b/packages/vite/src/node/plugins/html.ts
@@ -43,9 +43,14 @@ interface ScriptAssetsUrl {
 
 const htmlProxyRE = /\?html-proxy=?[&inline\-css]*&index=(\d+)\.(js|css)$/
 const inlineCSSRE = /__VITE_INLINE_CSS__([^_]+_\d+)__/g
+const htmlLangRE = /\.(html|htm)$/
 const inlineImportRE = /\bimport\s*\(("[^"]*"|'[^']*')\)/g
+
 export const isHTMLProxy = (id: string): boolean => htmlProxyRE.test(id)
 
+export const isHTMLRequest = (request: string): boolean =>
+  htmlLangRE.test(request)
+
 // HTML Proxy Caches are stored by config -> filePath -> index
 export const htmlProxyMap = new WeakMap<
   ResolvedConfig,