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

[2.14.0] Async components don't get separate bundles #7795

Closed
danielroe opened this issue Jul 28, 2020 · 5 comments · Fixed by #7808
Closed

[2.14.0] Async components don't get separate bundles #7795

danielroe opened this issue Jul 28, 2020 · 5 comments · Fixed by #7808

Comments

@danielroe
Copy link
Member

danielroe commented Jul 28, 2020

Versions

  • nuxt: v2.14.0
  • node: v12.18.1

Reproduction

https://github.com/danielroe/webpack-async

Steps to reproduce

  1. Clone repo
  2. Run yarn build --analyze - note that there is a separate async bundle for the huge dependency twilio-video
  3. Run yarn add nuxt@2.14 && yarn build --analyze - note that there is no separate async bundle

What is expected?

Bundle behaviour should not change in this significant of a way.

What is actually happening?

Significant performance degradation by bundling all dependencies in just five JS files (even on large sites), meaning we don't benefit from code-splitting or async dependencies.

Notes

@pi0
Copy link
Member

pi0 commented Jul 28, 2020

Seems issue is only happening when async chunk has one parent. Duplicating index to pages/foo results in correct behaviour:

image

@danielroe
Copy link
Member Author

Hmm. I may need to improve the repro. I noticed the issue with an enterprise app where there is now only one vendors bundle with everything from node_modules used anywhere on any page throughout the app whereas before this was properly split into different page-related bundles.

@AndrewBogdanovTSS
Copy link

I can confirm this issue was introduced in 2.14.0
Same project
Nuxt 2.13.3: https://take.ms/T5Pzi
Nuxt 2.14.0: https://take.ms/pSk2W
@pi0 As you can see - builds are drastically different. Even if my async component has one parent - I still don't want all of such chunks to be put into one huge commons chunk. First of all - all of them are not related to each other, have different parent dependencies thus should be loaded separately. Secondly - even if async component have one parent - it still can be loaded/not loaded conditionally so it's still worth to be put it in a separate chunk. Long story short - it should still work as in 2.13.3

@pi0 pi0 closed this as completed in #7808 Jul 30, 2020
@pi0 pi0 mentioned this issue Aug 4, 2020
@pi0
Copy link
Member

pi0 commented Aug 4, 2020

Should be fixed with v2.14.1

@AndrewBogdanovTSS
Copy link

@pi0 just checked it in v.2.14.1 - although the situation got better - there is still one regression left - I no longer have a separate bundle for vendors, everything is getting merged to app.js. Is it an intended change?
v. 2.13.3 https://take.ms/7dsh2
v. 2.14.1 https://take.ms/8P8Cv

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

Successfully merging a pull request may close this issue.

3 participants