I created a new Angular project using ng new ProjectName command. Then I found that the size of the node_modules folder in my project happens to be 290MB. This is strange, why should I lose so much disk space for each and every project I create. Any idea how to reduce this size?
Loading
Jayraj ChhayaPosted Jan 2, 2024, 5:42 AM
The
node_modulesfolder in an Angular project contains all the dependencies required by the project. It can indeed become quite large, especially if the project has many dependencies. However, there are a few strategies you can employ to reduce the size of thenode_modulesfolder.1. Use npm ci instead of npm install
When installing dependencies, you can use the
npm cicommand instead ofnpm install. Thenpm cicommand installs the exact versions of the dependencies specified in thepackage-lock.jsonfile, ensuring a deterministic and reproducible build. This can help reduce the size of thenode_modulesfolder by avoiding unnecessary duplicate packages.2. Use npm audit to remove unused packages
You can use the
npm auditcommand to identify and remove any unused packages from your project. This command will analyze your project's dependencies and provide a report on any vulnerabilities or unused packages. By removing these unused packages, you can reduce the size of thenode_modulesfolder.3. Use a package manager like Yarn
Consider using a package manager like Yarn instead of npm. Yarn has a feature called "Yarn PnP" (Plug'n'Play) that allows for a more efficient dependency management system. It reduces the size of the
node_modulesfolder by eliminating the need for duplicate packages.4. Exclude unnecessary files
You can configure your project's build process to exclude unnecessary files from the final production bundle. This can be done by modifying the
angular.jsonfile and specifying the files or directories to exclude. By excluding unnecessary files, you can reduce the overall size of your project, including thenode_modulesfolder.By following these strategies, you can effectively reduce the size of the
node_modulesfolder in your Angular projects and optimize disk space usage.Naimish MakwanaPosted Jan 2, 2024, 4:21 AM
Here are several strategies to reduce the size of the
node_modulesfolder in your Angular projects:1. Install Dependencies for Production Only:
--productionflag:This excludes development-only dependencies, significantly reducing the size.
2. Utilize Build-Optimizer and Tree Shaking:
ng buildcommand with--prodflag automatically applies build optimization and tree shaking:This removes unused code from your project's bundles, leading to smaller file sizes.
3. Consider Lazy Loading:
4. Choose Lightweight Alternatives:
5. Leverage Third-Party Tools:
Tools like
node-pruneorModCleancan further trim unused files fromnode_modules:6. Exclude Unnecessary Files:
.npmignorefiles to prevent specific files from being installed innode_modules.7. Compress the
node_modulesFolder:Thanks
Vijay Pratap SinghPosted Jan 2, 2024, 3:57 AM
package-lock.jsonornpm-shrinkwrap.jsonfile. This can lead to a more deterministic and potentially smaller set of dependencies.Optimize Dependencies: Review your project's dependencies and remove any that are not necessary. Some packages may include unnecessary files (such as documentation or tests) that contribute to the overall size. You can manually remove them or look for alternative packages that are more lightweight.
Use Yarn: Consider using Yarn instead of npm. Yarn often provides faster and more deterministic dependency resolution. To install Yarn globally, you can use:
Then, instead of npm install, you can use:
node_modulesfolder. Installmodcleanglobally and run it within your project directory.Hope this will help.