⚡️ Configure bundle chunking for mermaid and increase size warning limit#44
⚡️ Configure bundle chunking for mermaid and increase size warning limit#44
Conversation
Add manualChunks to split mermaid and its dependencies into a separate vendor-mermaid chunk. Increase chunkSizeWarningLimit to 3000KB to suppress warnings for the large mermaid bundle which is loaded dynamically.
📸 Screenshots for PR #44
PR screenshots folder (branch |
There was a problem hiding this comment.
Code Review
This pull request updates the Astro configuration to include a custom build setup, increasing the chunk size warning limit and implementing manual chunking for Mermaid and its associated dependencies. A review comment suggests refactoring the chunking logic using an array-based approach for better maintainability and ensuring the core d3 package is correctly captured.
| if (id.includes('mermaid') | ||
| || id.includes('cytoscape') | ||
| || id.includes('dagre') | ||
| || id.includes('khroma') | ||
| || id.includes('dayjs') | ||
| || id.includes('uuid') | ||
| || id.includes('lodash') | ||
| || id.includes('d3-')) { | ||
| return 'vendor-mermaid' | ||
| } |
There was a problem hiding this comment.
The manual chunking logic can be simplified and made more robust. Using an array with .some() improves readability and maintainability. Additionally, changing d3- to d3 ensures the core d3 package is also captured if it's imported directly, rather than just the sub-packages (like d3-selection).
const mermaidVendors = ['mermaid', 'cytoscape', 'dagre', 'khroma', 'dayjs', 'uuid', 'lodash', 'd3']
if (mermaidVendors.some(v => id.includes(v))) {
return 'vendor-mermaid'
}














Summary
Test plan