How to optimize builds for deployment in Replit

Open the .replit file (enable Show hidden files in the file tree menu). The [deployment] section controls what happens when you publish your app. The build command runs once before the app starts, and the run command is what keeps your app alive. Separate these clearly: build should install dependencies and compile your code, run should only start the server. Avoid running npm install in the run command — it adds startup latency on every cold start. Set deploymentTarget to cloudrun for standard web apps.

1# .replit — Optimized deployment configuration
2
3entrypoint = "src/App.tsx"
4modules = ["nodejs-20:v8-20230920-bd784b9"]
5
6run = "npm run dev"
7
8[nix]
9channel = "stable-24_05"
10
11[deployment]
12# Build: install + compile (runs once per deployment)
13build = ["sh", "-c", "npm ci --production=false && npm run build"]
14# Run: start the server (runs on every cold start)
15run = ["sh", "-c", "node server/index.js"]
16deploymentTarget = "cloudrun"
17
18[[ports]]
19localPort = 3001
20externalPort = 80

Review your package.json and make sure development-only tools are listed under devDependencies, not dependencies. Testing frameworks (Jest, Vitest), linters (ESLint), formatters (Prettier), and type checkers (TypeScript itself) should all be devDependencies. Move any misplaced packages using npm install --save-dev package-name. Then modify your build command to install all dependencies for building (npm ci --production=false) but only bundle what the production code actually imports.

1// Example package.json with properly separated dependencies
2{
3  "dependencies": {
4    "express": "^4.18.2",
5    "pg": "^8.11.3",
6    "react": "^18.2.0",
7    "react-dom": "^18.2.0",
8    "react-router-dom": "^6.21.0"
9  },
10  "devDependencies": {
11    "@types/react": "^18.2.43",
12    "@types/express": "^4.17.21",
13    "@vitejs/plugin-react": "^4.2.1",
14    "eslint": "^8.56.0",
15    "prettier": "^3.1.1",
16    "typescript": "^5.3.3",
17    "vite": "^5.0.8"
18  }
19}

Vite uses Rollup under the hood, which automatically performs tree shaking — removing unused code from your final bundle. To verify it is working correctly, check that your imports are named imports (import { Button } from './components') rather than namespace imports (import * as Components from './components'). Create an index.ts barrel file in each component directory that re-exports only what is needed. After building, check the output size in Shell with du -sh dist/ to compare against previous builds.

1// vite.config.ts — Optimized build configuration
2import { defineConfig } from 'vite';
3import react from '@vitejs/plugin-react';
4
5export default defineConfig({
6  plugins: [react()],
7  build: {
8    // Enable source maps only in development
9    sourcemap: false,
10    // Increase chunk warning limit to reduce noise
11    chunkSizeWarningLimit: 600,
12    rollupOptions: {
13      output: {
14        // Split vendor code into a separate chunk for better caching
15        manualChunks: {
16          vendor: ['react', 'react-dom', 'react-router-dom'],
17        }
18      }
19    }
20  },
21  server: {
22    host: '0.0.0.0',
23    port: 5173
24  }
25});

Node_modules is typically the largest directory in a JavaScript project and directly affects build time and storage consumption. Run npm ls --all | wc -l in Shell to see how many packages are installed. Look for large packages you can replace: moment.js (replace with date-fns or dayjs), lodash (use lodash-es for tree-shakeable imports), and full icon libraries (import only the icons you use). Run du -sh node_modules/ to check the total size. If it exceeds 500 MB, investigate with du -sh node_modules/* | sort -rh | head -20.

1# Check node_modules size
2du -sh node_modules/
3
4# Find the largest packages
5du -sh node_modules/* | sort -rh | head -20
6
7# Check total package count
8npm ls --all | wc -l
9
10# Remove unused packages
11npm prune
12
13# Deduplicate nested dependencies
14npm dedupe

The most common deployment error is 'hostingpid1: an open port was not detected,' which means the health check could not reach your server within 5 seconds. Verify your server binds to 0.0.0.0 (not localhost), the port in your .replit file matches what your server listens on, and your server starts quickly (no long initialization tasks before listening). Other common issues: secrets not available in deployment (add them separately in the Deployments pane), build command failing silently (check deployment logs), and app size exceeding 8 GB.

1# Check your app's total size
2du -sh .
3
4# Verify the build output exists
5ls -la dist/ 2>/dev/null || ls -la client/dist/ 2>/dev/null
6
7# Test the production startup locally
8NODE_ENV=production node server/index.js
9
10# Check which port your server is using
11grep -r 'listen' server/index.js

Track your build times to measure optimization progress. Add a timing wrapper to your build command that reports how long the build took. For fast iteration during development, use the Run button (which uses the development run command) and only deploy to production when you are ready to ship. Autoscale deployments go idle after 15 minutes, so frequent deployments during development waste time on cold starts. Use Replit's Preview pane for development testing and deploy only for production releases.

1# .replit build command with timing
2[deployment]
3build = ["sh", "-c", "echo 'Build started' && time npm ci --production=false && time npm run build && echo 'Build complete' && du -sh dist/"]
4run = ["sh", "-c", "node server/index.js"]
5deploymentTarget = "cloudrun"