Eliminating Unused Code

Optimizing the bundle size of a React app is crucial for improving load times and overall performance. Here’s how I managed to reduce the bundle size of a React app from 2.5 MB to 1.5 MB using some effective techniques. 1. Code Splitting 🧩 I implemented code splitting with dynamic import(). This technique allows us to break our code into smaller chunks, loading only the necessary parts when needed. This helps to improve initial load times. 2. Tree Shaking 🌳 To remove unused code, I configured Webpack for tree shaking. This involves: Using ES6 Modules: Ensured our codebase used import and export statements. Setting mode to production: Webpack performs tree shaking and other optimizations automatically in production mode. Configuring sideEffects: Added a sideEffects field in package.json to help Webpack identify which files can be safely excluded. 3. Lazy Loading ⏳ Used React.lazy() and Suspense to defer the loading of components until they are actually needed. This reduces the amount of code that is loaded upfront, speeding up the initial render. 4. Minification and Compression 🔧 Applied minification with Terser and used gzip compression to reduce the size of JavaScript files and other assets. This helps to further minimize the bundle size and improve loading times. 5. Dependency Audit 📦 Conducted an audit of our dependencies using depcheck to identify and remove unused packages. This not only cut down the bundle size but also cleaned up our project. 6. Removing Unused Code ✂️ Manually reviewed and removed any redundant or obsolete code. This manual cleanup, combined with automated tools, ensured that no unnecessary code was included in the final bundle. 7. Analyzing Bundle Size with webpack-bundle-analyzer 🔍 To visualize and understand the impact of these optimizations, I used webpack-bundle-analyzer. This tool provides a detailed report of the contents of your bundle, allowing you to see which modules are taking up space and how effectively tree shaking has worked. After running your build, the analyzer will generate an interactive report that helps you identify large dependencies and potential areas for further optimization. By integrating these steps, I was able to achieve a significantly smaller and more efficient React app. If you’re looking to improve your app’s performance, these techniques are a great starting point! #React #WebOptimization #CodeSplitting #Webpack #BundleAnalyzer #WebPerformance

I was debugging a performance issue in one of my React apps, and out of curiosity, I opened Chrome’s Coverage tab and it showed 99% of my JavaScript as “unused.” It obviously didn't make sense because everything I wrote was completely functional. Basically, on the initial page load, my app only rendered the dashboard shell. But the bundle also contained - Components for 5 other routes - A date picker for a settings page - A charting library that loads only when you open analytics. - A modal used once inside a multi-step flow It also had old CSS that I had forgotten still existed. Since none of that ran on the first load, DevTools marked all of it as unused. The code wasn’t unused, it was just unexecuted (yet). The Coverage tab isn’t judging your code but simply showing you what the browser executed during the time you recorded. So if you don’t open that modal or navigate to the /profile route, trigger that user checkout flow, or click the "view analytics" button, DevTools treats those parts as dead code, even though they aren’t. But this way, now I knew exactly what to optimize for. Once I interacted with the app and triggered all flows, the “unused” percentage dropped dramatically. But it also revealed actual bloat hiding in the bundle: - A 300KB chart library loaded upfront, which I then moved to React.lazy(). - Legacy CSS from an old redesign which I deleted confidently(after seeing zero execution). - A utility library imported fully for which I switched to single-method imports. - A few components that weren’t used anywhere(removed them entirely) None of this would’ve surfaced without Coverage. If you’ve never opened the Coverage tab before, try it on your project. It shows you where your app actually goes and all the places it never visits. Treat it like a map and not a report card.

Over 140 tests deleted. One day well spent. If you're using AI to generate tests, you need to read this… 👇 Here's how I spent my day improving our codebase by removing code instead of adding it. It's not an old or complicated codebase. It's a backend for frontend—just wrapping API calls. This test redundancy problem isn't new, but AI coding agents make it worse. My initial strategy was to comment out test files and check the test coverage report. Most of the time, there was already sufficient coverage so the tests were redundant. The surprising thing was that a lot of the production code was only ever called from tests. This is hidden dead code and speculative generality. You're not gonna need it...and if you do, add it when you actually need it. This is part of the TDD mindset. Why did this cleanup take a whole day? Because tests are the specification of your codebase. When they're clear, readable, and focused on behavior rather than implementation details, refactoring becomes effortless. Now we are ready to add more features with ease and evolve the design as we go. Code is a liability. The more code we produce, the more we have to maintain. I'm very cautious when asking a coding agent to add tests for me. It usually creates very tightly coupled, mock-heavy tests that make refactoring difficult due to brittle tests. My advice for those using coding agents: Code in small steps and review the bot’s changes frequently. Slow down and think about what you're doing. What's been your experience with AI-generated tests? Are you seeing similar patterns?

“Let’s keep that code - just in case, for backward compatibility...” How often did you hear this? Turns out, it’s very common! Most of the existing code is not used (70% of JavaScript functions on average web pages are unused). So how do you delete all that unused code? You make it a fun competition! 3 months ago, my boss Amir Zipori came up with that great idea for a Hackathon. It started as a simple competition - each team needed to 𝗱𝗲𝗹𝗲𝘁𝗲 as much unused code as they can. The best team wins personal prizes. Then we decided to make it a company-wide event, and involve all departments. For the first time, everyone could truly participate in a Hackathon. Some interesting stats: • We deleted 4195 files, and 4747 additional code lines. • We saved thousands of dollars in monthly payments. • We removed 46 packages from dependencies. • We deleted 159 old confluence documents. • We deleted 2851 unused branches. • We archived 50 repositories. • We archived 200 Jira tickets. • We deleted 22 feature flags. • We deleted 42 Jenkins jobs. • We closed 120 open PRs. • We deleted 6 Figma files. • 𝗪𝗲 𝗱𝗲𝗹𝗲𝘁𝗲𝗱 𝟲𝟯 𝘁𝗮𝗯𝗹𝗲𝘀. If you want to organize a similar event in your company - I shared all my lessons, and created 𝗮 𝘁𝗲𝗺𝗽𝗹𝗮𝘁𝗲 𝘆𝗼𝘂 𝗰𝗼𝘂𝗹𝗱 𝗰𝗼𝗽𝘆: https://lnkd.in/d58Tztb7 I promise you, it's much more fun than it sounds!

𝗱𝗯𝘁 “𝗹𝗲𝗮𝗳 𝗻𝗼𝗱𝗲𝘀” 𝗮𝗿𝗲 𝘀𝗶𝗹𝗲𝗻𝘁 𝗽𝗿𝗼𝗷𝗲𝗰𝘁 𝗱𝗲𝗯𝘁. I went a while without posting… so I’m coming back with something practical. I call dbt "leaf nodes" models/snapshots/seeds/sources that exist in your project, but nothing depends on them. That usually means: - old experiments that never got removed - renamed models that left leftovers behind - sources/staging layers that aren’t wired into the DAG - wasted compute + clutter + confusion during onboarding Of course, I'm not talking about the marts you are using in your dashboards. So I wrote a simple dbt macro to find leaf nodes, and optionally filter them by: - 𝗿𝗲𝘀𝗼𝘂𝗿𝗰𝗲 𝘁𝘆𝗽𝗲 (model, snapshot, source, seed) - 𝗽𝗿𝗲𝗳𝗶𝘅 (e.g. stg_, int_) - 𝗿𝗲𝗴𝗲𝘅 𝗿𝘂𝗹𝗲𝘀 (for more complex naming patterns) ✅ Example: find unused intermediate or staging models dbt run-operation find_leaf_nodes --args 'starts_with: ["stg_", "int_"]' ✅ Example: find unused sources dbt run-operation find_leaf_nodes --args 'resource_types: ["source"]' And the macro logs a clean list like: [model] int_orders_enriched [source] raw.sales.orders Suggested actions: - set enabled: false (if you want to keep it around temporarily) - or delete the file + drop the object in the warehouse Macro is here: https://lnkd.in/ddu_zW-9 If you try it, tell me what it finds. I’m curious what patterns show up across different projects. #dbt #dataengineering #analyticsengineering

🧹 Tree-shaking only works if your code is written to be shaken. I encountered this issue while building a React component library with TypeScript and RSBuild. My goal was simple: import just one component and include only the code and CSS for that component in the bundle. But no matter what I did, the consuming app always pulled in everything. Every component. Every stylesheet. Even the ones I wasn’t using. It turns out that it wasn’t a bundler config issue. It was how I wrote the code. If you import raw CSS inside your component file (import "./button.css"), that’s a side effect. Side effects break tree-shaking, because the bundler sees them as something that always needs to run. It won’t get eliminated, even if the component isn’t used. To make your component library truly tree-shakable: ✅ Avoid side effects in module scope ✅ Use CSS Modules or utility-first CSS for scoped styles ✅ Export each component from its own file ✅ Mark "sideEffects": false (or per-file) in package.json ✅ Build with ESM output and avoid bundling everything into a single entry point Once I refactored with that in mind, the output was cleaned up. Consumers only get what they import—nothing more. It’s not enough to “write modular code.” You have to write it like you want it to disappear. 🙏 If you want more practical frontend tips like this, subscribe to the newsletter. Link in the comments 👇 #react #typescript #webdev #rslib #treeShaking #cssmodules #frontend #componentdesign #javascript #performance

You're about to spend $15M modernizing your legacy system. But 30-40% of that code is dead. It executes but serves no purpose. Or never executes at all. Or serves business processes discontinued years ago. Why migrate code you don't need? New plan: ELIMINATE first, THEN modernize Dead code creates multiple problems: → Increases cognitive load (developers must understand irrelevant code) → Creates false dependencies (can't remove Program A because Program B calls it... but nobody calls Program B) → Adds security risk (old code = old vulnerabilities) → Wastes modernization budget How to find it: 1. Static analysis: finds obviously unreachable code 2. Runtime monitoring: 3-6 months tracking what actually executes 3. AI-powered analysis: CM evolveIT's LLM identifies code serving deprecated business purposes One critical lesson: Don't just measure cyclomatic complexity and call it done. Ask: "How much of this complexity is even necessary?" The answer is often: "About 65%." That changes everything about your modernization plan. Learn about dead code elimination and more in our recent article "Beyond Cyclomatic Complexity." #TechnicalDebt #LegacyModernization #CodeQuality #SoftwareOptimization