Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Tree-Shaking does not work when using multiple stores in Nuxt #2738

Closed
serkodev opened this issue Aug 14, 2024 · 1 comment · Fixed by #2740
Closed

Tree-Shaking does not work when using multiple stores in Nuxt #2738

serkodev opened this issue Aug 14, 2024 · 1 comment · Fixed by #2740

Comments

@serkodev
Copy link
Contributor

serkodev commented Aug 14, 2024

Note

I’m not sure if this issue is related to Pinia, Nuxt, Vite or Rollup, but since the problem occurs specifically when using defineStore exports, and not with other composables or exports so I’m opening the issue here.

Please let me know if I should open it issue on the right repo.

Reproduction

https://stackblitz.com/edit/github-dylldh?file=app.vue

Steps to reproduce the bug

  1. Go stackblitz link above, run nuxt generate
  2. Go ./output/_nuxt/Dz77aYJ1.js
  3. Search foofoofoo
  4. If found, that means the store is not tree-shaken
pinia

Bug Description

When using Pinia in a Nuxt project and creating more than one store, tree-shaking does not work as expected. Here's an example to illustrate the issue:

// store/foo.ts
export const useFooStore = defineStore('foo', () => ({ foo: ref('foofoofoo') }));

// store/bar.ts
export const useBarStore = defineStore('bar', () => ({ bar: ref('barbarbar') }));
<!-- app.vue -->
<script setup lang="ts">
if (false) {
  // cannot tree-shake
  console.log(useFooStore());
  console.log(useBarStore());
}
</script>

After running nuxt generate, both the foo and bar stores are bundled into the output, even though they are inside a conditional block that should never run.

However, if I use only one store within the if (false) block, tree-shaking works as expected:

<!-- app.vue -->
<script setup lang="ts">
if (false) {
  // can tree-shake
  console.log(useFooStore());
}
</script>

In this case, the unused store is successfully tree-shaken and not included in the bundle.

Expected behavior

Tree-shaking should exclude unused stores from the final bundle, even when multiple stores are defined.

Actual behavior

When more than one store is defined, tree-shaking fails to exclude unused stores, resulting in unnecessary code being bundled.

Copy link
Member

posva commented Aug 14, 2024

Yeah, this shouldn’t be related to pinia itself, rather to the library doing the tree shaking. It could be mixed to how the auto imports are done or could even be a limitation of the lib handling the minification

@posva posva closed this as not planned Won't fix, can't repro, duplicate, stale Aug 14, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging a pull request may close this issue.

2 participants