Project scaffolding in NestJS - Performance & Optimization

Performance: Project scaffolding

MEDIUM IMPACT

Project scaffolding affects initial load speed and bundle size by determining the structure and included modules of the NestJS app.

Setting up a new NestJS project with optimal performance

NestJS

nest new my-app --skip-install
// Remove unused modules and providers before installing dependencies
// Use minimal modules and lazy load features where possible

Reduces bundle size and speeds up app bootstrap by including only needed code.

📈 Performance GainSaves 50+ KB in bundle, reduces initial load blocking by 100ms

Setting up a new NestJS project with optimal performance

NestJS

nest new my-app
// Accept all default modules including unnecessary ones like testing and example modules
// Add many unused providers and controllers manually after scaffolding

Includes unnecessary modules and code increasing bundle size and startup time.

📉 Performance CostAdds 100+ KB to initial bundle, blocks rendering for 200ms longer

Performance Comparison

Pattern	DOM Operations	Reflows	Paint Cost	Verdict
Default scaffold with all modules	N/A	N/A	High due to large JS bundle	[X] Bad
Minimal scaffold with only needed modules	N/A	N/A	Lower due to smaller JS bundle	[OK] Good

Rendering Pipeline

Project scaffolding defines the initial code structure and modules loaded, which affects the JavaScript bundle size and how fast the browser can parse and execute the app code.

→Network

→Script Parsing

→Script Execution

→First Contentful Paint

⚠️ BottleneckScript Execution due to large bundles from unnecessary modules

Core Web Vital Affected

LCP

Project scaffolding affects initial load speed and bundle size by determining the structure and included modules of the NestJS app.

Optimization Tips

1Keep your NestJS scaffold minimal to reduce initial bundle size.

2Remove unused modules and providers before installing dependencies.

3Use lazy loading for features to improve startup performance.

Performance Quiz - 3 Questions

How does including many unused modules in NestJS scaffolding affect performance?

A Improves startup speed by preloading features

B Has no effect on performance

C Increases bundle size and slows initial load

D Reduces memory usage

DevTools: Performance

How to check: Record page load and look at the scripting time and first contentful paint timing.

What to look for: Long scripting times and delayed first contentful paint indicate heavy initial bundles from scaffolding.

Practice

1. What is the main purpose of using nest new project-name in NestJS?

easy

A. To create a new NestJS project with a ready-to-use structure

B. To start the NestJS development server

C. To install NestJS dependencies globally

D. To generate a new module inside an existing project

Solution

1. Step 1: Understand the command nest new project-name

   This command is used to create a new NestJS project folder with all necessary files and folders set up.

2. Step 2: Identify the purpose of scaffolding

   Scaffolding means generating a basic project structure automatically to save time and follow best practices.

3. Final Answer:

   To create a new NestJS project with a ready-to-use structure -> Option A

4. Quick Check:

   Project scaffolding = create new project structure [OK]

Hint: Remember: 'nest new' creates a fresh project folder fast [OK]

Common Mistakes:

• Confusing 'nest new' with starting the server
• Thinking it installs global packages only
• Mixing it up with generating modules inside projects

2. Which of the following is the correct syntax to create a new NestJS project named my-app?

easy

A. nest create my-app

B. nest new my-app

C. nest generate project my-app

D. nest init my-app

Solution

1. Step 1: Recall the NestJS CLI command for new projects

   The official command to scaffold a new project is nest new project-name.

2. Step 2: Match the correct syntax

   Among the options, only nest new my-app matches the correct CLI command format.

3. Final Answer:

   nest new my-app -> Option B

4. Quick Check:

   Correct CLI syntax = nest new [OK]

Hint: Use 'nest new' exactly to scaffold projects [OK]

Common Mistakes:

• Using 'nest create' instead of 'nest new'
• Trying 'nest generate project' which is invalid
• Confusing 'nest init' with project creation

3. After running nest new sample-app, which folder structure will you see inside sample-app?

medium

A. src/, node_modules/, package.json, nest-cli.json

B. app/, config/, public/, package-lock.json

C. controllers/, models/, views/, app.js

D. lib/, bin/, config/, README.md

Solution

1. Step 1: Recall default NestJS project folders

   A new NestJS project contains a src/ folder for source code, node_modules/ for dependencies, and config files like package.json and nest-cli.json.

2. Step 2: Compare options with known structure

   src/, node_modules/, package.json, nest-cli.json matches the expected NestJS scaffold structure; others list unrelated folders or files.

3. Final Answer:

   src/, node_modules/, package.json, nest-cli.json -> Option A

4. Quick Check:

   Default NestJS scaffold = src and config files [OK]

Hint: Look for src folder and package.json in new projects [OK]

Common Mistakes:

• Expecting MVC folders like controllers, models, views
• Confusing with frontend project structures
• Looking for app.js which is not used in NestJS

4. You ran nest new myproject but got an error: Command 'nest' not found. What is the most likely fix?

medium

A. Rename the folder to 'nest' before running the command

B. Run nest new inside an existing NestJS project

C. Use npm start instead of nest new

D. Install Nest CLI globally using npm i -g @nestjs/cli

Solution

1. Step 1: Understand the error meaning

   The error means the system does not recognize the nest command, likely because the Nest CLI is not installed globally.

2. Step 2: Identify the correct fix

   Installing the Nest CLI globally with npm i -g @nestjs/cli makes the nest command available anywhere.

3. Final Answer:

   Install Nest CLI globally using npm i -g @nestjs/cli -> Option D

4. Quick Check:

   Missing CLI = install globally [OK]

Hint: Install Nest CLI globally to use 'nest' command [OK]

Common Mistakes:

• Trying to run 'nest new' inside a non-NestJS folder
• Using npm start which runs app, not CLI
• Renaming folders instead of installing CLI

5. You want to create a new NestJS project but customize the package manager to use yarn instead of npm. Which command should you run?

hard

A. nest new myapp --package yarn

B. nest new myapp --use-yarn

C. nest new myapp --package-manager yarn

D. nest new myapp --pm yarn

Solution

1. Step 1: Recall NestJS CLI option for package manager

   The Nest CLI supports the option --package-manager to specify which package manager to use during project creation.

2. Step 2: Match the correct option syntax

   nest new myapp --package-manager yarn uses the correct full option --package-manager yarn. Other options are invalid or incomplete.

3. Final Answer:

   nest new myapp --package-manager yarn -> Option C

4. Quick Check:

   Use --package-manager to set yarn [OK]

Hint: Use --package-manager option to pick yarn or npm [OK]

Common Mistakes:

• Using shorthand or incorrect flags like --pm or --use-yarn
• Assuming default is yarn without specifying
• Trying --package instead of --package-manager