Investigate code splitting to reduce initial bundle size

[rak-phillip]

#12246 demonstrates how we might enable code splitting of dynamically imported files by replacing require.resolve() with import(). The current method of using dynamic imports is preventing code splitting and more investigation is needed to see if Dashboard can benefit from these techniques.

We might benefit from asking ourselves the following questions while investigating:

• Are there any negative impacts from replacing require.resolve() with import()?
• Can we further reduce the main bundle size without compromising functionality?
• Are there specific features or pages that could benefit from more granular splitting?
• How does our current approach affect initial load time vs. subsequent navigation?
• Are we effectively leveraging browser caching with our current chunk strategy?

Proposed solution

• Investigate further opportunities for code splitting
• Optimize loading performance and user experience
• Review and document the changes made (replacing require.resolve() with import())
• Investigate lazy loading opportunities for routes and components
• Consider implementing intelligent preloading for critical chunks
• Review and optimize third-party library imports
• Benchmark application performance before and after optimizations
• Update documentation on our code splitting strategy

Additional notes

• We should consider the balance between the number of chunks and chunk size
• It's important to test these optimizations across different network conditions to assert that performance isn't negatively impacted