JavaScript Performance: Tree Shaking, Code Splitting & Bundle Optimization

Why JavaScript Bundle Size Matters More Than Ever

The average website now ships over 500 KB of JavaScript — and that number keeps climbing. Every kilobyte counts: Google’s research shows that a 0.1-second improvement in page speed can increase conversions by up to 8%.

Heavy JavaScript bundles directly hurt your Core Web Vitals, slow down Time to Interactive (TTI), and push your pages down in search results. The good news? Three proven techniques — tree shaking, code splitting, and bundle optimization — can slash your payload by 40-70% without sacrificing functionality.

Tree Shaking: Eliminate What You Don’t Use

How It Works

Tree shaking is a dead-code elimination process built into modern bundlers like Webpack 5, Rollup, and Vite. It relies on ES module static analysis to detect unused exports and remove them from the final bundle.

Consider this example:

// utils.js
export function formatDate(date) { /* ... */ }
export function formatCurrency(amount) { /* ... */ }
export function formatPhoneNumber(num) { /* ... */ }

// app.js — only imports one function
import { formatDate } from './utils.js';

With tree shaking enabled, formatCurrency and formatPhoneNumber are completely excluded from the production bundle.

Best Practices for Effective Tree Shaking

• Always use ES module syntax (import/export), not CommonJS (require)
• Mark your package as side-effect-free with "sideEffects": false in package.json
• Prefer modular libraries (e.g., lodash-es instead of lodash) — this alone can save 60-80 KB
• Avoid barrel files that re-export entire directories

Code Splitting: Load Only What’s Needed

The Problem With a Single Bundle

Shipping one monolithic JavaScript file forces users to download, parse, and execute code for pages they haven’t even visited. On a mid-range mobile device, parsing 1 MB of JavaScript takes roughly 2-4 seconds.

Dynamic Imports to the Rescue

Code splitting breaks your application into smaller chunks loaded on demand:

// Load the checkout module only when the user clicks "Buy"
button.addEventListener('click', async () => {
  const { initCheckout } = await import('./checkout.js');
  initCheckout();
});

Frameworks make this even easier:

• React: React.lazy() + Suspense
• Vue: defineAsyncComponent()
• Next.js: automatic page-based splitting + next/dynamic

Real-World Impact

Metric	Before Splitting	After Splitting
Initial JS payload	820 KB	260 KB
Time to Interactive	4.8 s	1.9 s
Lighthouse Performance	52	89

These are actual figures from an e-commerce project optimized by Lueur Externe, where strategic code splitting on a Prestashop storefront cut load times by more than half.

Bundle Optimization: The Final Mile

Tree shaking and code splitting set the foundation. Bundle optimization fine-tunes the result.

Key Techniques

• Analyze first: Use webpack-bundle-analyzer or source-map-explorer to visualize what’s inside your bundle. You’ll often find surprises — a date library taking 70 KB, or a polyfill you no longer need.
• Minification & compression: Terser for minification, Brotli for compression. Brotli delivers 15-20% smaller files than gzip.
• Externalize heavy dependencies: Serve React, Vue, or Moment.js from a CDN rather than bundling them.
• Set long-term caching: Use content-hashed filenames (app.3f7a2c.js) so browsers cache aggressively and only re-download changed chunks.

A Quick Optimization Checklist

1. Run a bundle analysis report
2. Remove or replace oversized dependencies
3. Enable tree shaking and verify it works
4. Implement route-based code splitting
5. Configure Brotli compression on the server
6. Audit with Lighthouse and WebPageTest

Conclusion: Smaller Bundles, Bigger Results

JavaScript performance optimization isn’t optional anymore — it’s a ranking factor, a conversion driver, and a user experience imperative. Tree shaking removes dead weight, code splitting defers what’s not needed, and bundle optimization polishes the final output.

At Lueur Externe, our team has been delivering high-performance web solutions since 2003 — from Prestashop stores to complex WordPress platforms — and JavaScript optimization is at the core of every project we ship.

Ready to make your site faster? Get in touch with our performance experts and let’s trim your bundles down to size.