I have developed a Next.js application with multiple packages. When I run npm run dev, the system becomes very slow, especially when navigating between components or trigger any actions.

I have run next.js new application its occupied just 400 mb only

When I run my nextjs application it has occupied 4 GB

Is it possible to occupy this storage ?

My system spec configuration:

16gb Ram , 512Gb storage, i5, gen 12

Used packgae details:

"dependencies": {
"@hookform/resolvers": "^3.3.4",
"@prisma/client": "^5.12.1",
"@radix-ui/react-accordion": "^1.1.2",
"@radix-ui/react-dropdown-menu": "^2.0.6",
"@radix-ui/react-label": "^2.0.2",
"@radix-ui/react-menubar": "^1.0.4",
"@radix-ui/react-navigation-menu": "^1.1.4",
"@radix-ui/react-popover": "^1.1.0",
"@radix-ui/react-progress": "^1.1.0",
"@radix-ui/react-scroll-area": "^1.1.0",
"@radix-ui/react-select": "^2.0.0",
"@radix-ui/react-separator": "^1.1.0",
"@radix-ui/react-slot": "^1.0.2",
"@radix-ui/react-switch": "^1.0.3",
"@radix-ui/react-tabs": "^1.0.4",
"@radix-ui/react-toast": "^1.1.5",
"@radix-ui/react-tooltip": "^1.0.7",
"@reduxjs/toolkit": "^2.2.3",
"ag-grid-community": "^32.0.0",
"ag-grid-react": "^32.0.0",
"axios": "^1.6.8",
"bcrypt": "^5.1.1",
"class-variance-authority": "^0.7.0",
"clsx": "^2.1.0",
"cookies-next": "^4.1.1",
"country-code-lookup": "^0.1.3",
"country-list": "^2.3.0",
"country-state-city": "^3.2.1",
"crypto-js": "^4.2.0",
"date-fns": "^3.6.0",
"dotenv": "^16.4.5",
"embla-carousel-react": "^8.1.5",
"event-source-polyfill": "^1.0.31",
"framer-motion": "^11.0.28",
"input-otp": "^1.2.4",
"iso-country-currency": "^0.7.2",
"joi": "^17.13.0",
"jose": "^5.3.0",
"jsonwebtoken": "^9.0.2",
"kafkajs": "^2.2.4",
"leaflet": "^1.9.4",
"leaflet-defaulticon-compatibility": "^0.1.2",
"lodash": "^4.17.21",
"lottie-react": "^2.4.0",
"lucide-react": "^0.367.0",
"minio": "^8.0.0",
"moment": "^2.30.1",
"next": "14.1.4",
"next-swagger-doc": "^0.4.0",
"nodemailer": "^6.9.13",
"otp-timer-ts": "^3.0.1",
"pino": "^9.0.0",
"react": "^18",
"react-country-flag": "^3.1.0",
"react-countup": "^6.5.3",
"react-date-range": "^2.0.1",
"react-day-picker": "^8.10.1",
"react-dom": "^18",
"react-gauge-chart": "^0.5.1",
"react-hook-form": "^7.51.2",
"react-icons": "^5.0.1",
"react-international-phone": "^4.3.0",
"react-leaflet": "^4.2.1",
"react-redux": "^9.1.1",
"redis": "^4.6.13",
"redux-persist": "^6.0.0",
"speakeasy": "^2.0.0",
"swagger-ui-react": "^5.17.2",
"tailwind-merge": "^2.2.2",
"tailwind-scrollbar": "^3.1.0",
"tailwind-scrollbar-hide": "^1.1.7",
"tailwindcss-animate": "^1.0.7",
"uuid": "^10.0.0",
"zod": "^3.22.4"
},
"devDependencies": {
"@types/bcrypt": "^5.0.2",
"@types/country-list": "^2.1.4",
"@types/crypto-js": "^4.2.2",
"@types/event-source-polyfill": "^1.0.5",
"@types/jsonwebtoken": "^9.0.6",
"@types/leaflet": "^1.9.12",
"@types/lodash": "^4.17.0",
"@types/node": "^20.12.7",
"@types/nodemailer": "^6.4.15",
"@types/react": "^18",
"@types/react-date-range": "^1.4.9",
"@types/react-dom": "^18",
"@types/react-gauge-chart": "^0.4.3",
"@types/speakeasy": "^2.0.0",
"@types/swagger-ui-react": "^4.18.3",
"@types/uuid": "^10.0.0",
"@typescript-eslint/eslint-plugin": "^7.5.0",
"@typescript-eslint/parser": "^7.5.0",
"autoprefixer": "^10.0.1",
"eslint": "^8",
"eslint-config-next": "14.1.4",
"eslint-config-prettier": "^9.1.0",
"eslint-plugin-prettier": "^5.1.3",
"husky": "^9.0.11",
"lint-staged": "^15.2.2",
"postcss": "^8",
"prettier": "^3.2.5",
"prettier-plugin-tailwindcss": "^0.5.13",
"prisma": "^5.12.1",
"tailwindcss": "^3.3.0",
"ts-node": "^10.9.2",
"typescript": "^5.4.5"
},

Is it possible to any implementation for this issue ? How to improve local development speed?