perf: revert special handling for vue hmr

this avoids full babel parse on every vue file
jlewin · May 26, 2020 · 43ccaf7 · 43ccaf7
1 parent df526b1
commit 43ccaf7
Show file tree

Hide file tree

Showing 4 changed files with 34 additions and 23 deletions.
diff --git a/src/client/client.ts b/src/client/client.ts
@@ -78,6 +78,22 @@ socket.addEventListener('message', async ({ data }) => {
     case 'connected':
       console.log(`[vite] connected.`)
       break
+    case 'vue-reload':
+      import(`${path}?t=${timestamp}`)
+        .then((m) => {
+          __VUE_HMR_RUNTIME__.reload(path, m.default)
+          console.log(`[vite] ${path} reloaded.`)
+        })
+        .catch((err) => warnFailedFetch(err, path))
+      break
+    case 'vue-rerender':
+      const templatePath = `${path}?type=template`
+      await bustSwCache(templatePath)
+      import(`${templatePath}&t=${timestamp}`).then((m) => {
+        __VUE_HMR_RUNTIME__.rerender(path, m.render)
+        console.log(`[vite] ${path} template updated.`)
+      })
+      break
     case 'style-update':
       const importQuery = path.includes('?') ? '&import' : '?import'
       await bustSwCache(`${path}${importQuery}`)

diff --git a/src/node/server/serverPluginHmr.ts b/src/node/server/serverPluginHmr.ts
@@ -61,6 +61,8 @@ export const hmrClientPublicPath = `/vite/hmr`
 interface HMRPayload {
   type:
     | 'js-update'
+    | 'vue-reload'
+    | 'vue-rerender'
     | 'style-update'
     | 'style-remove'
     | 'full-reload'
@@ -160,14 +162,14 @@ export const hmrPlugin: ServerPlugin = ({
         })
         console.log(chalk.green(`[vite] `) + `page reloaded.`)
       } else {
-        hmrBoundaries.forEach((jsBoundary) => {
+        hmrBoundaries.forEach((boundary) => {
           console.log(
             chalk.green(`[vite:hmr] `) +
-              `${jsBoundary} updated due to change in ${relativeFile}.`
+              `${boundary} updated due to change in ${relativeFile}.`
           )
           send({
-            type: 'js-update',
-            path: jsBoundary,
+            type: boundary.endsWith('vue') ? 'vue-reload' : 'js-update',
+            path: boundary,
             changeSrcPath: publicPath,
             timestamp
           })
@@ -214,9 +216,12 @@ function walkImportChain(
 
   let hasDeadEnd = false
   for (const importer of importers) {
-    if (isHmrAccepted(importer, importee)) {
+    if (importer.endsWith('.vue') || isHmrAccepted(importer, importee)) {
+      // vue boundaries are considered dirty for the reload
+      if (importer.endsWith('.vue')) {
+        dirtyFiles.add(importer)
+      }
       hmrBoundaries.add(importer)
-      // js boundaries themselves are not considered dirty
       currentChain.forEach((file) => dirtyFiles.add(file))
     } else {
       const parentImpoters = importerMap.get(importer)

diff --git a/src/node/server/serverPluginModuleRewrite.ts b/src/node/server/serverPluginModuleRewrite.ts
@@ -276,7 +276,10 @@ export const resolveImport = (
       // only force re-fetch if this is a marked dirty file (in the import
       // chain of the changed file) or a vue part request (made by a dirty
       // vue main request)
-      if ((dirtyFiles && dirtyFiles.has(pathname)) || /\.vue\?type/.test(id)) {
+      if (
+        (dirtyFiles && dirtyFiles.has(pathname)) ||
+        /\?type=(template|style)/.test(id)
+      ) {
         query += `${query ? `&` : `?`}t=${timestamp}`
       }
     }

diff --git a/src/node/server/serverPluginVue.ts b/src/node/server/serverPluginVue.ts
@@ -160,9 +160,8 @@ export const vuePlugin: ServerPlugin = ({
 
     const sendReload = () => {
       send({
-        type: 'js-update',
+        type: 'vue-reload',
         path: publicPath,
-        changeSrcPath: publicPath,
         timestamp
       })
       console.log(
@@ -224,9 +223,8 @@ export const vuePlugin: ServerPlugin = ({
 
     if (needRerender) {
       send({
-        type: 'js-update',
+        type: 'vue-rerender',
         path: publicPath,
-        changeSrcPath: `${publicPath}?type=template`,
         timestamp
       })
     }
@@ -363,12 +361,6 @@ async function compileSFCMain(
     code += `const __script = {}`
   }
 
-  code += `\n if (import.meta.hot) {
-  import.meta.hot.accept((m) => {
-    __VUE_HMR_RUNTIME__.reload("${id}", m.default)
-  })
-}`
-
   let hasScoped = false
   let hasCSSModules = false
   if (descriptor.styles) {
@@ -401,13 +393,8 @@ async function compileSFCMain(
       templateRequest
     )}`
     code += `\n__script.render = __render`
-    code += `\n if (import.meta.hot) {
-  import.meta.hot.acceptDeps(${JSON.stringify(templateRequest)}, (m) => {
-    __VUE_HMR_RUNTIME__.rerender("${id}", m.render)
-  })
-}`
   }
-  code += `\n__script.__hmrId = ${JSON.stringify(id)}`
+  code += `\n__script.__hmrId = ${JSON.stringify(publicPath)}`
   code += `\n__script.__file = ${JSON.stringify(filePath)}`
   code += `\nexport default __script`