search

azavea / ism-watershed-wellness-snapshot

A tool to collect and display watershed wellness indicators for the International Seaport Museum
1 stars 2 forks source link

Add bundle analyzer #49

Closed caseycesari closed 5 years ago

caseycesari commented 5 years ago

Overview

This tool will help us find sources of bloat in the app bundles.

Connects #36

Demo

Main bundle image

Vendor bundle image

Testing Instructions

kellyi commented 5 years ago

Consider creating ./scripts/analyze which would run the command on the main bundle by default and on vendor if the --vendor parameter was supplied.

kellyi commented 5 years ago

:+1: I tried out ./scripts/analyze in the VM and this is the output:

vagrant@vagrant:/vagrant$ ./scripts/analyze
yarn run v1.13.0
$ source-map-explorer ${FORMAT:-} build/static/js/${BUNDLE_NAME:-main}.*
Unable to map 350 / 7298 bytes (4.80%)
{
  "map.actions.js": 73,
  "SensorMarker.js": 719,
  "map.reducers.js": 260,
  "BackToMapButton.js": 318,
  "Header.js": 562,
  "Footer.js": 566,
  "Map.js": 1632,
  "app.actions.js": 46,
  "Intro.js": 663,
  "App.js": 451,
  "serviceWorker.js": 307,
  "app.reducers.js": 128,
  "reducers.js": 29,
  "store.js": 36,
  "index.js": 244,
  "img/de_river_basin.svg": 77,
  "img/fish_marker_icon.svg": 79,
  "img/feed.svg": 758,
  "<unmapped>": 350
}
Done in 0.32s.
vagrant@vagrant:/vagrant$ ./scripts/analyze --vendor                                                                                                                                                                                   
yarn run v1.13.0                                                                                                                                                                                                                       
$ source-map-explorer ${FORMAT:-} build/static/js/${BUNDLE_NAME:-main}.*                                                                                                                                                               
Unable to map 117 / 999982 bytes (0.01%)                               
{
  "prop-types/index.js": 48,
  "react/index.js": 46,
  "@babel/runtime/helpers/esm/assertThisInitialized.js": 185,
  "@babel/runtime/helpers/esm/defineProperty.js": 182,
  "@babel/runtime/helpers/esm/createClass.js": 285,
  "@babel/runtime/helpers/esm/classCallCheck.js": 156,
  "history/node_modules/warning/browser.js": 53,
  "invariant/browser.js": 374,
  "redux-act/lib/index.js": 1216,
  "babel-preset-react-app/node_modules/@babel/runtime/helpers/esm/classCallCheck.js": 156,
  "babel-preset-react-app/node_modules/@babel/runtime/helpers/esm/createClass.js": 285,
  "babel-preset-react-app/node_modules/@babel/runtime/helpers/esm/getPrototypeOf.js": 191,
  "babel-preset-react-app/node_modules/@babel/runtime/helpers/esm/typeof.js": 452,
  "babel-preset-react-app/node_modules/@babel/runtime/helpers/esm/possibleConstructorReturn.js": 133,
  "babel-preset-react-app/node_modules/@babel/runtime/helpers/esm/assertThisInitialized.js": 121,
  "babel-preset-react-app/node_modules/@babel/runtime/helpers/esm/setPrototypeOf.js": 92,
  "babel-preset-react-app/node_modules/@babel/runtime/helpers/esm/inherits.js": 291,
  "warning/warning.js": 62,
  "react-map-gl/dist/esm/utils/globals.js": 245,
  "redux/es/redux.js": 6157,
  "mjolnir.js/dist/esm/utils/globals.js": 441,
  "webpack/buildin/global.js": 175,
  "babel-preset-react-app/node_modules/@babel/runtime/helpers/esm/defineProperty.js": 182,
  "@babel/runtime/helpers/esm/inheritsLoose.js": 131,
  "react-redux/es/components/Context.js": 26,
  "react-redux/es/components/Provider.js": 1018,
  "@babel/runtime/helpers/esm/extends.js": 207,
  "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose.js": 177,
  "react-redux/es/components/connectAdvanced.js": 2821,
  "react-redux/es/utils/shallowEqual.js": 379,
  "react-redux/es/connect/wrapMapToProps.js": 552,
  "react-redux/es/connect/mapDispatchToProps.js": 215,
  "react-redux/es/connect/mapStateToProps.js": 114,
  "react-redux/es/connect/mergeProps.js": 317,
  "react-redux/es/connect/selectorFactory.js": 735,
  "react-redux/es/connect/connect.js": 1187,
  "react-redux/es/index.js": 105,
  "@babel/runtime/helpers/esm/typeof.js": 463,
  "@babel/runtime/helpers/esm/possibleConstructorReturn.js": 82,
  "@babel/runtime/helpers/esm/getPrototypeOf.js": 140,
  "@babel/runtime/helpers/esm/setPrototypeOf.js": 92,
  "@babel/runtime/helpers/esm/inherits.js": 263,
  "react-map-gl/dist/esm/utils/style-utils.js": 651,
  "@babel/runtime/helpers/esm/slicedToArray.js": 38,
  "@babel/runtime/helpers/esm/arrayWithHoles.js": 41,
  "@babel/runtime/helpers/esm/iterableToArrayLimit.js": 236,
  "@babel/runtime/helpers/esm/nonIterableRest.js": 87,
  "viewport-mercator-project/node_modules/gl-matrix/esm/common.js": 87,
  "viewport-mercator-project/node_modules/gl-matrix/esm/vec4.js": 360,
  "viewport-mercator-project/dist/esm/math-utils.js": 273,
  "viewport-mercator-project/node_modules/gl-matrix/esm/mat4.js": 3974,
  "viewport-mercator-project/node_modules/gl-matrix/esm/vec2.js": 433,
  "viewport-mercator-project/node_modules/gl-matrix/esm/vec3.js": 140,
  "viewport-mercator-project/dist/esm/assert.js": 84,
  "viewport-mercator-project/dist/esm/web-mercator-utils.js": 2024,
  "viewport-mercator-project/dist/esm/viewport.js": 2277,
  "viewport-mercator-project/dist/esm/web-mercator-viewport.js": 1752,
  "viewport-mercator-project/dist/esm/fit-bounds.js": 776,
  "viewport-mercator-project/dist/esm/normalize-viewport-props.js": 604,
  "react-map-gl/dist/esm/utils/math-utils.js": 384,
  "react-map-gl/dist/esm/utils/assert.js": 77,
  "react-map-gl/dist/esm/utils/transition/transition-interpolator.js": 557,
  "viewport-mercator-project/dist/esm/fly-to-viewport.js": 685,
  "react-map-gl/dist/esm/utils/transition/transition-utils.js": 189,
  "react-map-gl/dist/esm/utils/transition/viewport-fly-to-interpolator.js": 843,
  "react-map-gl/dist/esm/utils/transition/linear-interpolator.js": 1379,
  "react-map-gl/dist/esm/utils/map-state.js": 4493,
  "react-map-gl/dist/esm/components/static-map.js": 4575,
  "react-map-gl/dist/esm/utils/map-constraints.js": 233,
  "react-map-gl/dist/esm/utils/transition-manager.js": 3619,
  "mjolnir.js/dist/esm/utils/hammer-overrides.js": 557,
  "mjolnir.js/dist/esm/utils/hammer.browser.js": 99,
  "mjolnir.js/dist/esm/constants.js": 1278,
  "mjolnir.js/dist/esm/inputs/wheel-input.js": 1159,
  "mjolnir.js/dist/esm/inputs/move-input.js": 1882,
  "mjolnir.js/dist/esm/inputs/key-input.js": 1105,
  "mjolnir.js/dist/esm/inputs/contextmenu-input.js": 675,
  "mjolnir.js/dist/esm/utils/event-utils.js": 771,
  "mjolnir.js/dist/esm/utils/event-registrar.js": 1379,
  "mjolnir.js/dist/esm/event-manager.js": 3250,
  "mjolnir.js/dist/esm/utils/hammer-manager-mock.js": 128,
  "react-map-gl/dist/esm/utils/map-controller.js": 6805,
  "react-map-gl/dist/esm/utils/deprecate-warn.js": 569,
  "react-map-gl/dist/esm/components/interactive-map.js": 6824,
  "react-map-gl/dist/esm/components/base-control.js": 1937,
  "@babel/runtime/helpers/esm/get.js": 208,
  "@babel/runtime/helpers/esm/superPropBase.js": 90,
  "react-map-gl/dist/esm/components/draggable-control.js": 2411,
  "react-map-gl/dist/esm/components/marker.js": 1013,
  "react-map-gl/dist/esm/utils/dynamic-position.js": 625,
  "react-map-gl/dist/esm/components/popup.js": 2723,
  "react-map-gl/dist/esm/components/navigation-control.js": 1897,
  "react-map-gl/dist/esm/overlays/canvas-overlay.js": 1085,
  "react-map-gl/dist/esm/overlays/html-overlay.js": 716,
  "react-map-gl/dist/esm/overlays/svg-overlay.js": 715,
  "react-map-gl/dist/esm/index.js": 163,
  "redux-act/lib/batch.js": 275,
  "core-js/library/modules/_core.js": 81,
  "core-js/library/modules/_descriptors.js": 129,
  "redux-map-gl/dist/index.js": 305,
  "immutability-helper/index.js": 3679,
  "react-map-gl/dist/esm/mapbox/mapbox.js": 5598,
  "core-js/library/modules/_global.js": 187,
  "core-js/library/modules/_is-object.js": 95,
  "core-js/library/modules/_fails.js": 88,
  "hoist-non-react-statics/dist/hoist-non-react-statics.cjs.js": 978,
  "symbol-observable/es/index.js": 208,
  "object-assign/index.js": 946,
  "redux-act/lib/createAction.js": 1414,
  "redux-act/lib/types.js": 485,
  "react-is/index.js": 33,
  "mapbox-gl/dist/mapbox-gl.js": 655949,
  "core-js/library/modules/_export.js": 752,
  "core-js/library/modules/_object-dp.js": 275,
  "core-js/library/modules/_has.js": 85,
  "core-js/library/modules/_to-iobject.js": 75,
  "core-js/library/modules/_iobject.js": 137,
  "core-js/library/modules/_defined.js": 104,
  "core-js/library/modules/_to-integer.js": 116,
  "redux-map-gl/dist/types.js": 130,
  "react-dom/index.js": 252,
  "symbol-observable/es/ponyfill.js": 204,
  "react-virtualized-auto-sizer/dist/index.esm.js": 6577,
  "babel-preset-react-app/node_modules/@babel/runtime/helpers/esm/objectSpread.js": 414,
  "redux-thunk/es/index.js": 201,
  "path-to-regexp/index.js": 3166,
  "react/cjs/react.production.min.js": 5899,
  "react-dom/cjs/react-dom.production.min.js": 98797,
  "scheduler/index.js": 47,
  "scheduler/cjs/scheduler.production.min.js": 4462,
  "redux-act/lib/createReducer.js": 1170,
  "redux-act/lib/assignAll.js": 542,
  "redux-act/lib/bindAll.js": 538,
  "redux-act/lib/disbatch.js": 856,
  "redux-act/lib/loggers/index.js": 270,
  "redux-act/lib/loggers/reduxLogger.js": 590,
  "redux-act/lib/asError.js": 399,
  "prop-types/factoryWithThrowingShims.js": 583,
  "prop-types/lib/ReactPropTypesSecret.js": 87,
  "react-is/cjs/react-is.production.min.js": 1911,
  "webpack/buildin/harmony-module.js": 345,
  "process/browser.js": 1679,
  "hammerjs/hammer.js": 20362,
  "redux-map-gl/dist/reducer.js": 800,
  "babel-runtime/helpers/defineProperty.js": 204,
  "babel-runtime/core-js/object/define-property.js": 57,
  "core-js/library/fn/object/define-property.js": 100,
  "core-js/library/modules/es6.object.define-property.js": 81,
  "core-js/library/modules/_ctx.js": 289,
  "core-js/library/modules/_a-function.js": 114,
  "core-js/library/modules/_hide.js": 126,
  "core-js/library/modules/_an-object.js": 110,
  "core-js/library/modules/_ie8-dom-define.js": 134,
  "core-js/library/modules/_dom-create.js": 127,
  "core-js/library/modules/_to-primitive.js": 329,
  "core-js/library/modules/_property-desc.js": 125,
  "babel-runtime/helpers/extends.js": 251,
  "babel-runtime/core-js/object/assign.js": 57,
  "core-js/library/fn/object/assign.js": 53,
  "core-js/library/modules/es6.object.assign.js": 77,
  "core-js/library/modules/_object-assign.js": 456,
  "core-js/library/modules/_object-keys.js": 88,
  "core-js/library/modules/_object-keys-internal.js": 213,
  "core-js/library/modules/_cof.js": 87,
  "core-js/library/modules/_array-includes.js": 249,
  "core-js/library/modules/_to-length.js": 101,
  "core-js/library/modules/_to-absolute-index.js": 109,
  "core-js/library/modules/_shared-key.js": 95,
  "core-js/library/modules/_shared.js": 275,
  "core-js/library/modules/_library.js": 28,
  "core-js/library/modules/_uid.js": 128,
  "core-js/library/modules/_enum-bug-keys.js": 132,
  "core-js/library/modules/_object-gops.js": 48,
  "core-js/library/modules/_object-pie.js": 45,
  "core-js/library/modules/_to-object.js": 72,
  "immutable/dist/immutable.js": 56639,
  "redux-map-gl/dist/actions.js": 207,
  "redux-logger/dist/redux-logger.js": 10331,
  "path-to-regexp/node_modules/isarray/index.js": 213,
  "resolve-pathname/index.js": 655,
  "value-equal/index.js": 48,
  "history/es/PathUtils.js": 599,
  "history/es/LocationUtils.js": 803,
  "history/es/createTransitionManager.js": 713,
  "history/es/DOMUtils.js": 707,
  "history/es/createBrowserHistory.js": 3392,
  "react-router/es/Router.js": 1977,
  "history/es/createHashHistory.js": 14,
  "history/es/createMemoryHistory.js": 58,
  "react-router-dom/es/Router.js": 2,
  "react-router-dom/es/BrowserRouter.js": 1366,
  "react-router/es/matchPath.js": 645,
  "react-router/es/Route.js": 3364,
  "react-router-dom/es/Route.js": 10,
  "<unmapped>": 117
}
Done in 3.95s.
caseycesari commented 5 years ago

Thanks for the review and suggestion!