perf: [MJO-21] - use modularizeImports to solve tree shaking issue

[kevinCubas]

In this pull request, is introduced a crucial optimization by implementing the modularizeImports feature with Rust Handlebars. This enhancement not only streamlines our import structure but also significantly improves the performance of our application.

Before Optimization:

Previously, the imports look like this:

import { Navbar } from '@/components';

After Optimization:

With the modularizeImports feature enabled.

import { Navbar } from '@/components'

//The modularizeImports will transform our import to look like this
// import { Navbar } from '@/components/navbar/Navbar';

Performance Improvements:

Here we are importing a Navbar component, the branch has 3 components using radix-ui and react-icons.

Large-scale Compilation (682 modules)

Before Optimization:

Compilation Time: 25.7 seconds Number of Modules: 682 modules

After Optimization:

Compilation Time: 15.1 seconds Number of Modules: 544 modules Percentage Reduction in Time: Approximately 40% Percentage Reduction in Modules: Approximately 20% in the total number of modules.

Pros:

• Cleaner Imports: This optimization allows us to maintain the convenience of a barrel file while achieving cleaner, more organized imports.

• Performance Boost: The issue impacting tree shaking has been fixed. Now, only the necessary modules are imported, preventing the entire module from being imported via the barrel file. This leads to more efficient bundling and smaller bundle sizes.

• Server and Client Render Compatibility: The optimization ensures that only specified modules are imported, preventing implicit import of client components in server components. This makes server and client rendering more compatible and error-free.

Cons:

• Naming Convention: To fully leverage this enhancement, we need to follow a specific folder and file naming convention. The folder should be in camelCase, and the file should be in PascalCase, with a named export inside.

If the component is Named "MenuMobile", then the folder must be "menuMobile" and the file "MenuMobile" with a named export inside it.

• Additional File: This optimization introduces an additional file to be loaded and processed, which may have a slight impact on performance.

• Tool Compatibility: Some tools, such as static code analysis and linters, may not fully support barrel files, potentially affecting code analysis accuracy.

• Naming Conflicts: Care should be taken to avoid potential naming conflicts when exporting modules with the same name.