fix: ignore sideEffects for scripts imported from html

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

@@ -260,19 +260,24 @@ export function resolvePlugin(resolveOptions: InternalResolveOptions): Plugin {
         }
 
         if ((res = tryFsResolve(fsPath, options))) {
-          const resPkg = findNearestPackageData(
-            path.dirname(res),
-            options.packageCache,
-          )
           res = ensureVersionQuery(res, id, options, depsOptimizer)
           debug?.(`[relative] ${colors.cyan(id)} -> ${colors.dim(res)}`)
 
-          return resPkg
-            ? {
+          // If this isn't a script imported from a .html file, include side effects
+          // hints so the non-used code is properly tree-shaken during build time.
+          if (!importer?.endsWith('.html')) {
+            const resPkg = findNearestPackageData(
+              path.dirname(res),
+              options.packageCache,
+            )
+            if (resPkg) {
+              return {
                 id: res,
                 moduleSideEffects: resPkg.hasSideEffects(res),
               }
-            : res
+            }
+          }
+          return res
         }
       }
 

playground/html/__tests__/html.spec.ts

@@ -293,3 +293,13 @@ describe('importmap', () => {
     )
   })
 })
+
+describe('side-effects', () => {
+  beforeAll(async () => {
+    await page.goto(viteTestUrl + '/side-effects/')
+  })
+
+  test('console.log is not tree-shaken', async () => {
+    expect(browserLogs).toContain('message from sideEffects script')
+  })
+})

playground/html/side-effects/index.html

@@ -0,0 +1,2 @@
+<h1>sideEffects false</h1>
+<script type="module" src="./sideEffects.js"></script>

playground/html/side-effects/package.json

@@ -0,0 +1,6 @@
+{
+  "name": "@vitejs/test-html-side-effects",
+  "private": true,
+  "version": "0.0.0",
+  "sideEffects": false
+}

playground/html/side-effects/sideEffects.js

@@ -0,0 +1 @@
+console.log('message from sideEffects script')

playground/html/vite.config.js

@@ -28,6 +28,7 @@ export default defineConfig({
         valid: resolve(__dirname, 'valid.html'),
         importmapOrder: resolve(__dirname, 'importmapOrder.html'),
         env: resolve(__dirname, 'env.html'),
+        sideEffects: resolve(__dirname, 'side-effects/index.html'),
       },
     },
   },