Vue/vite
1
0
Fork 0
mirror of https://github.com/vitejs/vite.git synced 2024-11-21 14:48:41 +00:00
Code Issues Actions 4 Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
patak 2023-07-28 11:50:31 +02:00 committed by GitHub
parent 24c12fef60
commit 89a3db0d9f
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
9 changed files with 44 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
packages/vite/src/node/plugins/html.ts
View File

@ -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' }
}
},

8
playground/css-codesplit/__tests__/css-codesplit.spec.ts
View File

@ -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)

4
playground/css-codesplit/shared-css-empty-1.js Normal file
View File

@ -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.
}

4
playground/css-codesplit/shared-css-empty-2.js Normal file
View File

@ -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.
}

10
playground/css-codesplit/shared-css-main.js Normal file
View File

@ -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.
}

4
playground/css-codesplit/shared-css-no-js.html Normal file
View File

@ -0,0 +1,4 @@
<link rel="stylesheet" type="text/css" href="./shared-css-theme.css" />
<body>
<h1>Share CSS, no JS</h1>
</body>

3
playground/css-codesplit/shared-css-theme.css Normal file
View File

@ -0,0 +1,3 @@
h1 {
color: red;
}

6
playground/css-codesplit/shared-css-with-js.html Normal file
View File

@ -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>

2
playground/css-codesplit/vite.config.js
View File

@ -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) {