ci: verify common treeshaking issues in CI

.github/workflows/ci.yml

@@ -85,6 +85,9 @@ jobs:
       - name: Run e2e tests
         run: pnpm run test-e2e
 
+      - name: verify treeshaking
+        run: node scripts/verify-treeshaking.js
+
   lint-and-test-dts:
     runs-on: ubuntu-latest
     if: github.event_name == 'push' || github.event.pull_request.head.repo.full_name != github.repository

scripts/verify-treeshaking.js

@@ -0,0 +1,49 @@
+// @ts-check
+import fs from 'node:fs'
+import { execa } from 'execa'
+
+execa('node', ['scripts/build.js', 'vue', '-f', 'global-runtime']).then(() => {
+  const errors = []
+
+  const devBuild = fs.readFileSync(
+    'packages/vue/dist/vue.runtime.global.js',
+    'utf-8'
+  )
+
+  if (devBuild.includes('__spreadValues')) {
+    errors.push(
+      'dev build contains unexpected esbuild object spread helper.\n' +
+        'This means { ...obj } syntax is used in runtime code. This should be ' +
+        'refactoed to use the `extend` helper to avoid the extra code.'
+    )
+  }
+
+  const prodBuild = fs.readFileSync(
+    'packages/vue/dist/vue.runtime.global.prod.js',
+    'utf-8'
+  )
+
+  if (prodBuild.includes('Vue warn')) {
+    errors.push(
+      'prod build contains unexpected warning-related code.\n' +
+        'This means there are calls of warn() that are not guarded by the __DEV__ condition.'
+    )
+  }
+
+  if (
+    prodBuild.includes('html,body,base') ||
+    prodBuild.includes('svg,animate,animateMotion') ||
+    prodBuild.includes('annotation,annotation-xml,maction')
+  ) {
+    errors.push(
+      'prod build contains unexpected domTagConifg lists.\n' +
+        'This means helpers like isHTMLTag() is used in runtime code paths when it should be compiler-only.'
+    )
+  }
+
+  if (errors.length) {
+    throw new Error(
+      `Found the following treeshaking errors:\n\n- ${errors.join('\n\n- ')}`
+    )
+  }
+})