From b771fdbef9a8dadd4c9cc939cc104f7764e40373 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?C=C3=A9dric=20Exbrayat?=
 <cexbrayat@users.noreply.github.com>
Date: Mon, 19 Jul 2021 23:24:40 +0200
Subject: [PATCH] perf(compiler-sfc): ignore empty blocks (#3520)

---
 packages/compiler-sfc/__tests__/parse.spec.ts |  5 +++++
 packages/compiler-sfc/src/parse.ts            | 15 ++++++++++++++-
 2 files changed, 19 insertions(+), 1 deletion(-)

diff --git a/packages/compiler-sfc/__tests__/parse.spec.ts b/packages/compiler-sfc/__tests__/parse.spec.ts
index fff6cf3c..470bfb9d 100644
--- a/packages/compiler-sfc/__tests__/parse.spec.ts
+++ b/packages/compiler-sfc/__tests__/parse.spec.ts
@@ -135,8 +135,13 @@ h1 { color: red }
 
   test('should ignore other nodes with no content', () => {
     expect(parse(`<script/>`).descriptor.script).toBe(null)
+    expect(parse(`<script> \n\t  </script>`).descriptor.script).toBe(null)
     expect(parse(`<style/>`).descriptor.styles.length).toBe(0)
+    expect(parse(`<style> \n\t </style>`).descriptor.styles.length).toBe(0)
     expect(parse(`<custom/>`).descriptor.customBlocks.length).toBe(0)
+    expect(
+      parse(`<custom> \n\t </custom>`).descriptor.customBlocks.length
+    ).toBe(0)
   })
 
   test('handle empty nodes with src attribute', () => {
diff --git a/packages/compiler-sfc/src/parse.ts b/packages/compiler-sfc/src/parse.ts
index 7e9c2c25..2650d480 100644
--- a/packages/compiler-sfc/src/parse.ts
+++ b/packages/compiler-sfc/src/parse.ts
@@ -162,7 +162,8 @@ export function parse(
     if (node.type !== NodeTypes.ELEMENT) {
       return
     }
-    if (!node.children.length && !hasSrc(node) && node.tag !== 'template') {
+    // we only want to keep the nodes that are not empty (when the tag is not a template)
+    if (node.tag !== 'template' && isEmpty(node) && !hasSrc(node)) {
       return
     }
     switch (node.tag) {
@@ -415,3 +416,15 @@ function hasSrc(node: ElementNode) {
     return p.name === 'src'
   })
 }
+
+/**
+ * Returns true if the node has no children
+ * once the empty text nodes (trimmed content) have been filtered out.
+ */
+function isEmpty(node: ElementNode) {
+  return (
+    node.children.filter(
+      child => child.type !== NodeTypes.TEXT || child.content.trim() !== ''
+    ).length === 0
+  )
+}