Zengtudor/Nuxt
1
0
Fork 0
mirror of https://github.com/nuxt/nuxt.git synced 2024-11-22 13:45:18 +00:00
Code Issues Packages Projects Releases Wiki Activity

refactor(nuxt): add treeshakeClientOnly experimental flag (#5934)

Browse Source 
* refactor(nuxt): add `treeshakeClientOnly` experimental flag

* test: enable flag for fixture
This commit is contained in:
pooya parsa 2022-07-17 15:13:04 +02:00 committed by GitHub
parent f89955717c
commit 2e85cd0252
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
4 changed files with 17 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
docs/content/2.guide/3.directory-structure/4.components.md
View File

@ -174,9 +174,10 @@ Use a slot as fallback until `<ClientOnly>` is mounted on client side.
</template> </template>
``` ```
::alert{type=warning} <!-- TODO: Add back after passing treeshakeClientOnly experiment -->
<!-- ::alert{type=warning}
Make sure not to _nest_ `<ClientOnly>` components or other client-only components. Nuxt performs an optimization to remove the contents of these components from the server-side render, which can break in this case. Make sure not to _nest_ `<ClientOnly>` components or other client-only components. Nuxt performs an optimization to remove the contents of these components from the server-side render, which can break in this case.
:: :: -->
## Library Authors ## Library Authors

4
packages/nuxt/src/components/module.ts
View File

@ -137,7 +137,9 @@ export default defineNuxtModule<ComponentsOptions>({
getComponents, getComponents,
mode: isClient ? 'client' : 'server' mode: isClient ? 'client' : 'server'
})) }))
if (nuxt.options.experimental.treeshakeClientOnly) {
config.plugins.push(TreeShakeTemplatePlugin.vite({ sourcemap: nuxt.options.sourcemap, getComponents })) config.plugins.push(TreeShakeTemplatePlugin.vite({ sourcemap: nuxt.options.sourcemap, getComponents }))
}
}) })
nuxt.hook('webpack:config', (configs) => { nuxt.hook('webpack:config', (configs) => {
configs.forEach((config) => { configs.forEach((config) => {
@ -147,7 +149,9 @@ export default defineNuxtModule<ComponentsOptions>({
getComponents, getComponents,
mode: config.name === 'client' ? 'client' : 'server' mode: config.name === 'client' ? 'client' : 'server'
})) }))
if (nuxt.options.experimental.treeshakeClientOnly) {
config.plugins.push(TreeShakeTemplatePlugin.webpack({ sourcemap: nuxt.options.sourcemap, getComponents })) config.plugins.push(TreeShakeTemplatePlugin.webpack({ sourcemap: nuxt.options.sourcemap, getComponents }))
}
}) })
}) })
} }

6
packages/schema/src/config/experimental.ts
View File

@ -24,5 +24,11 @@ export default {
* @see https://github.com/nuxt/framework/issues/4084 * @see https://github.com/nuxt/framework/issues/4084
*/ */
externalVue: false, externalVue: false,
/**
* Tree shakes contents of client-only components from server bundle
* @see https://github.com/nuxt/framework/pull/5750
*/
treeshakeClientOnly: false,
} }
} }

3
test/fixtures/basic/nuxt.config.ts vendored
View File

@ -28,6 +28,7 @@ export default defineNuxtConfig({
} }
}, },
experimental: { experimental: {
reactivityTransform: true reactivityTransform: true,
treeshakeClientOnly: true
} }
}) })