feat: support use alias in dynamic import

packages/playground/dynamic-import/index.html

@@ -8,6 +8,8 @@
 <button class="issue-2658-1">Issue 2658 - 1</button>
 <button class="issue-2658-2">Issue 2658 - 2</button>
 <button class="css">css</button>
+<button class="alias-foo">Alias Foo</button>
+<button class="alias-bar">Alias Bar</button>
 
 <div class="view"></div>
 

packages/playground/dynamic-import/nested/index.js

@@ -6,9 +6,19 @@ async function setView(view) {
   text('.view', msg)
 }
 
+async function setViewWithAlias(view) {
+  const { msg } = await import(`@views/${view}.js`)
+  text('.view', msg + ' with alias')
+}
+
 ;['foo', 'bar'].forEach((id) => {
   document.querySelector(`.${id}`).addEventListener('click', () => setView(id))
 })
+;['foo', 'bar'].forEach((id) => {
+  document
+    .querySelector(`.alias-${id}`)
+    .addEventListener('click', () => setViewWithAlias(id))
+})
 
 // literal dynamic
 document.querySelector('.baz').addEventListener('click', async () => {

packages/playground/dynamic-import/vite.config.js

@@ -20,5 +20,10 @@ module.exports = {
         )
       }
     }
-  ]
+  ],
+  resolve: {
+    alias: {
+      '@views': path.resolve(__dirname, 'views')
+    }
+  }
 }

packages/vite/src/node/plugins/importAnalysis.ts

@@ -520,23 +520,50 @@ export function importAnalysisPlugin(config: ResolvedConfig): Plugin {
           // check @vite-ignore which suppresses dynamic import warning
           const hasViteIgnore = /\/\*\s*@vite-ignore\s*\*\//.test(rawUrl)
 
-          const url = rawUrl
+          let url = rawUrl
             .replace(/\/\*[\s\S]*?\*\/|([^\\:]|^)\/\/.*$/gm, '')
             .trim()
-          if (!hasViteIgnore && !isSupportedDynamicImport(url)) {
-            this.warn(
-              `\n` +
-                colors.cyan(importerModule.file) +
+          if (!hasViteIgnore) {
+            const matched = url.match(/^([`'"]{1})(.*)([`'"]{1})$/)
+            if (matched) {
+              const [, startQuotation, importee, endQuotation] = matched
+              // it may start with an alias, try to convert alias using `resolve`
+              if (!importee.startsWith('./') && !importee.startsWith('../')) {
+                const aliasFlag = importee.slice(0, importee.indexOf('/'))
+                const resolvedId = await resolve(aliasFlag, importer, true)
+                if (resolvedId) {
+                  let relativePathOfAlias = path.posix.relative(
+                    path.dirname(importer),
+                    resolvedId
+                  )
+                  if (relativePathOfAlias === '') {
+                    relativePathOfAlias = '.'
+                  }
+
+                  url =
+                    startQuotation +
+                    importee.replace(aliasFlag, relativePathOfAlias) +
+                    endQuotation
+                  str().overwrite(start, end, url)
+                }
+              }
+            }
+
+            if (!isSupportedDynamicImport(url)) {
+              this.warn(
                 `\n` +
-                generateCodeFrame(source, start) +
-                `\nThe above dynamic import cannot be analyzed by vite.\n` +
-                `See ${colors.blue(
-                  `https://github.com/rollup/plugins/tree/master/packages/dynamic-import-vars#limitations`
-                )} ` +
-                `for supported dynamic import formats. ` +
-                `If this is intended to be left as-is, you can use the ` +
-                `/* @vite-ignore */ comment inside the import() call to suppress this warning.\n`
-            )
+                  colors.cyan(importerModule.file) +
+                  `\n` +
+                  generateCodeFrame(source, start) +
+                  `\nThe above dynamic import cannot be analyzed by vite.\n` +
+                  `See ${colors.blue(
+                    `https://github.com/rollup/plugins/tree/master/packages/dynamic-import-vars#limitations`
+                  )} ` +
+                  `for supported dynamic import formats. ` +
+                  `If this is intended to be left as-is, you can use the ` +
+                  `/* @vite-ignore */ comment inside the import() call to suppress this warning.\n`
+              )
+            }
           }
           if (
             !/^('.*'|".*"|`.*`)$/.test(url) ||