Feature modules in NestJS - Performance & Optimization

Performance: Feature modules

MEDIUM IMPACT

Feature modules affect the initial load time and memory usage by organizing code into lazy-loadable chunks.

Organizing application code for better load performance

NestJS

import { Module } from '@nestjs/common';
import { UsersService } from './users.service';
import { UsersController } from './users.controller';

@Module({
  providers: [UsersService],
  controllers: [UsersController],
  exports: [UsersService],
})
export class UsersModule {}

// Then lazy load UsersModule using dynamic imports or module federation

Loads feature modules only when needed, reducing initial bundle size and speeding up first meaningful paint.

📈 Performance GainReduces initial load bundle size by 20-40%, improving LCP and reducing memory usage

Organizing application code for better load performance

NestJS

import { Module } from '@nestjs/common';
import { UsersService } from './users.service';
import { UsersController } from './users.controller';

@Module({
  providers: [UsersService],
  controllers: [UsersController],
  exports: [UsersService],
})
export class UsersModule {}

// Then import UsersModule directly in AppModule eagerly

Eagerly loading all modules in the root module increases initial bundle size and delays first contentful paint.

📉 Performance CostBlocks rendering longer due to loading all code upfront, increasing LCP by 200-500ms depending on app size

Performance Comparison

Pattern	DOM Operations	Reflows	Paint Cost	Verdict
Eagerly loading all feature modules	N/A	N/A	High initial paint delay	[X] Bad
Lazy loading feature modules on demand	N/A	N/A	Faster initial paint	[OK] Good

Rendering Pipeline

Feature modules split code into smaller chunks that load on demand, reducing the initial JavaScript parsing and execution time.

→Network

→JavaScript Parsing

→Execution

→Rendering

⚠️ BottleneckNetwork and JavaScript parsing delay due to large initial bundles

Core Web Vital Affected

LCP

Feature modules affect the initial load time and memory usage by organizing code into lazy-loadable chunks.

Optimization Tips

1Use lazy loading to load feature modules only when needed.

2Avoid importing all feature modules eagerly in the root module.

3Smaller initial bundles improve Largest Contentful Paint (LCP).

Performance Quiz - 3 Questions

What is the main performance benefit of using feature modules with lazy loading in NestJS?

A Triggers more DOM reflows during rendering

B Increases memory usage by loading all modules upfront

C Reduces initial bundle size and speeds up first contentful paint

D Blocks rendering until all modules are loaded

DevTools: Network and Performance panels

How to check: Open DevTools, go to Network panel, reload page and observe JS bundle sizes and load times. Then use Performance panel to see scripting and rendering times.

What to look for: Look for large initial JS bundles and long scripting times indicating eager loading. Smaller bundles and deferred loading show better performance.

Practice

1. What is the main purpose of a feature module in NestJS?

easy

A. To manage HTTP requests without controllers

B. To group related controllers and services for better organization

C. To replace the main application module

D. To handle database connections directly

Solution

1. Step 1: Understand the role of feature modules

   Feature modules group related parts of the app like controllers and services to keep code organized.

2. Step 2: Compare options with this role

   Only To group related controllers and services for better organization describes grouping related controllers and services, which matches the purpose.

3. Final Answer:

   To group related controllers and services for better organization -> Option B

4. Quick Check:

   Feature modules organize code = D [OK]

Hint: Feature modules group related parts of your app [OK]

Common Mistakes:

• Thinking feature modules handle database connections directly
• Confusing feature modules with the main app module
• Assuming feature modules replace controllers

2. Which of the following is the correct way to define a feature module in NestJS?

easy

A. @Controller({}) export class FeatureModule {}

B. @Injectable() export class FeatureModule {}

C. @Module({ controllers: [], providers: [] }) export class FeatureModule {}

D. export class FeatureModule {}

Solution

1. Step 1: Recall the decorator for modules

   Feature modules use the @Module decorator with metadata like controllers and providers.

2. Step 2: Match options with correct decorator

   Only @Module({ controllers: [], providers: [] }) export class FeatureModule {} uses @Module with controllers and providers arrays, which is correct syntax.

3. Final Answer:

   @Module({ controllers: [], providers: [] }) export class FeatureModule {} -> Option C

4. Quick Check:

   @Module decorator defines modules = B [OK]

Hint: Use @Module decorator with controllers and providers [OK]

Common Mistakes:

• Using @Controller or @Injectable instead of @Module
• Forgetting to add the decorator
• Defining empty classes without decorators

3. Given this feature module code, what will be the output when the getHello() method is called from HelloController?

@Module({
  controllers: [HelloController],
  providers: [HelloService],
})
export class HelloModule {}

@Injectable()
export class HelloService {
  getHello() {
    return 'Hello from service!';
  }
}

@Controller()
export class HelloController {
  constructor(private readonly helloService: HelloService) {}

  @Get()
  getHello() {
    return this.helloService.getHello();
  }
}

medium

A. undefined

B. "Hello from controller!"

C. Runtime error due to missing provider

D. "Hello from service!"

Solution

1. Step 1: Understand dependency injection in the module

   The HelloService is provided in the module and injected into HelloController.

2. Step 2: Trace the method call

   The controller's getHello calls helloService.getHello(), which returns 'Hello from service!'.

3. Final Answer:

   "Hello from service!" -> Option D

4. Quick Check:

   Service method returns string = C [OK]

Hint: Controller calls service method returning string [OK]

Common Mistakes:

• Assuming controller returns its own string
• Thinking provider is missing causing error
• Confusing method names or return values

4. Identify the error in this feature module definition:

@Module({
  controllers: [UserController],
  providers: [UserService],
})
export class UserModule {}

@Injectable()
export class UserService {}

@Controller()
export class UserController {
  constructor(userService: UserService) {}
}

medium

A. Missing access modifier 'private' in constructor injection

B. UserService is not decorated with @Injectable()

C. UserController is missing @Controller() decorator

D. UserService is not listed in providers array

Solution

1. Step 1: Check constructor injection syntax

   In NestJS, injected dependencies must have an access modifier like private or public to create a class property.

2. Step 2: Identify the missing modifier

   The constructor parameter 'userService' lacks 'private' or 'public', so it won't be assigned automatically.

3. Final Answer:

   Missing access modifier 'private' in constructor injection -> Option A

4. Quick Check:

   Constructor injection needs access modifier = A [OK]

Hint: Constructor injection needs private/public keyword [OK]

Common Mistakes:

• Forgetting private/public in constructor parameters
• Assuming @Injectable is missing when it is present
• Confusing decorator placement

5. You want to create a feature module that imports another feature module to reuse its services. Which of the following is the correct way to import AuthModule into UserModule?

hard

A. @Module({ imports: [AuthModule], controllers: [UserController], providers: [UserService] }) export class UserModule {}

B. @Module({ controllers: [UserController], providers: [UserService] }) export class UserModule { constructor(private authModule: AuthModule) {} }

C. @Module({ exports: [AuthModule], controllers: [UserController], providers: [UserService] }) export class UserModule {}

D. @Module({ imports: [], controllers: [UserController], providers: [UserService] }) export class UserModule {}

Solution

1. Step 1: Understand module imports in NestJS

   To reuse services from another module, you must import that module in the imports array.

2. Step 2: Identify correct import usage

   @Module({ imports: [AuthModule], controllers: [UserController], providers: [UserService] }) export class UserModule {} correctly adds AuthModule to imports, allowing UserModule to use its exported providers.

3. Final Answer:

   @Module({ imports: [AuthModule], controllers: [UserController], providers: [UserService] }) export class UserModule {} -> Option A

4. Quick Check:

   Import modules via imports array = A [OK]

Hint: Use imports array to include other feature modules [OK]

Common Mistakes:

• Trying to inject modules via constructor instead of imports
• Using exports instead of imports to include modules
• Leaving imports array empty when reusing modules