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

Large bundle for bable typescript preset #9662

Open
tianhuil opened this Issue Mar 12, 2019 · 7 comments

Comments

Projects
None yet
4 participants
@tianhuil
Copy link

tianhuil commented Mar 12, 2019

Bug Report

Current Behavior
Trying babel / typescript / webpack results in 400KB (unzipped) of bundle. Is this typical?

Input Code
See the following repo.

Expected behavior vs actual
The bundle size seems inflated.

Picture

The dynamic webpack bundle visualizer here (warning, the page is a bit slow). For example, the bundle src is 94K but on disk, it's under 19K:

$ find src | xargs cat | wc
// omit errors
     662    1880   18509

Babel Configuration (.babelrc, package.json, cli command)

See package.json (which contains babel configs) and webpack.config.js.

Environment

$ npm version
{ npm: '6.9.0',
  ares: '1.14.0',
  cldr: '33.1',
  http_parser: '2.8.0',
  icu: '62.1',
  modules: '64',
  napi: '3',
  nghttp2: '1.32.0',
  node: '10.9.0',
  openssl: '1.1.0i',
  tz: '2018e',
  unicode: '11.0',
  uv: '1.22.0',
  v8: '6.8.275.24-node.14',
  zlib: '1.2.11' }
  • OS: OSX 10.14.3
  • Using babel through webpack.
@babel-bot

This comment has been minimized.

Copy link
Collaborator

babel-bot commented Mar 12, 2019

Hey @tianhuil! 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.

@nicolo-ribaudo

This comment has been minimized.

Copy link
Member

nicolo-ribaudo commented Mar 12, 2019

I suggest configuring preset-env to only transpiles what you need: https://babeljs.io/docs/en/babel-preset-env#targets

@tianhuil

This comment has been minimized.

Copy link
Author

tianhuil commented Mar 12, 2019

Hi @nicolo-ribaudo: thanks for the quick response. I tried the three examples given (see below) and none of them made more than 1KB of difference (out of over 400KB). Are there any other values for target that I should try?

{
  "targets": "> 0.25%, not dead"
}
{
  "targets": {
    "chrome": "58",
    "ie": "11"
  }
}
{
  "targets": {
    "esmodules": true
  }
}
@danez

This comment has been minimized.

Copy link
Member

danez commented Mar 17, 2019

This has nothing todo with babel. Your dependencies (react, jss, lodash, material-ui) are all just big and the all need to be in the bundle, the src is still around 94k according to your visualizer. Babel plays a very little role in bundle size.

@tianhuil

This comment has been minimized.

Copy link
Author

tianhuil commented Mar 18, 2019

Hi @danez: thanks for your response. Sorry but I have a fundamental conceptual question:

If there's 94K in src that includes dependencies (react, jss, lodash, material-ui), why are there an additional 327K under node_modules for react, lodash, material-ui, etc ...?

If you have an explanation or article explaining what goes into each component, that would be very useful. Pardon my ignorance! See the data here (warning, the page is a bit slow).

@danez

This comment has been minimized.

Copy link
Member

danez commented Mar 19, 2019

In the visualization you see two main folders: src and node_modules

src contains all the files you have put into the src folder. You have about 15 files in src but it says index.ts + 98 modules. So webpack did something called module concatenating, which is basically it inlines other imported modules into your files. In order to see what exactly happens you can enable debug stats for webpack (I did this in this branch (https://github.com/danez/todo-react/tree/debug); simply run npm run build and you will see all modules in your bundle and which ones are concatenated and which ones could not be concatenated)
(If you want to know what module concatenating is, this is a good start: https://medium.com/webpack/brief-introduction-to-scope-hoisting-in-webpack-8435084c171f)

Now looking at the index.ts stats output from webpack we see the following:

index.ts + 98 modules

[371] ./src/index.tsx + 98 modules 242 KiB {0} [built]
      ModuleConcatenation bailout: Cannot concat with ./node_modules/@babel/runtime/helpers/createClass.js (<- Module is not an ECMAScript module)
      ModuleConcatenation bailout: Cannot concat with ./node_modules/@babel/runtime/helpers/extends.js (<- Module is not an ECMAScript module)
      ModuleConcatenation bailout: Cannot concat with ./node_modules/@babel/runtime/helpers/inheritsLoose.js (<- Module is not an ECMAScript module)
      ModuleConcatenation bailout: Cannot concat with ./node_modules/@babel/runtime/helpers/objectWithoutPropertiesLoose.js (<- Module is not an ECMAScript module)
      ModuleConcatenation bailout: Cannot concat with ./node_modules/@material-ui/core/AppBar/index.js (<- Module is not an ECMAScript module)
      ModuleConcatenation bailout: Cannot concat with ./node_modules/@material-ui/core/Checkbox/index.js (<- Module is not an ECMAScript module)
      ModuleConcatenation bailout: Cannot concat with ./node_modules/@material-ui/core/Icon/index.js (<- Module is not an ECMAScript module)
      ModuleConcatenation bailout: Cannot concat with ./node_modules/@material-ui/core/IconButton/index.js (<- Module is not an ECMAScript module)
      ModuleConcatenation bailout: Cannot concat with ./node_modules/@material-ui/core/Input/index.js (<- Module is not an ECMAScript module)
      ModuleConcatenation bailout: Cannot concat with ./node_modules/@material-ui/core/InputBase/index.js (<- Module is not an ECMAScript module)
      ModuleConcatenation bailout: Cannot concat with ./node_modules/@material-ui/core/List/index.js (<- Module is not an ECMAScript module)
      ModuleConcatenation bailout: Cannot concat with ./node_modules/@material-ui/core/ListItem/index.js (<- Module is not an ECMAScript module)
      ModuleConcatenation bailout: Cannot concat with ./node_modules/@material-ui/core/ListItemSecondaryAction/index.js (<- Module is not an ECMAScript module)
      ModuleConcatenation bailout: Cannot concat with ./node_modules/@material-ui/core/ListItemText/index.js (<- Module is not an ECMAScript module)
      ModuleConcatenation bailout: Cannot concat with ./node_modules/@material-ui/core/Paper/index.js (<- Module is not an ECMAScript module)
      ModuleConcatenation bailout: Cannot concat with ./node_modules/@material-ui/core/Toolbar/index.js (<- Module is not an ECMAScript module)
      ModuleConcatenation bailout: Cannot concat with ./node_modules/@material-ui/core/Tooltip/index.js (<- Module is not an ECMAScript module)
      ModuleConcatenation bailout: Cannot concat with ./node_modules/@material-ui/core/Typography/index.js (<- Module is not an ECMAScript module)
      ModuleConcatenation bailout: Cannot concat with ./node_modules/@material-ui/core/styles/colorManipulator.js (<- Module is not an ECMAScript module)
      ModuleConcatenation bailout: Cannot concat with ./node_modules/@material-ui/core/styles/index.js (<- Module is not an ECMAScript module)
      ModuleConcatenation bailout: Cannot concat with ./node_modules/@material-ui/icons/CheckBox.js (<- Module is not an ECMAScript module)
      ModuleConcatenation bailout: Cannot concat with ./node_modules/@material-ui/icons/CheckBoxOutlineBlank.js (<- Module is not an ECMAScript module)
      ModuleConcatenation bailout: Cannot concat with ./node_modules/@material-ui/icons/IndeterminateCheckBox.js (<- Module is not an ECMAScript module)
      ModuleConcatenation bailout: Cannot concat with ./node_modules/@material-ui/icons/Search.js (<- Module is not an ECMAScript module)
      ModuleConcatenation bailout: Cannot concat with ./node_modules/history/node_modules/warning/browser.js (<- Module is not an ECMAScript module)
      ModuleConcatenation bailout: Cannot concat with ./node_modules/invariant/browser.js (<- Module is not an ECMAScript module)
      ModuleConcatenation bailout: Cannot concat with ./node_modules/is-promise/index.js (<- Module is not an ECMAScript module)
      ModuleConcatenation bailout: Cannot concat with ./node_modules/lodash/isEqualWith.js (<- Module is not an ECMAScript module)
      ModuleConcatenation bailout: Cannot concat with ./node_modules/lodash/isFunction.js (<- Module is not an ECMAScript module)
      ModuleConcatenation bailout: Cannot concat with ./node_modules/lodash/mapValues.js (<- Module is not an ECMAScript module)
      ModuleConcatenation bailout: Cannot concat with ./node_modules/lodash/merge.js (<- Module is not an ECMAScript module)
      ModuleConcatenation bailout: Cannot concat with ./node_modules/lodash/toPath.js (<- Module is not an ECMAScript module)
      ModuleConcatenation bailout: Cannot concat with ./node_modules/prop-types/index.js (<- Module is not an ECMAScript module)
      ModuleConcatenation bailout: Cannot concat with ./node_modules/react-dom/index.js (<- Module is not an ECMAScript module)
      ModuleConcatenation bailout: Cannot concat with ./node_modules/react-is/index.js (<- Module is not an ECMAScript module)
      ModuleConcatenation bailout: Cannot concat with ./node_modules/react-lifecycles-compat/react-lifecycles-compat.es.js (<- Module is referenced from these modules with unsupported syntax: ./node_modules/react-transition-group/Transition.js (referenced with cjs require), ./node_modules/react-transition-group/TransitionGroup.js (referenced with cjs require))
      ModuleConcatenation bailout: Cannot concat with ./node_modules/react-redux/node_modules/hoist-non-react-statics/dist/hoist-non-react-statics.cjs.js (<- Module is not an ECMAScript module)
      ModuleConcatenation bailout: Cannot concat with ./node_modules/react-router/node_modules/path-to-regexp/index.js (<- Module is not an ECMAScript module)
      ModuleConcatenation bailout: Cannot concat with ./node_modules/react/index.js (<- Module is not an ECMAScript module)
      ModuleConcatenation bailout: Cannot concat with ./node_modules/redux-devtools-extension/index.js (<- Module is not an ECMAScript module)
      ModuleConcatenation bailout: Cannot concat with ./node_modules/redux-form/es/util/isHotReloading.js (<- Module uses injected variables (module))
      ModuleConcatenation bailout: Cannot concat with ./node_modules/redux-form/node_modules/hoist-non-react-statics/dist/hoist-non-react-statics.cjs.js (<- Module is not an ECMAScript module)
      ModuleConcatenation bailout: Cannot concat with ./node_modules/redux/es/redux.js (<- Module is referenced from these modules with unsupported syntax: ./node_modules/redux-devtools-extension/index.js (referenced with cjs require))
      ModuleConcatenation bailout: Cannot concat with ./node_modules/warning/warning.js (<- Module is not an ECMAScript module)
      | ./src/index.tsx 295 bytes [built]
      |     ModuleConcatenation bailout: Module is referenced from these modules with unsupported syntax: multi ./src/index.tsx ./src/styles/index.scss (referenced with single entry)
      | ./src/components/App.tsx 1.02 KiB [built]
      | ./node_modules/react-redux/es/index.js 270 bytes [built]
      | ./node_modules/connected-react-router/esm/index.js 936 bytes [built]
      | ./src/store/index.ts 854 bytes [built]
      | ./src/components/Header.tsx 2.17 KiB [built]
      | ./src/components/TodoList.tsx 1.65 KiB [built]
      | ./node_modules/react-redux/es/components/Context.js 118 bytes [built]
      | ./node_modules/react-redux/es/components/Provider.js 2.29 KiB [built]
      | ./node_modules/react-redux/es/components/connectAdvanced.js 9 KiB [built]
      | ./node_modules/react-redux/es/connect/connect.js 4.83 KiB [built]
      | ./node_modules/react-router/es/Router.js 3.71 KiB [built]
      | ./node_modules/connected-react-router/esm/actions.js 1.6 KiB [built]
      | ./node_modules/react-router/es/matchPath.js 2 KiB [built]
      | ./node_modules/connected-react-router/esm/selectors.js 2.28 KiB [built]
      | ./node_modules/connected-react-router/esm/ConnectedRouter.js 7.44 KiB [built]
      | ./node_modules/connected-react-router/esm/reducer.js 1.27 KiB [built]
      | ./node_modules/connected-react-router/esm/structure/plain/index.js 989 bytes [built]
      | ./node_modules/react-router/es/Switch.js 3.2 KiB [built]
      | ./node_modules/react-router/es/Route.js 5.75 KiB [built]
      | ./node_modules/history/es/index.js 460 bytes [built]
      | ./node_modules/react-router/es/generatePath.js 979 bytes [built]
      | ./node_modules/react-router/es/Redirect.js 3.8 KiB [built]
      | ./node_modules/connected-react-router/esm/middleware.js 1.34 KiB [built]
      | ./node_modules/redux-thunk/es/index.js 481 bytes [built]
      | ./src/store/utils.ts 270 bytes [built]
      | ./src/store/todos/actions.ts 448 bytes [built]
      | ./src/store/todos/reducers.ts 3 KiB [built]
      | ./src/components/Query.tsx 1.97 KiB [built]
      | ./src/components/StatusButton.tsx 2.17 KiB [built]
      | ./src/connectors/todo.ts 426 bytes [built]
      | ./src/components/AddTodo.tsx 2.69 KiB [built]
      | ./src/components/Todo.tsx 1.82 KiB [built]
      | ./node_modules/@babel/runtime/helpers/esm/inheritsLoose.js 204 bytes [built]
      | ./node_modules/@babel/runtime/helpers/esm/assertThisInitialized.js 192 bytes [built]
      | ./node_modules/@babel/runtime/helpers/esm/extends.js 397 bytes [built]
      | ./node_modules/@babel/runtime/helpers/esm/objectWithoutPropertiesLoose.js 350 bytes [built]
      | ./node_modules/react-redux/es/utils/shallowEqual.js 676 bytes [built]
      | ./node_modules/react-redux/es/connect/mapDispatchToProps.js 915 bytes [built]
      | ./node_modules/react-redux/es/connect/mapStateToProps.js 504 bytes [built]
      | ./node_modules/react-redux/es/connect/mergeProps.js 1.37 KiB [built]
      | ./node_modules/react-redux/es/connect/selectorFactory.js 3.85 KiB [built]
      | ./node_modules/connected-react-router/esm/structure/plain/getIn.js 367 bytes [built]
      | ./node_modules/history/es/PathUtils.js 1.57 KiB [built]
      | ./node_modules/history/es/LocationUtils.js 2.17 KiB [built]
      | ./node_modules/history/es/createBrowserHistory.js 9.01 KiB [built]
      | ./node_modules/history/es/createHashHistory.js 9.16 KiB [built]
      | ./node_modules/history/es/createMemoryHistory.js 5.27 KiB [built]
      | ./node_modules/redux-form/es/actionTypes.js 1.78 KiB [built]
      | ./node_modules/redux-form/es/reducer.js 120 bytes [built]
      | ./src/connectors/filter.ts 1.64 KiB [built]
      | ./node_modules/redux-form/es/Field.js 114 bytes [built]
      | ./node_modules/redux-form/es/actions.js 9.42 KiB [built]
      | ./node_modules/redux-form/es/defaultShouldAsyncValidate.js 705 bytes [built]
      | ./node_modules/redux-form/es/defaultShouldValidate.js 542 bytes [built]
      | ./node_modules/redux-form/es/defaultShouldError.js 533 bytes [built]
      | ./node_modules/redux-form/es/defaultShouldWarn.js 530 bytes [built]
      | ./node_modules/redux-form/es/SubmissionError.js 487 bytes [built]
      | ./node_modules/redux-form/es/reduxForm.js 126 bytes [built]
      | ./node_modules/react-redux/es/utils/verifyPlainObject.js 305 bytes [built]
      | ./node_modules/react-redux/es/connect/wrapMapToProps.js 2.71 KiB [built]
      | ./node_modules/react-redux/es/connect/verifySubselectors.js 764 bytes [built]
      | ./node_modules/resolve-pathname/index.js 1.75 KiB [built]
      | ./node_modules/value-equal/index.js 1.11 KiB [built]
      | ./node_modules/history/es/createTransitionManager.js 2.08 KiB [built]
      | ./node_modules/history/es/DOMUtils.js 2.21 KiB [built]
      | ./node_modules/redux-form/es/structure/plain/index.js 997 bytes [built]
      | ./node_modules/redux-form/es/createReducer.js 25.2 KiB [built]
      | ./node_modules/redux-form/es/util/validateComponentProp.js 347 bytes [built]
      | ./node_modules/redux-form/es/util/prefixName.js 194 bytes [built]
      | ./node_modules/redux-form/es/ReduxFormContext.js 1.34 KiB [built]
      | ./node_modules/redux-form/es/createField.js 4.67 KiB [built]
      | ./node_modules/es6-error/es6/index.js 2.52 KiB [built]
      | ./node_modules/redux-form/es/selectors/isValid.js 1.55 KiB [built]
      | ./node_modules/redux-form/es/createReduxForm.js 38.2 KiB [built]
      | ./node_modules/react-redux/es/utils/isPlainObject.js 476 bytes [built]
      | ./node_modules/react-redux/es/utils/warning.js 640 bytes [built]
      | ./node_modules/redux-form/es/deleteInWithCleanUp.js 1.44 KiB [built]
      | ./node_modules/redux-form/es/structure/plain/splice.js 898 bytes [built]
      | ./node_modules/redux-form/es/structure/plain/getIn.js 370 bytes [built]
      | ./node_modules/redux-form/es/structure/plain/setIn.js 991 bytes [built]
      | ./node_modules/redux-form/es/structure/plain/deepEqual.js 707 bytes [built]
      | ./node_modules/redux-form/es/structure/plain/deleteIn.js 1.85 KiB [built]
      | ./node_modules/redux-form/es/structure/plain/keys.js 211 bytes [built]
      | ./node_modules/redux-form/es/ConnectedField.js 12.1 KiB [built]
      | ./node_modules/redux-form/es/util/shallowCompare.js 799 bytes [built]
      | ./node_modules/redux-form/es/asyncValidation.js 784 bytes [built]
      | ./node_modules/redux-form/es/events/silenceEvent.js 202 bytes [built]
      | ./node_modules/redux-form/es/events/silenceEvents.js 418 bytes [built]
      | ./node_modules/redux-form/es/generateValidator.js 862 bytes [built]
      | ./node_modules/redux-form/es/handleSubmit.js 3.6 KiB [built]
      | ./node_modules/redux-form/es/hasError.js 791 bytes [built]
      | ./node_modules/redux-form/es/util/getDisplayName.js 142 bytes [built]
      | ./node_modules/redux-form/es/createFieldProps.js 3.26 KiB [built]
      | ./node_modules/redux-form/es/events/isEvent.js 152 bytes [built]
      | ./node_modules/redux-form/es/isReactNative.js 174 bytes [built]
      | ./node_modules/redux-form/es/events/onChangeValue.js 514 bytes [built]
      | ./node_modules/redux-form/es/util/eventConsts.js 28 bytes [built]
      | ./node_modules/redux-form/es/events/getValue.js 1.25 KiB [built]

All files listed here without a bailout message are concatenated. As you can see a lot of files from node_modules are already concatenated with index.ts, but a lot of them couldn't be concatenated, because of the reasons you can see in the stats above (ModuleConcatenation bailout: *).

All the files that webpack wasn't able to concatenate end up being included in your bundle as separate modules and this is what you see in the visualizer under the node_modules slice.

So all the files in the bundle are probably necessary in order to run the application. That said there is probably room for improvements, but that's beyond my knowledge and not part of babel in any way.

I hope this clarifies some things.

@tianhuil

This comment has been minimized.

Copy link
Author

tianhuil commented Mar 19, 2019

Thanks @danez: I really appreciate our looking into this and setting up the extra branch. The explanation was very helpful. It looks like some of the dependencies could be inlined (or concatenated) and some could not be. Just to make sure I understand, it sounds like concatenation doesn't matter for the total bundle size as it's either in the src section or the node_modules section but either way, it's going to be there. Am I right?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.