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

Increased bundle size after upgrading past 7.6 #11013

Open
Kadrian opened this issue Jan 15, 2020 · 8 comments
Open

Increased bundle size after upgrading past 7.6 #11013

Kadrian opened this issue Jan 15, 2020 · 8 comments
Labels

Comments

@Kadrian
Copy link

@Kadrian Kadrian commented Jan 15, 2020

v7 Regression

Potential Commit/PR that introduced the regression
#10161

Description
When we recently upgraded from 7.5 to 7.8 we experienced a bundle size increase from ~3,4 MB to 3.5 MB minified (+90 KB difference)

When we checked the bundle diff, we found that a function _getRequireWildcardCache is being re-defined for every module in our application and adds quite a bunch of code in total.

Searching for the function, we found that it's a new feature in babel 7.6. Here's a blog post where @ifsnow , who built this feature explains it nicely: https://www.notion.so/Improving-Babel-Import-performance-makes-React-Native-faster-4ab20915a599481ab8fbb4993db38709 (thanks for the explanation by the way)

But what we find now is that besides the performance improvement we're hoping to get, we're seeing this regression in bundle size.

Is that to be expected? Is it possible to opt-out of this optimization?

@babel-bot

This comment has been minimized.

Copy link
Collaborator

@babel-bot babel-bot commented Jan 15, 2020

Hey @Kadrian! We really appreciate you taking the time to report an issue. The collaborators on this project attempt to help as many people as possible, but we're a limited number of volunteers, so it's possible this won't be addressed swiftly.

If you need any help, or just have general Babel or JavaScript questions, we have a vibrant Slack community that typically always has someone willing to help. You can sign-up here for an invite."

@JLHwung

This comment has been minimized.

Copy link
Contributor

@JLHwung JLHwung commented Jan 15, 2020

we found that a function _getRequireWildcardCache is being re-defined for every module in our application and adds quite a bunch of code in total.

Could you share how your app is bundled? If it is bundled by webpack, you should use @babel/plugin-transform-runtime to replace the injected helper codes

var _interopRequireWildcard  = ...

by runtime imports

var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard")
@nicolo-ribaudo

This comment has been minimized.

Copy link
Member

@nicolo-ribaudo nicolo-ribaudo commented Jan 15, 2020

If you are already using @babel/plugin-transform-runtime, this is probably what is happening: the helper has been updated, so Babel must inline it to ensure that you are using the new version (just in case your @babel/runtime is old). You can prevent this by passing a "version": "^7.6.0" (or whatever you are using) to tell "Hey Babel, I'm already using a version which includes the new feature. You don't need to inline it!".

@Kadrian

This comment has been minimized.

Copy link
Author

@Kadrian Kadrian commented Jan 15, 2020

Thank you for the hints! That already helped. So we're using the parcel bundler and we didn't use @babel/plugin-transform-runtime before. Now after adding the plugin, the bundle size decreased considerably, but checking the bundle: the _getRequireWildcardCache is still being redefined. We've also been using corejs-2. So after adding @babel/runtime-corejs2 and including these parameters

[
  '@babel/plugin-transform-runtime',
  {
    version: '^7.8.0',
    corejs: 2,
  },
],

we're seeing a slight bundle size increase again, and the _getRequireWildcardCache still being redefined / or "inlined" as you call it

@nicolo-ribaudo

This comment has been minimized.

Copy link
Member

@nicolo-ribaudo nicolo-ribaudo commented Jan 16, 2020

If you are also using preset-env, I suggest using it's useBuiltIns: usage option rather than plugin-transform-runtime's corejs. This is because preset-env only includes polyfills for your target environments, while transform-runtime polyfills everything.

@JLHwung

This comment has been minimized.

Copy link
Contributor

@JLHwung JLHwung commented Jan 16, 2020

the _getRequireWildcardCache is still being redefined.

Could you see where these codes comes from? It is likely that they may come from the node_modules because some library use babel to transpile itself before publishing.

@Kadrian

This comment has been minimized.

Copy link
Author

@Kadrian Kadrian commented Jan 16, 2020

Hmm, that's a good idea, but the code seems to be injected between our own modules / files. It's around ~330 duplicate function definitions, which could about match our number of own files that make up our bundle.

After monkey patching the cache.get method, we realized that the cache is never even called, probably because all of our modules are esmodules, and the cache is only accessed for non-es-modules.

@nicolo-ribaudo

This comment has been minimized.

Copy link
Member

@nicolo-ribaudo nicolo-ribaudo commented Jan 16, 2020

Could you share your full config, and the config of the tool you are using to run Babel (if any)?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Linked pull requests

Successfully merging a pull request may close this issue.

None yet
4 participants
You can’t perform that action at this time.