Regression from @yandex/controls@0.0.1: significantly larger bundle

[ykropchik]

Hello, Yandex team!

During the migration, I found a few issues that make the new package hard to use in production.

Problems

1. Significant bundle size increase

Here are the measurements I took using the Chrome DevTools Network tab:

• @yandex/controls@0.0.1: ~5 KB
• ymaps3-default-ui-theme: ~140 KB

This is a major regression, especially if you use only one or two UI components from the whole package.

2. All UI components are shipped as a single bundle

Because of this, the bundler cannot tree-shake unused parts

Expected behavior

One of the following should be possible:

• The package size should be much smaller so that using the full bundle does not add a large payload.

or

• The package should allow users to import only the UI components they need, so unused components are left out of the final bundle.

Both approaches would make the package much better suited for real-world production use.

[mi-qacker]

Hello @ykropchik! How do you use the ymaps3-default-ui-theme package? Do you import it via ymaps3.import or install it as an npm package and build the project, for example, using webpack?

[ykropchik]

Hi @mi-qacker, I use it as an npm package and build it with webpack

[mi-qacker]

I use it as an npm package and build it with webpack

Have you tried it in webpack Tree Shaking for unused code?

[ykropchik]

I use it as an npm package and build it with webpack

Have you tried it in webpack Tree Shaking for unused code?

I was unclear in the issue description. After a deeper dive, I think the problem is async import via import(), according to this comment, tree shaking doesn't work with the async import

[ykropchik]

I've also found a magic comment, but it doesn't work in this case for some reason. Webpack removes from the exported object everything that isn't declared in the webpackExports, but the removed exports are still in the bundle.

For example, if you do this import

const controls = await import(/* webpackExports: ["YMapZoomControl", "YMapGeolocationControl"] */'@yandex/ymaps3-default-ui-theme')

The controls object will only contain YMapZoomControl and YMapGeolocationControl, but the bundle doesn't shrink, it still contains other controls.

[ykropchik]

@mi-qacker, are there any updates?

[mi-qacker]

Hi! We've looked at it and decided that we're going to change the this package. Instead of building a single file, we'll be providing the source files so that you can selectively import only the necessary parts of the package.

I'll get to work on this soon.