Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Reduce minimalistic bundles size #388

Open
Tracked by #1310
fabiospampinato opened this issue Apr 1, 2018 · 13 comments
Open
Tracked by #1310

Reduce minimalistic bundles size #388

fabiospampinato opened this issue Apr 1, 2018 · 13 comments
Milestone

Comments

@fabiospampinato
Copy link

I've made a custom build with the following code:

require ( 'core-js-builder' )({
  modules: ['es6.array.fill']
})

And the resulting build is 5.5kb, that seems excessively large to me.

Isn't there a way to make it smaller?

I would be surprised if a minified polyfill for this required more than 0.2kb, core-js' file is about 30 times larger than that.

@zloirock
Copy link
Owner

zloirock commented Apr 1, 2018

The main problems here: it's maximally strict, it should work everywhere and it contains common export logic. Because it should work everywhere, it should internally implement all of the required logic. The serious part of this logic - ES5 polyfills required for IE8-, for example, Object.defineProperty for method definition or Object.create(null) which required for adding Array.prototype[@@unscopables] object which should contain this method, etc.

Here 3 options how to rework core-js for making minimal bundles smaller:

  • Drop ES3 engines support. Definitely not soon.
  • Loading of required logic to core-js only with related polyfills, so if you don't import 'es6.object.define-property' and some other modules directly, 'es6.array.fill' will not work in IE8-. At this moment, it's not acceptable.
  • Untangle core-js modules, minimize required dependencies. Feel free to add a PR.

@fabiospampinato
Copy link
Author

Thanks for the explanation.

What about adding a targets option to core-js-builder, à la babel-preset-env, so that by doing this:

require ( 'core-js-builder' )({
  modules: ['es6.array.fill'],
  targets: {
    browsers: ['last 2 versions']
  }
});

the builder can automatically avoid to bundle those polyfills for legacy browsers?

@zloirock zloirock changed the title Custom builds are too big Reduce minimalistic bundles size Apr 1, 2018
@zloirock
Copy link
Owner

zloirock commented Apr 1, 2018

Sounds good, but it's too hard. Anyway, need to think about it.

@fabiospampinato
Copy link
Author

I've tried to blacklist es6.object.define-property manually with:

blacklist: ['es6.object.define-property']

but it didn't work, I guess because some other polyfill I'm compiling requires this.

It would be nice if we could enforce this setting, in that case those polyfills that depend on this would just assume it's already available.

@zloirock
Copy link
Owner

zloirock commented Apr 1, 2018

@fabiospampinato it will not work this way. Fundamental features implemented internally and entry points like es6.object.define-property is just a facade.

@thiagodp
Copy link

@zloirock Wouldn't be better separating modules in individual, installable packages such as @core-js/es6-array-fill ? I known that would be a major refactoring, but it could solve most bundle size problems.

@zloirock
Copy link
Owner

@thiagodp it's absolutely not related to this issue and can't help here - for example, es-shims project use what you propose, but susceptible to this problem even more than core-js.

@thiagodp
Copy link

@zloirock The idea adheres to the 3rd option:

Untangle core-js modules, minimize required dependencies.

The involved refactoring would do the job. Separating into individual modules is a way to refactoring them and to pruning unneeded dependencies. Also, people could choose between using specific modules or all of them (i.e., a unified module).

I know that's hard to do now, but the project could benefit from it more than just refactoring the code.

@zloirock
Copy link
Owner

zloirock commented Oct 28, 2020

@thiagodp

Separating into individual modules is a way to refactoring them and to pruning unneeded dependencies.

Sorry, but not in this case. Rather here will be a backward effect - I made many experiments with it.

It will be almost a thousand packages - modules and some thousands of packages - entries for different cases.

Who will add hundreds of polyfill packages to package.json manually? How many users understand what should be added? Almost all will add a package with a collection which will contain almost all of them.

So it will increase not only the bundle size for all users - it will increase the node_modules size for a big part of users - each package has an overhead.

Maybe I'll do it in the future, but for other reasons and not soon.

@thiagodp
Copy link

thiagodp commented Oct 28, 2020

@zloirock Totally agree. I did not know much about the project's specifics. Thanks for sharing.

@zloirock
Copy link
Owner

@thiagodp if you are wondering what this problem looks with the separate packages approach, see es-shims/AggregateError#13

@matzeeable

This comment has been minimized.

@zloirock

This comment has been minimized.

@zloirock zloirock added this to the 4.0 milestone May 29, 2021
@zloirock zloirock mentioned this issue Feb 13, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests

4 participants