fix: multiple entries with shared css and no JS (#13962)

vitejs · Jul 28, 2023 · 89a3db0 · 89a3db0
1 parent 24c12fe
commit 89a3db0
Show file tree

Hide file tree

Showing 9 changed files with 44 additions and 1 deletion.
diff --git a/packages/vite/src/node/plugins/html.ts b/packages/vite/src/node/plugins/html.ts
@@ -600,7 +600,9 @@ export function buildHtmlPlugin(config: ResolvedConfig): Plugin {
           js = `import "${modulePreloadPolyfillId}";\n${js}`
         }
 
-        return js
+        // Force rollup to keep this module from being shared between other entry points.
+        // If the resulting chunk is empty, it will be removed in generateBundle.
+        return { code: js, moduleSideEffects: 'no-treeshake' }
       }
     },
 

diff --git a/playground/css-codesplit/__tests__/css-codesplit.spec.ts b/playground/css-codesplit/__tests__/css-codesplit.spec.ts
@@ -43,6 +43,14 @@ describe.runIf(isBuild)('build', () => {
     expect(findAssetFile(/async.*\.js$/)).toBe('')
   })
 
+  test('should remove empty chunk, HTML without JS', async () => {
+    const sharedCSSWithJSChunk = findAssetFile('shared-css-with-js.*.js$')
+    expect(sharedCSSWithJSChunk).toMatch(`/* empty css`)
+    // there are functions and modules in the src code that should be tree-shaken
+    expect(sharedCSSWithJSChunk).not.toMatch('function')
+    expect(sharedCSSWithJSChunk).not.toMatch(/import(?!".\/modulepreload)/)
+  })
+
   test('should generate correct manifest', async () => {
     const manifest = readManifest()
     expect(manifest['index.html'].css.length).toBe(2)

diff --git a/playground/css-codesplit/shared-css-empty-1.js b/playground/css-codesplit/shared-css-empty-1.js
@@ -0,0 +1,4 @@
+function shouldBeTreeshaken_1() {
+  // This function should be treeshaken, even if { moduleSideEffects: 'no-treeshake' }
+  // was used in the JS corresponding to the HTML entrypoint.
+}
diff --git a/playground/css-codesplit/shared-css-empty-2.js b/playground/css-codesplit/shared-css-empty-2.js
@@ -0,0 +1,4 @@
+export default function shouldBeTreeshaken_2() {
+  // This function should be treeshaken, even if { moduleSideEffects: 'no-treeshake' }
+  // was used in the JS corresponding to the HTML entrypoint.
+}
diff --git a/playground/css-codesplit/shared-css-main.js b/playground/css-codesplit/shared-css-main.js
@@ -0,0 +1,10 @@
+import shouldTreeshake from './shared-css-empty-2.js'
+document.querySelector('#app').innerHTML = `
+  <div>
+    <h1>Shared CSS, with JS</h1>
+  </div>
+`
+function shouldBeTreeshaken_0() {
+  // This function should be treeshaken, even if { moduleSideEffects: 'no-treeshake' }
+  // was used in the JS corresponding to the HTML entrypoint.
+}
diff --git a/playground/css-codesplit/shared-css-no-js.html b/playground/css-codesplit/shared-css-no-js.html
@@ -0,0 +1,4 @@
+<link rel="stylesheet" type="text/css" href="./shared-css-theme.css" />
+<body>
+  <h1>Share CSS, no JS</h1>
+</body>
diff --git a/playground/css-codesplit/shared-css-theme.css b/playground/css-codesplit/shared-css-theme.css
@@ -0,0 +1,3 @@
+h1 {
+  color: red;
+}
diff --git a/playground/css-codesplit/shared-css-with-js.html b/playground/css-codesplit/shared-css-with-js.html
@@ -0,0 +1,6 @@
+<link rel="stylesheet" type="text/css" href="./shared-css-theme.css" />
+<script type="module" src="./shared-css-main.js"></script>
+<script type="module" src="./shared-css-empty-1.js"></script>
+<body>
+  <h1>Replaced by shared-css-main.js</h1>
+</body>
diff --git a/playground/css-codesplit/vite.config.js b/playground/css-codesplit/vite.config.js
@@ -9,6 +9,8 @@ export default defineConfig({
         main: resolve(__dirname, './index.html'),
         other: resolve(__dirname, './other.js'),
         style2: resolve(__dirname, './style2.js'),
+        'shared-css-with-js': resolve(__dirname, 'shared-css-with-js.html'),
+        'shared-css-no-js': resolve(__dirname, 'shared-css-no-js.html'),
       },
       output: {
         manualChunks(id) {