search

vuestorefront / vue-storefront

Alokai is a Frontend as a Service solution that simplifies composable commerce. It connects all the technologies needed to build and deploy fast & scalable ecommerce frontends. It guides merchants to deliver exceptional customer experiences quickly and easily.
https://www.alokai.com
MIT License
10.64k stars 2.08k forks source link

Optimize the bundle size #2232

Closed pkarw closed 4 years ago

pkarw commented 5 years ago

What is the motivation for adding / enhancing this feature?

This is an open task. Each lib removed/replaced to make the overall bundle size smaller - is a win in here :)

pkarw commented 5 years ago

I'd like us to focus on this task. My ideas of simple ways to optimize the bundle size:

  1. Disable non-used modules
    • src/amp-renderer
    • src/google-tag-manager
    • src/hotjar
    • src/google-analytics
    • core/offline-order (+ remove all dependencies + move all offline orders logick into this module prior to disabling it :) )
  2. Remove localForage - we're now using only LocalStorage and it's pretty limited usage. The storage.ts is a good place to start - it's a proxy over localForage. We can change the proxied calls from localForage.setItem to localStorage.setItem etc. -> https://bundlephobia.com/result?p=localforage@1.7.3
  3. Remove apollo-client references when project is not using graphQL driver (config.server.api != graphql) - it should be somehow done dynamically or simply separate all the logick of apollo to another core/module to not let webpack to include apollo https://bundlephobia.com/result?p=apollo-client@2.6.4, https://bundlephobia.com/result?p=vue-apollo@3.0.0, https://bundlephobia.com/result?p=graphql@14.5.8
  4. Remove bodybuilder by moving the query language to vue-storefront-api - https://github.com/DivanteLtd/vue-storefront/issues/2167
  5. Scan the bundle with https://bundlephobia.com/ or webpack-bundle-analyzer
  6. Remove vue-carousel - https://bundlephobia.com/result?p=vue-carousel@0.18.0
  7. Remove all unused imports
pkarw commented 5 years ago

https://www.dropbox.com/s/lktr1cttl2gojwo/Screenshot%202019-10-24%2010.58.53.png

The src/modules it's really huge - it's not worth the size: https://github.com

Bundle overview: https://www.dropbox.com/s/yn761a68sncvlqn/Screenshot%202019-10-24%2010.57.48.png

pkarw commented 5 years ago

Screenshot 2019-10-24 11 04 02

pkarw commented 5 years ago

bodybuilder+graphql = 500kB

pkarw commented 4 years ago

[x] graphql is already loaded dynamically

pkarw commented 4 years ago

[x] bodybuilder has been removed as a part of #2167

gibkigonzo commented 4 years ago

WIP - Remove localForage I will try to move it to separate package and remove all timeouts from storage.ts