fix: reduce bundle size

[merceyz]

What's the problem this PR addresses?

vue-tel-input is bundling its dependencies. Specifically core-js and @babel/runtime which causes a lot of duplicated code in applications

How did you fix it?

Updated the @vue dependencies to get an up-to-date babel preset and stopped resolving dependencies for the esm build

Sizes

All results are minimized with terser, in my application these changes reduced my bundle size by 51.2kB.

state	ESM	min	UMD
original	425.038 kB	425.999 kB	426.285 kB
With production flag	395.740 kB	395.707 kB	395.987 kB
With external dependencies and production flag	136.419 kB	395.707 kB	395.987 kB

[iamstevendao]

@merceyz Thanks for your help! I have one question tho, does it need @babel/runtime and core-js in dependencies?

[merceyz]

Yes it does, they're no longer bundled by rollup which means we need to declare them.

[merceyz]

Ping @iamstevendao

[iamstevendao]

@merceyz @tatthien Sorry, I'm no expert in this bundling process so I hesitate to merge your PR. I followed the configuration of Akryum in https://github.com/Akryum/v-tooltip, not sure if I missed something, what do you think?
Can you provide some comparison of the build between the current build and your PR, please?

[merceyz]

That's fine, neither am I but I'll try to explain.

I followed the configuration of Akryum in https://github.com/Akryum/v-tooltip, not sure if I missed something, what do you think?

That project also bundles @babel/runtime, so if I were to use vue-tel-input and v-tooltip in my project I would get multiple versions of the same code causing my bundle to get larger than it needs to be.

If you look at https://github.com/Akryum/v-tooltip/blob/782c86f81d529a705bf566825457cf97748ca0b8/dist/v-tooltip.esm.js#L69-L87 and https://github.com/EducationLink/vue-tel-input/blob/50398393251bd7b9a5a3284eb2dfe733c7958971/dist/vue-tel-input.esm.js#L3379

You'll see that they are more or less identical, so including them multiple times is a waste of space. The changes in this PR makes it add an import to @babel/runtime/helpers/esm/objectSpread2 instead so that bundlers will only include that code once.

It does the same for core-js and awesome-phonenumber to prevent them from getting duplicated if they are used elsewhere.

Can you provide some comparison of the build between the current build and your PR, please?

If you build with this PR locally you'll see it now imports code from @babel/runtime, core-js, and awesome-phonenumber instead of including their source code.

[merceyz]

So set NODE_ENV=production included a space in the value so the build wasn't actually a production build. I fixed that by using cross-env which saves an additional 29kB from the esm build.

[iamstevendao]

@merceyz Thanks for your help! Let me do some research on this and get back to you.

[idir]

Thank you @merceyz. Indeed the build is too large (>400 kB).

I was thinking about reducing bundle size by removing list of countries in case we have already one internally that is compatible with the component. This can avoid loading it twice...

Hello @iamstevendao, any feedback to provide us ?

Thanks

[merceyz]

I was thinking about reducing bundle size by removing list of countries in case we have already one internally that is compatible with the component. This can avoid loading it twice...

It's easier for vue-tel-input to export its list so you can use that instead

[idir]

I did some test with the new reduced build. No issue on my side. 👍

[iamstevendao]

Thanks guys, it's now on v4.4.0

[idir]

Nice!

[thexeos]

I am looking at node_modules\vue-tel-input\dist\vue-tel-input.umd.js and I still see inlined code from core-js and libphonenumber-js. Can the bundle size be reduced any further?

For example, libphonenumber-js is included in our webpack bundle as a standalone dependency, so all functions that were inlined in UMD are already available in the vendor bundle, and so they are present there twice.

[thexeos]

Here is an example of a bundle that we get right now for phone number entry:

The combined gzipped size is 111.53KB. There are also 33KB of gzipped core-js included in vendor bundle, but that only partially overlaps with inlined vue-tel-input ESM bundle dependencies.

If src folder was exposed to NPM, then webpack could get rid of all the duplicate dependencies.