DEV Community: VARNIT JAIN

Tree Shaking and Code Splitting: How to Build Faster Web Apps

VARNIT JAIN — Sun, 02 Nov 2025 07:29:07 +0000

Tree Shaking and Code Splitting: How to Build Faster Web Apps

As JavaScript projects grow, bundle sizes tend to explode. That means slower load times, higher bandwidth usage, and frustrated users.

Two techniques have helped me drastically improve performance in production apps: Tree Shaking and Code Splitting.

Let’s break them down what they are, how they work, and how to use them with real examples.

🌲 What is Tree Shaking?

Tree Shaking is the process of removing unused or “dead” code during the build step.

If a function, variable, or module isn’t actually used anywhere, it gets excluded from the final bundle.

It’s called “tree shaking” because the build tool shakes the dependency tree and drops dead leaves 🍃.

✅ Example

// utils.js
export function usedFunction() {
  console.log("I'm used!");
}

export function unusedFunction() {
  console.log("I'm not used!");
}

// main.js
import { usedFunction } from "./utils.js";

usedFunction();

When bundled with a tool like Webpack, Rollup, or Vite in production mode, the unusedFunction will be automatically removed from the output bundle.

⚙️ How to Enable Tree Shaking in Webpack

Tree shaking works only with ES modules (ESM) that means you must use import and export, not require.

Here’s a minimal Webpack configuration that supports it:

// webpack.config.js
module.exports = {
  mode: "production", // Important: enables minification and tree shaking
  entry: "./src/main.js",
  output: {
    filename: "bundle.js",
    path: __dirname + "/dist",
  },
  optimization: {
    usedExports: true, // Marks used exports for tree shaking
  },
};

That’s it! Once you build your project with webpack --mode production, unused code is automatically removed.

✂️ What is Code Splitting?

Even with tree shaking, your JavaScript bundle can still be large.
Code Splitting solves that by splitting your code into smaller chunks that load on demand.

Instead of sending everything at once, the browser downloads only what’s needed at that moment.

✅ Example

Let’s say your app has two routes: Home and Dashboard. You don’t need to load the Dashboard code until the user actually visits it.

// home.js
export default function Home() {
  console.log("Home Page");
}

// dashboard.js
export default function Dashboard() {
  console.log("Dashboard Page");
}

// main.js
import("./home.js").then((module) => {
  module.default();
});

// Later, when needed
document.getElementById("loadDashboard").addEventListener("click", () => {
  import("./dashboard.js").then((module) => {
    module.default();
  });
});

Here, the import() call dynamically loads a module only when it’s needed.
Webpack (or Vite) automatically creates a separate chunk for each dynamically imported module.

⚙️ Code Splitting in React

React makes this super easy with React.lazy() and Suspense.

import React, { Suspense, lazy } from "react";

const Dashboard = lazy(() => import("./Dashboard"));

function App() {
  return (
    <div>
      <h1>My App</h1>
      <Suspense fallback={<p>Loading...</p>}>
        <Dashboard />
      </Suspense>
    </div>
  );
}

export default App;

Here, Dashboard will only load when it’s actually rendered perfect for improving the initial load performance of your app.

⚡ Combine Tree Shaking + Code Splitting

These two techniques work beautifully together.

Tree Shaking removes code you don’t use.

Code Splitting loads code only when you need it.

Together, they reduce your initial load size and total JavaScript payload, resulting in:

✅ Faster first paint
✅ Better Core Web Vitals
✅ Happier users

🧠 Final Tips

Use webpack-bundle-analyzer to visualize your bundle size.

Keep an eye on side effects if your module has side effects, Webpack won’t tree shake it unless you mark it as safe:

// package.json
{
  "sideEffects": false
}

Always build in production mode (--mode production) tree shaking only happens then.
Avoid using CommonJS (require, module.exports) if you want tree shaking to work effectively.

🔍 Conclusion

Tree Shaking and Code Splitting are essential for any modern web app.
They don’t just make your bundles smaller they make your apps feel faster.

If you’re serious about web performance, start using these two today. Your users (and Lighthouse scores) will thank you.

💬 Have you implemented tree shaking or code splitting in your projects?
What tools or techniques have worked best for you?

Drop your thoughts in the comments below I’d love to hear how you optimize your bundles!

React Native's Latest

VARNIT JAIN — Thu, 10 Apr 2025 15:58:52 +0000

React Native's Latest & Greatest: What's New and Why You Should Care (2024 Edition) 🚀

React Native has consistently been a powerhouse for cross-platform mobile development, allowing developers to build native-like experiences with JavaScript. But the framework isn't standing still! Let's dive into some of the most exciting updates and features
that have emerged recently (primarily in 2023/early 2024), and what they mean for your development workflow.

1. The Gradual Adoption of Fabric & TurboModules

For a while, Fabric and TurboModules were the buzzwords around React Native. These aren't new features per se, but rather a rearchitecture of the core bridge between JavaScript and native code. Here'll why that’s important:

What’s the Problem with the Old Bridge? The original bridge was synchronous, which caused bottlenecks and performance issues.
Fabric: Improved Rendering: Fabric delivers a more flexible and efficient rendering pipeline. You’ll see benefits in complex UI scenarios. Think animations, scrolling, and generally a more responsive user interface.
TurboModules: Faster Native Interface: TurboModules replace the legacy native module system. They are lazy-loaded on demand and provide significant performance gains in interactions with native APIs.
Current Status: Fabric and TurboModules are opt-in. You're not automatically upgraded. Migration takes careful planning. Link to React Native documentation on Fabric and TurboModules

2. New Architecture Adoption – The hermes engine is becoming more prevalent

Hermes is Facebook's JavaScript engine optimized for mobile devices. While available for a while, its adoption is accelerating.

Smaller App Size: Hermes leads to smaller app sizes compared to using JavaScriptCore.
Faster Startup Time: Reduced overhead means quicker app launch times.
Improved Performance: Optimized for mobile constraints leads to better overall performance.
Impact on Developers: While you don't directly interact with Hermes as much as with other React Native APIs, understanding its role helps in optimizing your code for mobile.

3. React 18 Integration & Concurrent Rendering

React 18’s concurrent rendering features bring significant improvements to React Native applications.

Automatic Batching: Concurrent Rendering allows React to automatically batch updates, reducing the number of re-renders.
Transitions: Enable smooth and responsive user interfaces by prioritizing important updates over less critical ones.
Suspense: Improve the loading experience by showing fallback content while data is being fetched.
Impact: Better user experience, smoother animations, improved performance under load.

4. Community-Driven Improvements & Libraries

The React Native community is thriving, and it's driving innovation at a rapid pace.

Reanimated V3: Significant updates to the Reanimated library for performant animations.
Tamagui: A complete React Native meta-framework focused on performance and developer experience.
New UI Libraries: Constant emergence of new and improved component libraries to enhance your app's look and feel.
Focus on Accessibility: Greater emphasis on creating accessible mobile applications.

Getting Started with the Latest Developments

Update React Native CLI: Ensure you're using the latest version of the React Native CLI.
Explore Community Resources: Follow React Native developers on Twitter, subscribe to newsletters, and participate in online forums.
Experiment with New Libraries: Don't be afraid to try out new libraries and frameworks.

Conclusion

React Native remains a leading choice for cross-platform mobile development, continually evolving to meet the demands of modern applications. By staying informed about the latest developments and embracing community-driven innovations, you can build exceptional
mobile experiences for users worldwide.

Mastering Dependency Injection in Angular

VARNIT JAIN — Fri, 25 Oct 2024 15:27:47 +0000

Dependency Injection (DI) is a design pattern that's critical to building scalable and maintainable applications in Angular. Yet, for many developers new to Angular, DI can be a bit of a mystery. In this blog post, we'll break down what DI is, why Angular uses it, and how you can implement DI in your applications for efficient, clean, and scalable code.

1. What is Dependency Injection?

Dependency Injection is a design pattern that deals with how components acquire dependencies. In simpler terms, if a component needs a service to perform its operations, DI allows Angular to "inject" that dependency into the component instead of the component having to create
This approach has a few major benefits:

Modularity: Components and services are loosely coupled and modular.
Testability: Code is easier to test because you can mock dependencies.
Flexibility: Dependencies can be swapped without changing code in the component.

2. How Angular Implements DI

Here's a detailed blog draft you can post on Medium, covering an overview of Angular's Dependency Injection (DI) system — an essential yet often misunderstood concept in Angular development.

Mastering Dependency Injection in Angular: A Guide for Beginners
Dependency Injection (DI) is a design pattern that's critical to building scalable and maintainable applications in Angular. Yet, for many developers new to Angular, DI can be a bit of a mystery. In this blog post, we'll break down what DI is, why Angular uses it, and how you can implement DI in your applications for efficient, clean, and scalable code.

What is Dependency Injection? Dependency Injection is a design pattern that deals with how components acquire dependencies. In simpler terms, if a component needs a service to perform its operations, DI allows Angular to "inject" that dependency into the component instead of the component having to create it.

This approach has a few major benefits:

Modularity: Components and services are loosely coupled and modular.
Testability: Code is easier to test because you can mock dependencies.
Flexibility: Dependencies can be swapped without changing code in the component.

How Angular Implements DI Angular uses DI extensively through its injector system, which is part of Angular’s core. The injector is responsible for:

Providing dependencies to components and services.
Managing dependency lifecycles.

In Angular, dependencies are usually provided at the module level or component level and are registered with a @Injectable decorator. The injector resolves dependencies by looking at a component’s or service’s constructor to determine which dependencies are required.

3. Basic Setup: Creating a Service with DI

Let’s create a simple service in Angular to demonstrate how DI works. In this example, we'll create a UserService that will be injected into a UserComponent.

Step 1: Create the Service
To create the service, run:

ng generate service user

This generates a user.service.ts file, which should look something like this:

import { Injectable } from '@angular/core';

@Injectable({
  providedIn: 'root',
})
export class UserService {
  constructor() { }

  getUser() {
    return { id: 1, name: 'John Doe' };
  }
}

Here, the @Injectable decorator marks UserService as a service that can be injected. The providedIn: 'root' tells Angular to provide this service at the root level, meaning it will be a singleton (only one instance will exist).

Step 2: Injecting the Service into a Component
To inject this service, we’ll add it to our UserComponent as a dependency. Let’s assume we have a user.component.ts file that looks like this:

import { Component, OnInit } from '@angular/core';
import { UserService } from './user.service';

@Component({
  selector: 'app-user',
  template: `
    <p>User: {{ user?.name }}</p>
  `,
})
export class UserComponent implements OnInit {
  user: any;

  constructor(private userService: UserService) {}

  ngOnInit(): void {
    this.user = this.userService.getUser();
  }
}

4. Configuring Injection Scopes

Angular allows you to specify different injection scopes, which can be quite powerful:

Singleton Services: Use the providedIn: 'root' syntax to ensure the service is a singleton across the application.
Component-scoped Services: If you specify a service at the component level, it will be created specifically for that component instance, offering a unique instance per component.

To register a service only for a specific component, provide it in the providers array in the component metadata:

@Component({
  selector: 'app-custom',
  providers: [CustomService],
})
export class CustomComponent { /*...*/ }

5. Advanced DI Patterns: Factory Providers and Injection Tokens

Factory Providers
Factory providers are useful when you need to create a dependency based on some runtime logic. Here’s a simple example:

import { Injectable } from '@angular/core';

@Injectable({
  providedIn: 'root',
})
export class LoggerService {
  constructor(private level: string) {}

  log(message: string) {
    if (this.level === 'debug') {
      console.log(message);
    }
  }
}

export function loggerFactory() {
  return new LoggerService('debug');
}

Then provide it in a module or component using the useFactory syntax:

@NgModule({
  providers: [
    { provide: LoggerService, useFactory: loggerFactory },
  ],
})
export class AppModule { }

Injection Tokens
Injection Tokens are particularly useful when you have multiple services of the same type or need to inject non-class values, like configuration settings.

import { InjectionToken } from '@angular/core';

export const API_URL = new InjectionToken<string>('API_URL');

@NgModule({
  providers: [
    { provide: API_URL, useValue: 'https://api.example.com' },
  ],
})
export class AppModule { }

You can then inject API_URL into any component or service as you would a class-based service.

Conclusion

Dependency Injection is a powerful tool in Angular that helps keep your code clean, modular, and testable. Understanding how DI works — from simple service injection to advanced patterns like factory providers and injection tokens will greatly enhance your ability to write scalable and maintainable Angular applications.

Simplifying Icon Management in React Native with a Versatile Icons Component

VARNIT JAIN — Tue, 03 Sep 2024 05:01:16 +0000

Introduction

Icons are essential in mobile app development, offering a visually intuitive way to represent actions, statuses, and navigation. React Native offers various icon libraries, but managing them individually can be cumbersome, especially when your project uses multiple icon sets. To address this, I’ve created a versatile Icons component that simplifies using icons from different libraries in your React Native projects.

In this blog, I’ll walk you through how this component works and how you can leverage it to streamline your icon management.

The Challenge

React Native developers often juggle multiple icon libraries like AntDesign, FontAwesome, and Ionicons, depending on the design needs. Switching between these libraries and managing different imports can clutter your codebase, making it harder to maintain. This is where a unified Icons component can help.

The Solution: A Versatile Icons Component

Here’s a modified version of the Icons component that centralizes icon management:

import React from 'react';
import AntDesign from 'react-native-vector-icons/AntDesign';
import FontAwesome from 'react-native-vector-icons/FontAwesome';
import FontAwesome5 from 'react-native-vector-icons/FontAwesome5';
import Ionicons from 'react-native-vector-icons/Ionicons';
import Feather from 'react-native-vector-icons/Feather';
import MaterialCommunityIcons from 'react-native-vector-icons/MaterialCommunityIcons';
import Entypo from 'react-native-vector-icons/Entypo';
import MaterialIcons from 'react-native-vector-icons/MaterialIcons';
import SimpleLineIcons from 'react-native-vector-icons/SimpleLineIcons';
import Octicons from 'react-native-vector-icons/Octicons';
import Foundation from 'react-native-vector-icons/Foundation';
import EvilIcons from 'react-native-vector-icons/EvilIcons';

export const ICONS_TYPE = {
  MaterialCommunityIcons,
  MaterialIcons,
  Ionicons,
  Feather,
  FontAwesome,
  FontAwesome5,
  AntDesign,
  Entypo,
  SimpleLineIcons,
  Octicons,
  Foundation,
  EvilIcons,
};

const Icons = ({type, name, color, size = 24, style}) => {
  if (!type || !name) return null;

  const IconComponent = ICONS_TYPE[type];
  if (!IconComponent) {
    console.warn(`Icon type "${type}" is not supported.`);
    return null;
  }

  return <IconComponent name={name} size={size} color={color} style={style} />;
};

export default Icons;

Component Breakdown

ICONS_TYPE: This object maps icon type names to their respective components. It includes all major icon libraries you might use in a React Native project.
Icons Component: This functional component accepts type, name, color, size, and style as props:
type: Specifies the icon library to use (e.g., FontAwesome, Ionicons).
name: The name of the icon in the selected library.
color: Sets the icon color.
size: Defines the icon size, defaulting to 24 if not specified.
style: Allows additional styling to be passed to the icon.

Improved Error Handling

The modified component includes a check to ensure it type is valid and supported. If an unsupported type is used, a warning is logged, helping you catch issues early during development.

Using the Icons Component

Here’s how you can use the Icons component in your React Native project:

import React from 'react';
import {View} from 'react-native';
import Icons from './Icons'; // Assume this is the path to your Icons component

const App = () => {
  return (
    <View style={{flexDirection: 'row', justifyContent: 'space-around'}}>
      <Icons type="FontAwesome" name="home" color="blue" size={30} />
      <Icons type="Ionicons" name="md-checkmark-circle" color="green" size={30} />
      <Icons type="Feather" name="camera" color="red" size={30} />
    </View>
  );
};

export default App;

Advantages of This Approach

Centralized Management: All your icon imports and types are managed in a single component, reducing redundancy and improving maintainability.
Flexibility: Easily switch between different icon libraries without altering the core logic of your components.
Error Handling: By including checks and warnings, you reduce the risk of runtime errors caused by unsupported icon types.
Scalability: As your app grows, this component can be easily extended to include additional icon libraries or custom icons.

Conclusion

Managing multiple icon libraries in React Native doesn’t have to be a headache. By using this Icons component, you can simplify your workflow, reduce clutter in your codebase, and enhance the maintainability of your projects. Whether you're working on a small app or a large-scale project, this component is designed to save you time and effort.

Expo with Redux Toolkit, File System, and Redux Persist: A Comprehensive Guide

VARNIT JAIN — Fri, 30 Aug 2024 05:39:00 +0000

Redux Toolkit is a popular library that simplifies Redux development by providing a set of utilities and conventions. It includes a reducer and action creation patterns that streamline the process of writing Redux logic. Combining Redux Persist with Redux Toolkit can significantly enhance the efficiency and reliability of state management in your React Native apps.

expo-file-system provides access to a file system stored locally on the device. It is also capable of uploading and downloading files from network URLs

redux-persist-expo-file-system-storage is a storage engine for redux-persist that uses Expo's File System API. This allows you to persist your Redux store's state to the device's file system, ensuring that the state is saved and restored even if the app is closed or restarted.

Once you have configured your Redux Toolkit store, you can integrate Redux Persist. Begin by installing the necessary dependencies:

npm i @reduxjs/toolkit 
npm i expo-file-system 
npm i redux-persist-expo-file-system-storage
npm i redux-persist

we create a simple Redux store @reduxjs/toolkit to manage a counter state. We define an initial state with a count of 0 and create a slice named counter with two reducers: increment and decrement, which increase and decrease the count by 1, respectively. The actions and the reducer are exported for use in our Redux setup, allowing us to easily manage the counter state throughout the application.

// store/counter/counter.tsx
import { createSlice } from "@reduxjs/toolkit";

const initialState = {
  count: 0,
};

const counterSlice = createSlice({
  name: "couter",
  initialState,
  reducers: {
    increment: (state) => {
      state.count += 1;
    },
    decrement: (state) => {
      state.count -= 1;
    },
  },
});

export const { increment, decrement } = counterSlice.actions;
export default counterSlice.reducer;

The code sets up a Redux store in a React Native app using @reduxjs/toolkit and redux-persist with Expo's FileSystem for persistent storage. It combines reducers, including a counter reducer, and ensures their state is saved and loaded from a specified directory within the app's file system.

// store/ConfigureStore.js
import { combineReducers } from "@reduxjs/toolkit";
import { documentDirectory, EncodingType } from "expo-file-system";
import { createExpoFileSystemStorage } from "redux-persist-expo-file-system-storage";

import CounterReducer from "./counter/counter";
import { persistReducer } from "redux-persist";
console.log('Document Directory:',documentDirectory);
export const expoFileSystemStorage = createExpoFileSystemStorage({
  storagePath: `${documentDirectory}customPathName/`,
  encoding: EncodingType.UTF8,
  debug: true,
});
const persist = (key, reducer) =>
  persistReducer(
    {
      key,
      storage: expoFileSystemStorage,
    },
    reducer
  );

const combinePersistReducers = (keys) =>
  Object.keys(keys).reduce(
    (obj, key) => ({
      ...obj,
      [key]: persist(key, keys[key]),
    }),
    {}
  );

const reducers = combineReducers({
  ...combinePersistReducers({
    count: CounterReducer,
  }),
});

export default reducers;

In this part of the setup, we configure and create the Redux store using @reduxjs/toolkit. We import the rootReducer that combines our reducers and disable the serializableCheck middleware to prevent serialization errors from redux-persist. We also set up redux-persist to enable state persistence and export both the store and the persistor for integration with our React Native application. This configuration ensures our app's state is maintained even after it is closed or refreshed.

// store/index.js
import { configureStore } from "@reduxjs/toolkit";
import { persistStore } from "redux-persist";
import { Provider } from "react-redux";
import rootReducer from "./ConfigureStore";

const store = configureStore({
  reducer: rootReducer,
  middleware: (getDefaultMiddleware) =>
    getDefaultMiddleware({
      serializableCheck: false,
    }),
});
const persistor = persistStore(store);

export { store, persistor };

By logging and understanding the documentDirectory path in the configureStore file, you gain valuable insight into where your Redux Persist data is stored in an Expo environment. This knowledge not only helps in debugging but also ensures that your data persistence strategy is robust and secure. Now you can confidently manage your app's state, knowing exactly where your data lives.

Within this directory, redux-persist will store your persisted state. Typically, the persisted data is stored in a file named persist-counter (or something similar, depending on your configuration). Here’s how you can navigate to and view this file:

// persist-count file

{"count":"0","_persist":"{\"version\":-1,\"rehydrated\":true}"}

For a complete example, you can check out the GitHub repository for this project: GitHub Repository Link

💬 I’d love to hear your thoughts on this topic! If you have any questions about using Expo File System with Redux Persist, or if you run into any issues, please drop a comment below. I’m here to help! 😄