Layers architecture and performance
I'm using a simple monorepo to separate the code:
In
layers, I have the "common" stuff, like Utilities (consisting of functions, constants, ...) and UI (consisting primarily of components). layers may use each other, for example, UI uses Utilities layer.
Then I have the libs, which are technically also nuxt layers. Each lib has its own components, its own API handlers and so on. libs can use layers but cannot use other libs - if a lib requires another lib, it just imports stuff from the lib directly (or actually through alias)
And lastly, there are apps which use the layers and libs to create something actually usable for the end-user.
Now, some apps may use 10+ layers and those layers can reuse each other and so on. Therefore, the generated tsconfigs and typescript-related stuff is really heavy. Also, when I use the vue-tsc in some lib, I expect only the lib to be checked, but currently the used layers are also checked.
How do I go about this?2 Replies
Hi @kylyi. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:
----------------------
I understand you're facing performance challenges with your Nuxt layers architecture in a monorepo setup. This is a common issue when working with multiple layers that depend on each other.
Layer Performance Considerations
When using multiple layers (10+ as you mentioned), Nuxt can experience performance degradation during development and type checking. This happens because Nuxt processes each layer, and if layers are duplicated or have complex dependencies, it can lead to slowdowns.
Recent Nuxt versions have implemented several optimizations to address these issues:
1. Deduplication of layers: Nuxt now deduplicates layers before resolving config to prevent processing the same layer multiple times, which was introduced to improve performance GitHub PR #27582.
2. String module deduplication: Nuxt also deduplicates string modules to install, which can cut preparation times with layers and modules by up to 50% GitHub PR #27475.
Addressing TypeScript Performance
For your specific TypeScript-related concerns:
1. Isolating type checking: When you want to run
vue-tsc only on a specific lib without checking its dependencies, you might need to customize your TypeScript configuration. The knowledge sources don't provide a direct solution for this specific use case with Nuxt layers.
2. Layer scanning optimization: Be aware that Nuxt scans sibling directories when using layers, which can cause performance issues. A recent fix in tinyglobby (version 0.2.11) has addressed this issue, significantly improving performance when layers have non-app related sibling directories GitHub Issue #30137.
Recommendations
Based on the available information:
1. Update to latest Nuxt version: Ensure you're using the latest Nuxt version to benefit from performance improvements.
2. Consider named layer aliases: Nuxt 3.16.0+ supports named layer aliases, which can make imports cleaner and potentially improve performance Nuxt Docs.
3. Organize layers efficiently: Consider if all your layers need to be Nuxt layers or if some could be regular packages with explicit imports.
4. Custom module handling: For advanced cases, you can use Nuxt's internal _layers array to implement custom handling for your modules Nuxt Docs.
Unfortunately, the knowledge sources don't provide a specific solution for isolating TypeScript checking to only a specific lib without checking its layer dependencies. This might require custom TypeScript configuration outside of Nuxt's standard layer system.
----------------------
Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:
----------------------<@238577963338170370> Kapa.ai is still learning and improving, please let me know how I did by reacting below.