How to reduce the disk size of a project in Angular?

Question

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?

Naimish Makwana · Answer

Here are several strategies to reduce the size of the node_modules folder in your Angular projects: 1. Install Dependencies for Production Only: When installing dependencies, use the --production flag: npm install --production This excludes development-only dependencies, significantly reducing the size. 2. Utilize Build-Optimizer and Tree Shaking: The ng build command with --prod flag automatically applies build optimization and tree shaking: ng build --prod This removes unused code from your project's bundles, leading to smaller file sizes. 3. Consider Lazy Loading: Break your app into smaller modules and load them only when needed, reducing initial load time and overall size. 4. Choose Lightweight Alternatives: Opt for smaller libraries whenever possible to minimize the impact on project size. 5. Leverage Third-Party Tools: Tools like node-prune or ModClean can further trim unused files from node_modules : npm install -g node-prune node-prune 6. Exclude Unnecessary Files: Use .npmignore files to prevent specific files from being installed in node_modules . 7. Compress the node_modules Folder: For deployment, consider compressing the folder using tools like gzip or Brotli. Thanks

Vijay Pratap Singh · Answer

Use npm ci: Instead of using npm install, you can use npm ci to install dependencies based on the package-lock.json or npm-shrinkwrap.json file. This can lead to a more deterministic and potentially smaller set of dependencies. npm ci 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: npm install -g yarn Then, instead of npm install , you can use: yarn Compression Tools: Some third-party tools like modclean, can help remove unnecessary files from the node_modules folder. Install modclean globally and run it within your project directory. npm install -g modclean modclean Hope this will help.

Jayraj Chhaya · Answer

The node_modules folder 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 the node_modules folder. 1. Use npm ci instead of npm install When installing dependencies, you can use the npm ci command instead of npm install . The npm ci command installs the exact versions of the dependencies specified in the package-lock.json file, ensuring a deterministic and reproducible build. This can help reduce the size of the node_modules folder by avoiding unnecessary duplicate packages. 2. Use npm audit to remove unused packages You can use the npm audit command 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 the node_modules folder. 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_modules folder 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.json file and specifying the files or directories to exclude. By excluding unnecessary files, you can reduce the overall size of your project, including the node_modules folder. By following these strategies, you can effectively reduce the size of the node_modules folder in your Angular projects and optimize disk space usage.