[Performance]: Bundle Analysis

[jamessspanggg]

Created a bundle analysis that you can view it here: http://gfg-bundle-analysis.surge.sh/

Can also check in PageSpeed to see our performance with reference to google's benchmarks: https://developers.google.com/speed/pagespeed/insights/?url=https%3A%2F%2Fgiftforgood.io

From the bench mark, we need to:

• reduce unused JS, i.e. the way we import stuffs, whether or not tree shaking is done.
• Preload and optimize large images such as banners
• Layout shift in mobile is not the best, perhaps we need to set widths and heights more explicitly to prevent it from occuring

Potential optimizations (the ones i can think of now):

• remove unused imports (good practice even though tree shaking will not include it)
• enable tree shaking by setting sideEffects: false in package.json
• upgrade all our package versions to experience potential optimizations that may not be done in our current versions
• remove moment ~400kb parsed size lol (can consider date-fns or other more lightweight packages)

resize/optimise images before serving as~100kb image is quite big, can consider https://squoosh.app/

disable react dev tools in production: https://github.com/facebook/react-devtools/issues/191

In some packages, tree shaking is not working as intended even though they are in esm format

We need to change the way we import certain packages, i.e. `@kiwicom` Instead of: Do:

Remove or move certain packages from dependencies -> devdependencies

next-images

@testing-library (technically can remove since we have no tests