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/
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/.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/CONTRIBUTING.md b/CONTRIBUTING.md
index 5b8f1fed7192c3..31c1f34f3a4815 100644
--- a/CONTRIBUTING.md
+++ b/CONTRIBUTING.md
@@ -14,6 +14,36 @@ 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...
+
+### 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`:
diff --git a/docs/config/index.md b/docs/config/index.md
index d4ee7a96a6fa67..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.
@@ -508,12 +510,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/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/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/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.
 
diff --git a/packages/playground/assets/__tests__/assets.spec.ts b/packages/playground/assets/__tests__/assets.spec.ts
index c51bb4094b7b8c..191da897858dd5 100644
--- a/packages/playground/assets/__tests__/assets.spec.ts
+++ b/packages/playground/assets/__tests__/assets.spec.ts
@@ -120,6 +120,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/x-icon;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 00000000000000..d75d248ef0b150
Binary files /dev/null and b/packages/playground/assets/favicon.ico differ
diff --git a/packages/playground/assets/index.html b/packages/playground/assets/index.html
index f3b9a0b372a608..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:," />
@@ -137,6 +138,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 +156,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>
@@ -182,6 +201,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'
@@ -215,6 +241,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 +271,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/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/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/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/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/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/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/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/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/optimize-deps/__tests__/optimize-deps.spec.ts b/packages/playground/optimize-deps/__tests__/optimize-deps.spec.ts
index 174dc77c81aaf3..3c45287017fb44 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')
 })
 
@@ -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 65b6bf1dcf5473..fc1b83a6b50c65 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>
 
@@ -82,6 +85,9 @@ <h2>Reused variable names</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/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..c0569345d86837 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>
 
@@ -38,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>
 
@@ -100,6 +114,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)
@@ -130,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/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-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 b929f61fe965c3..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) {
@@ -102,4 +105,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..e304e7788e49e7 100644
--- a/packages/playground/vue-jsx/main.jsx
+++ b/packages/playground/vue-jsx/main.jsx
@@ -4,6 +4,9 @@ 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'
+// eslint-disable-next-line
+import JsxWithQuery from './Query.jsx?query=true'
 
 function App() {
   return (
@@ -15,6 +18,8 @@ function App() {
       <OtherExt />
       <JsxScript />
       <JsxSrcImport />
+      <JsxSetupSyntax />
+      <JsxWithQuery />
     </>
   )
 }
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/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/playground/vue/public/favicon.ico b/packages/playground/vue/public/favicon.ico
new file mode 100644
index 00000000000000..df36fcfb72584e
Binary files /dev/null and b/packages/playground/vue/public/favicon.ico differ
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/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/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/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
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": [
diff --git a/packages/plugin-vue/CHANGELOG.md b/packages/plugin-vue/CHANGELOG.md
index 8cba85641a5975..6fb47f160b1689 100644
--- a/packages/plugin-vue/CHANGELOG.md
+++ b/packages/plugin-vue/CHANGELOG.md
@@ -1,3 +1,16 @@
+## [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)
+
+
+### 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..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.2",
+  "version": "2.2.4",
   "license": "MIT",
   "author": "Evan You",
   "files": [
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))
     }
diff --git a/packages/vite/CHANGELOG.md b/packages/vite/CHANGELOG.md
index c2f9a3f62ed9f0..bb0c4d0b312fe1 100644
--- a/packages/vite/CHANGELOG.md
+++ b/packages/vite/CHANGELOG.md
@@ -1,3 +1,42 @@
+## [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)
+
+
+### 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/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 e6e5e3e850c2c9..f790184bf765f2 100644
--- a/packages/vite/package.json
+++ b/packages/vite/package.json
@@ -1,6 +1,6 @@
 {
   "name": "vite",
-  "version": "2.8.4",
+  "version": "2.8.6",
   "license": "MIT",
   "author": "Evan You",
   "description": "Native-ESM powered web dev build tool",
@@ -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",
@@ -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/client/client.ts b/packages/vite/src/client/client.ts
index 736590e175529a..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__ || '/'
 
@@ -214,9 +217,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))
     }
   }
@@ -254,7 +262,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 +289,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
       )
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/__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/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/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 {
diff --git a/packages/vite/src/node/config.ts b/packages/vite/src/node/config.ts
index fbda8d5166cb1b..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
@@ -649,7 +645,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. ` +
@@ -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/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, {
diff --git a/packages/vite/src/node/importGlob.ts b/packages/vite/src/node/importGlob.ts
index faa65da8cdafd9..1247d60f1284d9 100644
--- a/packages/vite/src/node/importGlob.ts
+++ b/packages/vite/src/node/importGlob.ts
@@ -8,15 +8,42 @@ import {
   preloadMarker
 } from './plugins/importAnalysisBuild'
 import { isCSSRequest } from './plugins/css'
-import { cleanUrl } from './utils'
+import {
+  cleanUrl,
+  singlelineCommentsRE,
+  multilineCommentsRE,
+  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,
@@ -24,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
@@ -47,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
@@ -182,45 +219,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/index.ts b/packages/vite/src/node/index.ts
index aea96d14d758be..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'
 
@@ -32,7 +36,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'
@@ -58,6 +65,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 +103,12 @@ 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'
+
+declare module 'rollup' {
+  export interface RenderedChunk {
+    viteMetadata: ChunkMetadata
+  }
+}
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 c13a26c63b3c1c..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
@@ -79,6 +81,44 @@ 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 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 {
@@ -93,240 +133,507 @@ 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> {
+  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<DepOptimizationMetadata | null> {
+): 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) {
+    // Initial optimizeDeps at server start. Perform a fast scan using esbuild to
+    // find deps to pre-bundle and include user hard-coded dependencies
+
+    let missing: Record<string, string>
     ;({ deps, missing } = await scanImports(config))
+
+    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)}`
+            )
+          }
+        }
+      }
+    }
+
+    // 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 {
-    deps = newDeps
-    missing = {}
+    // 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] }
+    }
+
+    // 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)
   }
 
-  // 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]})`)
-            )}`
+  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
+    }
+
+    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
+        // 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)`
         )
-        .join(`\n  `)}\n\nAre they installed?`
-    )
-  }
+      }
+    } else {
+      logger.info(colors.green(`Optimizing dependencies:\n  ${depsString}`))
+    }
 
-  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)}`
+    // 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 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
+        }
+        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
     }
-  }
 
-  const qualifiedIds = Object.keys(deps)
+    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)
+    }
 
-  if (!qualifiedIds.length) {
-    writeFile(dataPath, JSON.stringify(data, null, 2))
-    log(`No dependencies to bundle. Skipping.\n\n\n`)
-    return data
-  }
+    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 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)`
+    for (const id in deps) {
+      const optimizedInfo = metadata.optimized[id]
+      optimizedInfo.needsInterop = needsInterop(
+        id,
+        idToExports[id],
+        meta.outputs,
+        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)
+        )
+      }
     }
-  } 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])
-    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'
+    // 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
+        )
       })
-      // 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
+      debug(`optimized deps have altered files: ${alteredFiles}`)
     }
-    for (const { ss, se } of exportsData[0]) {
-      const exp = entryContent.slice(ss, se)
-      if (/export\s+\*\s+from/.test(exp)) {
-        exportsData.hasReExports = true
+
+    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
       }
     }
-    idToExports[id] = exportsData
-    flatIdToExports[flatId] = exportsData
+
+    // 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
   }
 
-  const define: Record<string, string> = {
-    'process.env.NODE_ENV': JSON.stringify(config.mode)
+  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)
   }
-  for (const key in config.define) {
-    const value = config.define[key]
-    define[key] = typeof value === 'string' ? value : JSON.stringify(value)
+}
+
+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)
   }
+}
 
-  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(
-        id,
-        idToExports[id],
-        meta.outputs,
-        cacheDirOutputPath
-      )
-    }
+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
@@ -392,7 +699,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) => {
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/optimizer/scan.ts b/packages/vite/src/node/optimizer/scan.ts
index f52978d43736f9..473673ce93a861 100644
--- a/packages/vite/src/node/optimizer/scan.ts
+++ b/packages/vite/src/node/optimizer/scan.ts
@@ -179,6 +179,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)
@@ -216,8 +220,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'
         }
       })
@@ -285,7 +295,8 @@ function esbuildScanPlugin(
                     contents,
                     path,
                     config.root,
-                    loader
+                    loader,
+                    resolve
                   )
                 }
               } else {
@@ -350,17 +361,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)
@@ -406,7 +419,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 })
             }
 
@@ -436,12 +449,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,
@@ -456,7 +473,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') {
@@ -476,7 +494,9 @@ async function transformGlob(
       start,
       normalizePath(importer),
       index,
-      root
+      root,
+      undefined,
+      resolve
     )
     s.prepend(importsString)
     s.overwrite(expStart, endIndex, exp)
@@ -509,10 +529,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
@@ -521,9 +538,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/packages/vite/src/node/plugins/asset.ts b/packages/vite/src/node/plugins/asset.ts
index 7ec3a01543f9a4..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<
@@ -33,6 +31,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/x-icon'
   return {
     name: 'vite:asset',
 
@@ -96,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)
       }
@@ -127,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/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))
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/plugins/css.ts b/packages/vite/src/node/plugins/css.ts
index 804d7cc0c87789..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
@@ -686,9 +672,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, '*')
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/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/packages/vite/src/node/plugins/html.ts b/packages/vite/src/node/plugins/html.ts
index e7ca5e63961253..b1509ac2cdecdd 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,
@@ -41,11 +41,16 @@ 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 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,
@@ -511,21 +516,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/importAnalysis.ts b/packages/vite/src/node/plugins/importAnalysis.ts
index 953304e0ac38c2..939764c7a7a53c 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,
@@ -45,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')
@@ -54,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)
 }
@@ -97,14 +105,20 @@ 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
 
   return {
     name: 'vite:import-analysis',
 
     configureServer(_server) {
       server = _server
+      isOptimizedDepUrl = createIsOptimizedDepUrl(server.config)
     },
 
     async transform(source, importer, options) {
@@ -203,6 +217,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(),
@@ -220,8 +238,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
@@ -244,11 +266,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])
@@ -328,7 +355,8 @@ export function importAnalysisPlugin(config: ResolvedConfig): Plugin {
               importer,
               index,
               root,
-              normalizeUrl
+              normalizeUrl,
+              resolve
             )
             str().prepend(importsString)
             str().overwrite(expStart, endIndex, exp)
@@ -396,37 +424,53 @@ export function importAnalysisPlugin(config: ResolvedConfig): Plugin {
             specifier,
             start
           )
-          let url = normalizedUrl
+          const 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) {
-            // 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/importAnalysisBuild.ts b/packages/vite/src/node/plugins/importAnalysisBuild.ts
index bb5b50f93cdbb9..2e2b116572752e 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'
 
@@ -75,7 +71,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}`))
+          )
         })
       }
     })
@@ -93,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',
@@ -156,6 +159,7 @@ export function buildImportAnalysisPlugin(config: ResolvedConfig): Plugin {
               index,
               config.root,
               undefined,
+              resolve,
               insertPreload
             )
           str().prepend(importsString)
@@ -281,21 +285,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..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'
@@ -16,6 +17,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 +32,7 @@ export async function resolvePlugins(
     : { pre: [], post: [] }
 
   return [
+    isBuild ? metadataPlugin() : null,
     isBuild ? null : preAliasPlugin(),
     aliasPlugin({ entries: config.resolve.alias }),
     ...prePlugins,
@@ -45,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/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/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 55afd92df1a8fb..b5493aa7d2ef83 100644
--- a/packages/vite/src/node/plugins/resolve.ts
+++ b/packages/vite/src/node/plugins/resolve.ts
@@ -27,8 +27,10 @@ import {
   isFileReadable,
   isTsRequest,
   isPossibleTsOutput,
-  getTsSrcPath
+  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)
@@ -436,16 +449,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) {
@@ -568,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 }
     }
@@ -589,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,
@@ -611,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) {
@@ -724,39 +736,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)
   }
@@ -813,7 +830,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
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())
+    }
+  }
+}
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/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
diff --git a/packages/vite/src/node/server/index.ts b/packages/vite/src/node/server/index.ts
index aeea862dbc173f..9dba9f8ebb92d9 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'
@@ -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'
@@ -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 {
@@ -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
    */
@@ -277,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
    */
@@ -361,14 +360,25 @@ export async function createServer(
       return transformRequest(url, server, options)
     },
     transformIndexHtml: null!, // to be immediately set
-    ssrLoadModule(url) {
+    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,
+        server,
+        undefined,
+        undefined,
+        opts?.fixStacktrace
       )
-      return ssrLoadModule(url, server)
     },
     ssrFixStacktrace(e) {
       if (e.stack) {
@@ -400,7 +410,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(() => {
@@ -416,9 +426,7 @@ export async function createServer(
     _globImporters: Object.create(null),
     _restartPromise: null,
     _forceOptimizeOnRestart: false,
-    _isRunningOptimizer: false,
     _registerMissingImport: null,
-    _pendingReload: null,
     _pendingRequests: new Map()
   }
 
@@ -561,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 || server._forceOptimizeOnRestart
-      )
-    } 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)
   }
 
@@ -693,7 +705,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(
@@ -715,7 +727,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)
   }
 
@@ -734,9 +746,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
@@ -745,7 +766,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]
     }
@@ -765,4 +790,7 @@ async function restartServer(server: ViteDevServer) {
   } else {
     logger.info('server restarted.', { timestamp: true })
   }
+
+  // new server (the current server) can restart now
+  newServer._restartPromise = null
 }
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
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/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)
     }
 
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
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/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)
                     }
                   }
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(
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} }});`
diff --git a/packages/vite/src/node/utils.ts b/packages/vite/src/node/utils.ts
index bc1b8588cb212d..f830944da879cc 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
 }
@@ -189,8 +233,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 = [
@@ -292,20 +342,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)
   }
 }
 
@@ -466,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,
@@ -642,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)
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index ab2b4a7833c686..9982e48276c096 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
@@ -203,21 +208,33 @@ 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:*
+      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:
@@ -278,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
@@ -295,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
@@ -328,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
@@ -792,7 +814,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
@@ -803,7 +825,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
@@ -867,7 +889,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
@@ -876,7 +898,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
@@ -3103,7 +3125,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:
@@ -4811,7 +4833,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==}
@@ -4822,6 +4843,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==}
@@ -6140,7 +6162,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
 
@@ -7350,8 +7372,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'
@@ -7690,8 +7712,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
 
@@ -8611,7 +8633,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
@@ -8655,7 +8677,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
@@ -8916,8 +8938,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: