Skip to content
This repository has been archived by the owner on Oct 5, 2022. It is now read-only.

Big bundle size due to core-js #33

Closed
2-5 opened this issue Sep 28, 2019 · 6 comments
Closed

Big bundle size due to core-js #33

2-5 opened this issue Sep 28, 2019 · 6 comments
Labels
dependencies Pull requests that update a dependency file

Comments

@2-5
Copy link

2-5 commented Sep 28, 2019

Using vue-context increases bundle size by 41 KB (gzipped). It seems tree-shaking is not working properly, and the whole core-js in bundled in, not just the two functions used.

@rawilk rawilk added the dependencies Pull requests that update a dependency file label Oct 12, 2019
@rawilk
Copy link
Owner

rawilk commented Oct 12, 2019

That makes sense, I'll be updating the menu later and this dependency will be removed in favor of local polyfills.

@rawilk rawilk closed this as completed in e900072 Oct 12, 2019
@2-5
Copy link
Author

2-5 commented Oct 12, 2019

The problem is not fixed, the bundle size is still 36 KB (gzipped).

2019-10-12_134509

Looking more carefully inside vue-context/dist/js/vue-context.js, I can see that it has the Vue runtime in there.

@rawilk
Copy link
Owner

rawilk commented Oct 12, 2019

To be honest, I'm really not worried about a 36 KB size.

@tripflex
Copy link

tripflex commented Oct 23, 2019

@rawilk why i def appreciate you releasing this library, that's 36KB gzip minified (which not everything supports gzip) -- so minified is around 101kb in size:
https://bundlephobia.com/result?p=vue-context@4.1.1

While I understand you may not be worried about it, there may be others who do (just wanted to mention that).

For those that do, my recommendation would be to use webpack chunking/code-splitting to only load it when needed (async):
https://webpack.js.org/guides/code-splitting/

@2-5

Unfortunately because this lib does not just export VueContext as default, you have to do it like this:

components: {
  VueContext: async () => {
    const instance = await import( /* webpackChunkName: "vue-context" */  'vue-context' )
    return instance.VueContext
  }
},

When any other lib that exports as default, could just be like this:

SomeLibComponent: () => import( /* webpackChunkName: "some-lib-component" */  'some-lib-component' ),

If you're not familiar with code splitting yet, i strongly recommend reading and learning more about it, as this will allow you to keep bundle size small and async load resources as they are needed (to not cause delay on initial page load)

Now that 4.1+ doesn't include the CSS i'm going to have to figure out how to deal with this as well :-\

Good resource:
https://github.com/iamakulov/awesome-webpack-perf

@tripflex
Copy link

tripflex commented Oct 23, 2019

I'm still trying to figure out why the dist version of this lib is 100kb+, but when i build it from source, it's only around ~17kb ... so i would say if anything, import the source into your own project if you have all the webpack handling setup -- my guess is there's a lot of bloat in the released dist version

@rawilk
Copy link
Owner

rawilk commented Nov 14, 2019

@tripflex Good point. I think I'm not going to build it anymore and leave that part of it to you instead. I think that should help sizes.

Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
dependencies Pull requests that update a dependency file
Projects
None yet
Development

No branches or pull requests

3 participants