Compare the Old-School Way of Manual Code Management vs. Webpack’s Magic: Reduce File Size and Maximize Efficiency! πŸ§™β€β™‚οΈ

πŸš€ Webpack: Before & After – A Game Changer! ⚑

Discover how Webpack transforms your project!

We’re diving into a side-by-side comparison of a project without Webpack vs. with Webpack. πŸ› οΈ This will show you just how much more ef…


This content originally appeared on DEV Community and was authored by Dharmendra Kumar

πŸš€ Webpack: Before & After – A Game Changer! ⚑

Discover how Webpack transforms your project!

We’re diving into a side-by-side comparison of a project without Webpack vs. with Webpack. πŸ› οΈ This will show you just how much more efficient your workflow can be with bundling and optimizations!

Webpack Preview

Webpack Preview Link

🌱 Without Webpack: The Old Way πŸ’Ύ

When you structure a project without Webpack, you manually manage everything – from scripts to modules. Here's how your project setup would look:

πŸ”§ Project Structure

webpack-example-no-webpack/
β”œβ”€β”€ dist/
β”‚   └── index.html  # Main HTML file
β”œβ”€β”€ src/
β”‚   β”œβ”€β”€ math.js     # Utility functions
β”‚   β”œβ”€β”€ module.js   # Dynamically loaded
β”‚   └── index.js    # Main entry point
└── .gitignore

βš™οΈ How the Code Looks Without Webpack

1. Utility Functions (math.js)

This file handles simple math utilities.

// src/math.js
function add(a, b) { return a + b; }   // Addition 
function subtract(a, b) { return a - b; }   // Subtraction
function multiply(a, b) { return a * b; }   // Multiplication
function divide(a, b) { return a / b; }   // Division

// Export as MathUtils to be used globally
export const MathUtils = { add, subtract, multiply, divide };

2. Dynamically Loaded Module (module.js)

This file loads dynamically when needed.

// src/module.js
function greet() {
  console.log('Hello from dynamically loaded module!');
}

// Exposing greet globally
window.GreetModule = { greet };

3. Main Entry Point (index.js)

Manages interactions with the browser and handles dynamic module loading.

// src/index.js
import { MathUtils } from "./math.js";

document.getElementById('load-module').addEventListener('click', function () {
  const script = document.createElement('script');
  script.src = '../src/module.js';  // Load module.js dynamically
  document.body.appendChild(script);

  script.onload = function () {
    GreetModule.greet();  // Trigger greet after loading
  };
});

console.log(`5 + 10 = ${MathUtils.add(5, 10)}`);

⚑ With Webpack: The Modern Approach πŸ’₯

Webpack introduces bundling, code-splitting, and tree-shaking to make your code faster and more efficient. Here's what the structure looks like with Webpack:

πŸ”§ Project Structure

webpack-example-with-webpack/
β”œβ”€β”€ dist/
β”‚   β”œβ”€β”€ index.html        # HTML file with bundled JS auto-included
β”‚   └── main.bundle.js    # Bundled JS
β”œβ”€β”€ src/
β”‚   β”œβ”€β”€ math.js           # Utility functions (tree-shakable)
β”‚   β”œβ”€β”€ module.js         # Dynamically loaded module
β”‚   └── index.js          # Main entry point
β”œβ”€β”€ webpack.config.js      # Webpack configuration
└── package.json

βš™οΈ How the Code Looks With Webpack

1. Utility Functions (math.js)

Functions are the same, but now Webpack will only include what's actually used.

// src/math.js
export function add(a, b) { return a + b; }   // Tree-shakable utilities
export function subtract(a, b) { return a - b; }
export function multiply(a, b) { return a * b; }
export function divide(a, b) { return a / b; }

2. Dynamically Loaded Module (module.js)

Now loaded with Webpack's import() for code splitting.

// src/module.js
export function greet() {
  console.log('Hello from dynamically loaded module!');
}

3. Main Entry Point (index.js)

// src/index.js
import { add, multiply } from './math';  // Only used functions imported

console.log(`5 + 10 = ${add(5, 10)}`);

document.getElementById('load-module').addEventListener('click', () => {
  import('./module').then(module => {
    module.greet();  // Loaded dynamically by Webpack
  });
});

πŸ”§ Webpack Configuration (webpack.config.js)

const path = require('path');

module.exports = {
  mode: 'production',  // Enables optimizations
  entry: './src/index.js',
  output: {
    filename: 'main.bundle.js',  // Bundled file
    chunkFilename: '[name].chunk.js',  // For dynamically imported modules
    path: path.resolve(__dirname, 'dist'),
  },
  optimization: {
    usedExports: true,  // Enables tree shaking
  },
};

πŸ” What's the Difference?

🎯 Without Webpack

  • πŸ“ Manually handle script loading.
  • πŸ›‘ No optimization, tree shaking, or code splitting.
  • πŸ“‚ Larger file sizes and unoptimized code.

⚑ With Webpack

  • πŸš€ Automatic bundling and minification.
  • 🌲 Tree shaking: Only used code gets included.
  • ⏳ Code splitting: Load parts of the code only when needed.

🌟 Want to Explore This?

Check out the full repository here:

https://github.com/dharam-gfx/webpack-example

If you find this helpful, give the repo a ⭐! 😊


This content originally appeared on DEV Community and was authored by Dharmendra Kumar


Print Share Comment Cite Upload Translate Updates
APA

Dharmendra Kumar | Sciencx (2024-09-25T07:17:19+00:00) Compare the Old-School Way of Manual Code Management vs. Webpack’s Magic: Reduce File Size and Maximize Efficiency! πŸ§™β€β™‚οΈ. Retrieved from https://www.scien.cx/2024/09/25/compare-the-old-school-way-of-manual-code-management-vs-webpacks-magic-reduce-file-size-and-maximize-efficiency-%f0%9f%a7%99%e2%99%82%ef%b8%8f/

MLA
" » Compare the Old-School Way of Manual Code Management vs. Webpack’s Magic: Reduce File Size and Maximize Efficiency! πŸ§™β€β™‚οΈ." Dharmendra Kumar | Sciencx - Wednesday September 25, 2024, https://www.scien.cx/2024/09/25/compare-the-old-school-way-of-manual-code-management-vs-webpacks-magic-reduce-file-size-and-maximize-efficiency-%f0%9f%a7%99%e2%99%82%ef%b8%8f/
HARVARD
Dharmendra Kumar | Sciencx Wednesday September 25, 2024 » Compare the Old-School Way of Manual Code Management vs. Webpack’s Magic: Reduce File Size and Maximize Efficiency! πŸ§™β€β™‚οΈ., viewed ,<https://www.scien.cx/2024/09/25/compare-the-old-school-way-of-manual-code-management-vs-webpacks-magic-reduce-file-size-and-maximize-efficiency-%f0%9f%a7%99%e2%99%82%ef%b8%8f/>
VANCOUVER
Dharmendra Kumar | Sciencx - » Compare the Old-School Way of Manual Code Management vs. Webpack’s Magic: Reduce File Size and Maximize Efficiency! πŸ§™β€β™‚οΈ. [Internet]. [Accessed ]. Available from: https://www.scien.cx/2024/09/25/compare-the-old-school-way-of-manual-code-management-vs-webpacks-magic-reduce-file-size-and-maximize-efficiency-%f0%9f%a7%99%e2%99%82%ef%b8%8f/
CHICAGO
" » Compare the Old-School Way of Manual Code Management vs. Webpack’s Magic: Reduce File Size and Maximize Efficiency! πŸ§™β€β™‚οΈ." Dharmendra Kumar | Sciencx - Accessed . https://www.scien.cx/2024/09/25/compare-the-old-school-way-of-manual-code-management-vs-webpacks-magic-reduce-file-size-and-maximize-efficiency-%f0%9f%a7%99%e2%99%82%ef%b8%8f/
IEEE
" » Compare the Old-School Way of Manual Code Management vs. Webpack’s Magic: Reduce File Size and Maximize Efficiency! πŸ§™β€β™‚οΈ." Dharmendra Kumar | Sciencx [Online]. Available: https://www.scien.cx/2024/09/25/compare-the-old-school-way-of-manual-code-management-vs-webpacks-magic-reduce-file-size-and-maximize-efficiency-%f0%9f%a7%99%e2%99%82%ef%b8%8f/. [Accessed: ]
rf:citation
» Compare the Old-School Way of Manual Code Management vs. Webpack’s Magic: Reduce File Size and Maximize Efficiency! πŸ§™β€β™‚οΈ | Dharmendra Kumar | Sciencx | https://www.scien.cx/2024/09/25/compare-the-old-school-way-of-manual-code-management-vs-webpacks-magic-reduce-file-size-and-maximize-efficiency-%f0%9f%a7%99%e2%99%82%ef%b8%8f/ |

Please log in to upload a file.




There are no updates yet.
Click the Upload button above to add an update.

You must be logged in to translate posts. Please log in or register.