diff --git a/_posts/2021-07-29-grabfood-bundle-size.md b/_posts/2021-07-29-grabfood-bundle-size.md index ec932df27..9dc2685b8 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?) @@ -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?”.
Our grabfood.com bundle analyzer output
Image source
+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.
Our grabfood.com bundle analyzer output
Image source
+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)