SOLID principles are an essential base of software engineering because they give recommendations for projects on how to change and add new functionality without breaking existing code and creating bugs, save maintainability and easy understandable software. SOLID principles are: Single responsibility principle Open/closed principle Liskov substitution principle Interface segregation principle Dependency inversion principle Using all…

We recently analyzed the bundle size of our frontend application and noticed the Lodash package was taking up a significant amount of space. Lodash offers many useful utilities for common tasks like filtering, sorting, mapping and manipulating data. However, importing the entire library increases bundle size considerably. We decided to optimize our usage of Lodash to reduce this bundle size. Upon inspection, we found we were importing the whole library using imports like  const lodash = require(‘lodash’);  and  const _ = require(‘lodash’); While convenient, this brings in all of Lodash’s functions regardless of what we actually use. A better approach is to import only the specific functions needed. For example, using  const merge = require(‘lodash/merge’);  and  const cloneDeep = require(‘lodash/cloneDeep’); We import just those individual methods rather than the entire library. This avoids unnecessary code and reduces bundle size. We also noticed imports like  const { get } = require(‘lodash’);   that destructure the  get function. However, this still imports the whole Lodash library first before extracting the function. For even better optimization, we can import directly from the sub-module like  const get = require(‘lodash/get’); This imports only the needed  get  code without the full library. By analyzing usage and optimizing imports in this way, we were able to significantly reduce the size of lodash in our bundle. What seemed like minor changes made a meaningful impact on bundle size. With some inspection of imports, libraries like Lodash can be used efficiently without the overhead of unused code. This optimization is especially important as bundle size directly impacts performance and user experience. Reference : https://lodash.com/per-method-packages

Organizing files and directories within a React project is crucial for maintainability, scalability, and ease of navigation. This article explores the general architecture and folder structures across different scales of React projects, providing clear demonstrations for each level. Level 1️⃣: Grouping by “File Types” This structure is characterized by its simplicity – grouping files by…