perf(compiler-sfc): skip srcset transform if all candidates are external

Author: yyx990803

packages/compiler-sfc/__tests__/__snapshots__/templateTransformSrcset.spec.ts.snap

@@ -139,9 +139,7 @@ const _hoisted_5 = _imports_0 + ' 2x, ' + _imports_0
 const _hoisted_6 = _imports_0 + ' 2x, ' + _imports_0 + ' 3x'
 const _hoisted_7 = _imports_0 + ', ' + _imports_0 + ' 2x, ' + _imports_0 + ' 3x'
 const _hoisted_8 = _imports_1 + ', ' + _imports_1 + ' 2x'
-const _hoisted_9 = \\"https://example.com/logo.png\\" + ', ' + \\"https://example.com/logo.png\\" + ' 2x'
-const _hoisted_10 = _imports_1 + ', ' + _imports_0 + ' 2x'
-const _hoisted_11 = \\"data:image/png;base64,i\\" + ' 1x, ' + \\"data:image/png;base64,i\\" + ' 2x'
+const _hoisted_9 = _imports_1 + ', ' + _imports_0 + ' 2x'
 
 export function render(_ctx, _cache) {
   return (_openBlock(), _createBlock(_Fragment, null, [
@@ -183,15 +181,15 @@ export function render(_ctx, _cache) {
     }),
     _createVNode(\\"img\\", {
       src: \\"https://example.com/logo.png\\",
-      srcset: _hoisted_9
+      srcset: \\"https://example.com/logo.png, https://example.com/logo.png 2x\\"
     }),
     _createVNode(\\"img\\", {
       src: \\"/logo.png\\",
-      srcset: _hoisted_10
+      srcset: _hoisted_9
     }),
     _createVNode(\\"img\\", {
       src: \\"data:image/png;base64,i\\",
-      srcset: _hoisted_11
+      srcset: \\"data:image/png;base64,i 1x, data:image/png;base64,i 2x\\"
     })
   ], 64 /* STABLE_FRAGMENT */))
 }"

packages/compiler-sfc/src/templateTransformSrcset.ts

@@ -57,20 +57,26 @@ export const transformSrcset: NodeTransform = (
             return { url, descriptor }
           })
 
-          // for data url need recheck url
+          // data urls contains comma after the ecoding so we need to re-merge
+          // them
           for (let i = 0; i < imageCandidates.length; i++) {
-            if (imageCandidates[i].url.trim().startsWith('data:')) {
+            const { url } = imageCandidates[i]
+            if (isDataUrl(url)) {
               imageCandidates[i + 1].url =
-                imageCandidates[i].url + ',' + imageCandidates[i + 1].url
+                url + ',' + imageCandidates[i + 1].url
               imageCandidates.splice(i, 1)
             }
           }
 
-          // When srcset does not contain any relative URLs, skip transforming
-          if (
-            !options.includeAbsolute &&
-            !imageCandidates.some(({ url }) => isRelativeUrl(url))
-          ) {
+          const hasQualifiedUrl = imageCandidates.some(({ url }) => {
+            return (
+              !isExternalUrl(url) &&
+              !isDataUrl(url) &&
+              (options.includeAbsolute || isRelativeUrl(url))
+            )
+          })
+          // When srcset does not contain any qualified URLs, skip transforming
+          if (!hasQualifiedUrl) {
             return
           }