From e862b2cb687616f11e74c2818d9647fb2afb639f Mon Sep 17 00:00:00 2001
From: nossbigg <chenggibson@gmail.com>
Date: Wed, 1 Sep 2021 21:49:56 +1000
Subject: [PATCH 1/2] Remove duplicate image2.png

---
 _posts/2021-07-29-grabfood-bundle-size.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/_posts/2021-07-29-grabfood-bundle-size.md b/_posts/2021-07-29-grabfood-bundle-size.md
index ec932df2..9ed98571 100644
--- a/_posts/2021-07-29-grabfood-bundle-size.md
+++ b/_posts/2021-07-29-grabfood-bundle-size.md
@@ -60,7 +60,7 @@ I: Large dependencies (fairly obvious, because the box size will be large)
 
 II: Duplicate dependencies (same library that is bundled multiple times across different assets)
 
-![](img/grabfood-bundle/image2.png)![](img/grabfood-bundle/image2.png)
+![](img/grabfood-bundle/image2.png)
 
 III: Dependencies that look like they don’t belong (e.g. Why is ‘elliptic’ in my frontend bundle?)
 

From 4804c07888af0e843f05d5dea81a68148499db5e Mon Sep 17 00:00:00 2001
From: nossbigg <chenggibson@gmail.com>
Date: Wed, 1 Sep 2021 21:54:23 +1000
Subject: [PATCH 2/2] Move Step B + Step C section header picture to correct
 location

---
 _posts/2021-07-29-grabfood-bundle-size.md | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/_posts/2021-07-29-grabfood-bundle-size.md b/_posts/2021-07-29-grabfood-bundle-size.md
index 9ed98571..9dc2685b 100644
--- a/_posts/2021-07-29-grabfood-bundle-size.md
+++ b/_posts/2021-07-29-grabfood-bundle-size.md
@@ -73,13 +73,14 @@ What to avoid:
     * E.g. Small node dependencies
 
 ### Step B: Investigate the Usage of Your Dependencies (Where are my Dependencies Used?)
-In this step, we are trying to answer this question: “Given a dependency, which files and features are making use of it?”.
 
 <div class="post-image-section"><figure>
   <img src="/img/grabfood-bundle/image10.png" alt="Our grabfood.com bundle analyzer output" style="width:90%"> <a href="https://pixabay.com/photos/architecture-building-geometric-1868547/"><figcaption align="middle"><i>Image source</i></figcaption></a>
   </figure>
 </div>
 
+In this step, we are trying to answer this question: “Given a dependency, which files and features are making use of it?”.
+
 There are two broad approaches that can be used to identify how our dependencies are used:
 
 I: Top-down approach: “Where does our project use dependency X?”
@@ -105,13 +106,14 @@ Don’ts:
 *   Stick to a single approach - Know when to switch between Top-down and Bottom-up approaches to narrow down the search space.
 
 ### Step C: Reducing Your Dependencies
-Now that you know what your largest dependencies are and where they are used, the next step is figuring out how you can shrink your dependencies.
 
 <div class="post-image-section"><figure>
   <img src="/img/grabfood-bundle/image15.gif" alt="Our grabfood.com bundle analyzer output" style="width:90%"> <a href="https://i.imgur.com/w8Ydzvb.gif"><figcaption align="middle"><i>Image source</i></figcaption></a>
   </figure>
 </div>
 
+Now that you know what your largest dependencies are and where they are used, the next step is figuring out how you can shrink your dependencies.
+
 Here are 7 strategies that you can use to reduce your dependencies:
 
 1.  [Lazy load large dependencies and less-used dependencies](#1-lazy-load-large-dependencies-and-less-used-dependencies)