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

Investigated on bundle sizes( too high) and memory usage during build #4297

Closed
2 tasks
offtherailz opened this issue Oct 4, 2019 · 8 comments
Closed
2 tasks

Comments

@offtherailz
Copy link
Member

offtherailz commented Oct 4, 2019

We should investigate and propose solutions to:

  • reduce bundle size
  • reduce memory usage during prod build
@MV88
Copy link
Contributor

MV88 commented Oct 4, 2019

  1. What about lodash-webpack-plugin for using only needed stuff? Maybe something can be found here

  2. What about tree-shaking for production by using modules:false for babel.config.js? see here and this example

  3. Alternatively we can check which files have side effects and specify them in the webpack configuration with sideEffects: ["path/fileWithSideEffect.js"]

@MV88
Copy link
Contributor

MV88 commented Oct 15, 2019

@offtherailz you were talking about https://www.npmjs.com/package/babel-plugin-lodash

but maybe we can generalize it with https://www.npmjs.com/package/babel-plugin-import

@mbarto
Copy link
Contributor

mbarto commented Oct 16, 2019

I would First do an ordered list of libraries by size. Then evaluate effort to remove for the Firsts in list. I would start removing the ones on top with the less effort to remove.
Repeat

@MV88
Copy link
Contributor

MV88 commented Oct 16, 2019

Here reporting the npm run analyze with examples

npm run analyze

> mapstore2@0.1.0 analyze C:\Work\Projects\MapStore2
> npm run clean && mkdirp ./web/client/dist && webpack --json --config build/prod-webpack.config.js | webpack-bundle-size-analyzer


> mapstore2@0.1.0 clean C:\Work\Projects\MapStore2
> rimraf ./web/client/dist

(node:24844) DeprecationWarning: Tapable.plugin is deprecated. Use new API on `.hooks` instead
(node:24844) DeprecationWarning: loaderUtils.parseQuery() received a non-string value which can be problematic, see https://github.com/webpack/loader-utils/issues/56
parseQuery() will be replaced with getOptions() in the next major version of loader-utils.
ogc-schemas: 4.21 MB (11.0%)
pdfjs-dist: 2.25 MB (5.92%)
ol: 2.13 MB (5.59%)
ag-grid-community: 1.87 MB (4.92%)       
babel-standalone: 1.68 MB (4.42%)        
lodash: 825.93 KB (2.12%)
react-data-grid-addons: 781.68 KB (2.00%)
recharts: 748.1 KB (1.92%)
  core-js: 13.2 KB (1.76%)
  prop-types: 3.04 KB (0.406%)
  <self>: 731.86 KB (97.8%)
rxjs: 643.01 KB (1.65%)
draft-js: 617.43 KB (1.58%)
  immutable: 139.19 KB (22.5%)
  fbjs: 80.12 KB (13.0%)
  <self>: 398.12 KB (64.5%)
moment: 501.5 KB (1.29%)
codemirror: 497.75 KB (1.28%)
@turf: 458.65 KB (1.18%)
jsts: 436.61 KB (1.12%)
quill: 427.05 KB (1.10%)
intl: 412.44 KB (1.06%)
less: 372.78 KB (0.956%)
vis: 371.66 KB (0.953%)
react-bootstrap: 360.39 KB (0.924%)
  react-overlays: 73.23 KB (20.3%)
  <self>: 287.16 KB (79.7%)
react-data-grid: 340.88 KB (0.874%)
react-widgets: 302.54 KB (0.776%)
  dom-helpers: 12.98 KB (4.29%)
  warning: 1.76 KB (0.583%)
  <self>: 287.79 KB (95.1%)
react-draft-wysiwyg: 274.65 KB (0.704%)
core-js: 267.99 KB (0.687%)
w3c-schemas: 256.76 KB (0.659%)
css-tree: 253.72 KB (0.651%)
geostyler-sld-parser: 229.76 KB (0.589%)
  xmlbuilder: 78.77 KB (34.3%)
  lodash: 52.07 KB (22.7%)
  xml2js: 19.74 KB (8.59%)
  <self>: 79.18 KB (34.5%)
pako: 214.25 KB (0.550%)
@boundlessgeo: 199.93 KB (0.513%)
proj4: 181.9 KB (0.467%)
sockjs-client: 180.49 KB (0.463%)
bluebird: 174.97 KB (0.449%)
react-color: 160.63 KB (0.412%)
immutable: 151.73 KB (0.389%)
react-dom: 149.55 KB (0.384%)
react-grid-layout: 149.15 KB (0.383%)
  react-draggable: 74.93 KB (50.2%)
  <self>: 74.21 KB (49.8%)
jszip: 140.69 KB (0.361%)
  core-js: 9.31 KB (6.62%)
  <self>: 131.38 KB (93.4%)
html2canvas: 123.91 KB (0.318%)
react-pdf: 108.54 KB (0.278%)
shpjs: 105.41 KB (0.270%)
  jszip: 93.36 KB (88.6%)
  <self>: 12.05 KB (11.4%)
canvg-browser: 100.3 KB (0.257%)
text-encoding-polyfill: 99.25 KB (0.255%)
react-selectize: 99.04 KB (0.254%)
react-overlays: 95.42 KB (0.245%)
  classnames: 1.17 KB (1.23%)
  <self>: 94.25 KB (98.8%)
source-map: 94.56 KB (0.243%)
react-image-lightbox: 94.12 KB (0.241%)
react-intl: 94.08 KB (0.241%)
react-resizable: 92.14 KB (0.236%)
  react-draggable: 75.06 KB (81.5%)
  <self>: 17.08 KB (18.5%)
react-joyride: 92.02 KB (0.236%)
react-select: 91.69 KB (0.235%)
@terrestris\base-util: 86.43 KB (0.222%)
  lodash: 69.99 KB (81.0%)
  url-parse: 11.9 KB (13.8%)
  query-string: 4.55 KB (5.26%)
  <self>: 0 B (0.00%)
react-draggable: 86.42 KB (0.222%)
@terrestris\ol-util: 86.14 KB (0.221%)
  lodash: 86.14 KB (100%)
  <self>: 0 B (0.00%)
popper.js: 86 KB (0.221%)
geostyler-openlayers-parser: 79.19 KB (0.203%)
  lodash: 30.93 KB (39.1%)
  <self>: 48.26 KB (60.9%)
chroma-js: 76 KB (0.195%)
react-smooth: 68.97 KB (0.177%)
  react-transition-group: 26.01 KB (37.7%)
  <self>: 42.96 KB (62.3%)
leaflet-draw: 65.98 KB (0.169%)
react-dnd: 61.5 KB (0.158%)
  hoist-non-react-statics: 2.02 KB (3.29%)
  <self>: 59.48 KB (96.7%)
xmldom: 60.46 KB (0.155%)
nouislider: 59.01 KB (0.151%)
element-resize-detector: 57.75 KB (0.148%)
html-entities: 57.42 KB (0.147%)
tether: 55.36 KB (0.142%)
react-responsive: 54.44 KB (0.140%)
underscore: 51.68 KB (0.133%)
ua-parser-js: 50.61 KB (0.130%)
readable-stream: 48.79 KB (0.125%)
lodash.isequal: 48.44 KB (0.124%)
dnd-core: 47.97 KB (0.123%)
  redux: 9.07 KB (18.9%)
  <self>: 38.91 KB (81.1%)
xmlbuilder: 47.82 KB (0.123%)
react-quill: 47.76 KB (0.122%)
buffer: 47.47 KB (0.122%)
redux-devtools-log-monitor: 46.3 KB (0.119%)
  lodash.debounce: 10.53 KB (22.7%)
  <self>: 35.76 KB (77.3%)
lodash.clonedeep: 43.97 KB (0.113%)
recompose: 43.69 KB (0.112%)
sax: 42.52 KB (0.109%)
react-share: 42 KB (0.108%)
react-json-tree: 41.82 KB (0.107%)
@terrestris: 40.83 KB (0.105%)
platform: 39.73 KB (0.102%)
react-dnd-html5-backend: 39.53 KB (0.101%)
react-spinkit: 38.66 KB (0.0992%)
intl-messageformat-parser: 36.82 KB (0.0944%)
@mapbox: 36.09 KB (0.0926%)
tinycolor2: 35.84 KB (0.0919%)
lodash.curry: 35.03 KB (0.0899%)
axios: 34.63 KB (0.0888%)
  is-buffer: 301 B (0.849%)
  <self>: 34.34 KB (99.2%)
history: 34.59 KB (0.0887%)
@turf\circle: 33.66 KB (0.0863%)
  @turf: 33.66 KB (100%)
  <self>: 0 B (0.00%)
react-modal: 32.87 KB (0.0843%)
  lodash.assign: 16.35 KB (49.7%)
  exenv: 843 B (2.50%)
  <self>: 15.7 KB (47.8%)
react-dropzone: 31.89 KB (0.0818%)
es6-promise: 31.78 KB (0.0815%)
react-redux: 30.74 KB (0.0788%)
  hoist-non-react-statics: 2.82 KB (9.17%)
  <self>: 27.92 KB (90.8%)
react-swipeable-views: 30.01 KB (0.0770%)
create-react-class: 29.82 KB (0.0765%)
resize-observer-polyfill: 29.12 KB (0.0747%)
react-router: 29.05 KB (0.0745%)
react-twitter-widgets: 28.69 KB (0.0736%)
prelude-ls: 28.5 KB (0.0731%)
@turf\point-on-surface: 28.39 KB (0.0728%)
  @turf: 28.39 KB (100%)
  <self>: 0 B (0.00%)
ag-grid-react: 27.83 KB (0.0714%)
webpack-dev-server: 27.73 KB (0.0711%)
  loglevel: 7.68 KB (27.7%)
  strip-ansi: 161 B (0.567%)
  <self>: 19.9 KB (71.7%)
dom-helpers: 26.07 KB (0.0669%)
expect: 25.99 KB (0.0667%)
redux: 25.93 KB (0.0665%)
react-transition-group: 25.85 KB (0.0663%)
react-addons-css-transition-group: 25.8 KB (0.0662%)
  react-transition-group: 25.54 KB (99.0%)
  <self>: 270 B (1.02%)
redux-devtools-instrument: 25.51 KB (0.0654%)
@turf\line-intersect: 24.9 KB (0.0639%)
  @turf: 24.9 KB (100%)
  <self>: 0 B (0.00%)
@turf\line-segment: 24.9 KB (0.0639%)
  @turf: 24.9 KB (100%)
  <self>: 0 B (0.00%)
@turf\polygon-to-linestring: 24.9 KB (0.0639%)
  @turf: 24.9 KB (100%)
  <self>: 0 B (0.00%)
qr.js: 24.85 KB (0.0637%)
react-notification-system: 23.67 KB (0.0607%)
leaflet.locatecontrol: 23.54 KB (0.0604%)
@babel\runtime: 23.51 KB (0.0603%)
  regenerator-runtime: 23.51 KB (100%)
  <self>: 0 B (0.00%)
json-2-csv: 23.36 KB (0.0599%)
url: 23.08 KB (0.0592%)
base16: 22.03 KB (0.0565%)
intersection-observer: 21.92 KB (0.0562%)
react-codemirror2: 21.02 KB (0.0539%)
babel-regenerator-runtime: 20.95 KB (0.0537%)
recharts-scale: 20.89 KB (0.0536%)
pbf: 19.22 KB (0.0493%)
util: 19.13 KB (0.0491%)
colorbrewer: 18.94 KB (0.0486%)
xml2js: 18.33 KB (0.0470%)
@turf\explode: 18.33 KB (0.0470%)
  @turf: 18.33 KB (100%)
  <self>: 0 B (0.00%)
draftjs-to-html: 18.27 KB (0.0468%)
react-textfit: 17.53 KB (0.0450%)
math-expression-evaluator: 17.23 KB (0.0442%)
intl-messageformat: 17.18 KB (0.0441%)
connected-react-router: 16.19 KB (0.0415%)
react-dock: 16.12 KB (0.0413%)
node-libs-browser: 16.08 KB (0.0412%)
  string_decoder: 10.79 KB (67.1%)
    safe-buffer: 1.55 KB (14.3%)
    <self>: 9.24 KB (85.7%)
  process: 5.29 KB (32.9%)
  <self>: 0 B (0.00%)
rbush: 16.06 KB (0.0412%)
react-sidebar: 15.91 KB (0.0408%)
leaflet.nontiledlayer: 15.75 KB (0.0404%)
assert: 15.62 KB (0.0401%)
leaflet-extra-markers: 14.74 KB (0.0378%)
intl-relativeformat: 14.66 KB (0.0376%)
punycode: 14.33 KB (0.0367%)
qrcode.react: 13.96 KB (0.0358%)
leaflet.gridlayer.googlemutant: 13.61 KB (0.0349%)
jsonp: 13.51 KB (0.0347%)
  debug: 8.91 KB (66.0%)
  ms: 2.7 KB (20.0%)
  <self>: 1.9 KB (14.1%)
events: 13.29 KB (0.0341%)
react-nouislider: 13.15 KB (0.0337%)
stickybits: 12.83 KB (0.0329%)
reactcss: 12.82 KB (0.0329%)
@babel: 12.48 KB (0.0320%)
is-equal: 12.2 KB (0.0313%)
asap: 11.52 KB (0.0296%)
uncontrollable: 11.41 KB (0.0293%)
lodash.flow: 11.37 KB (0.0292%)
path-to-regexp: 10.67 KB (0.0274%)
  isarray: 120 B (1.10%)
  <self>: 10.56 KB (98.9%)
redux-devtools-dock-monitor: 10.63 KB (0.0273%)
react-intersection-observer: 10.63 KB (0.0273%)
redux-logger: 10.29 KB (0.0264%)
react-base16-styling: 9.73 KB (0.0250%)
turf-helpers: 9.32 KB (0.0239%)
stackblur: 9.29 KB (0.0238%)
rgbcolor: 9.19 KB (0.0236%)
validator: 9 KB (0.0231%)
geojson-rbush: 9 KB (0.0231%)
create-react-context: 8.8 KB (0.0226%)
  warning: 1.73 KB (19.7%)
  <self>: 7.07 KB (80.3%)
leaflet-minimap: 8.36 KB (0.0215%)
deconstruct-number-format: 8.14 KB (0.0209%)
format-number: 8.04 KB (0.0206%)
lru-cache: 8.03 KB (0.0206%)
react-resize-detector: 8 KB (0.0205%)
object-inspect: 7.98 KB (0.0205%)
react-scroll-up: 7.96 KB (0.0204%)
loglevel: 7.68 KB (0.0197%)
react-error-boundary: 7.67 KB (0.0197%)
redux-observable: 7.58 KB (0.0194%)
redux-undo: 7.29 KB (0.0187%)
babel-runtime: 7.23 KB (0.0186%)
redux-devtools: 7.14 KB (0.0183%)
lodash.once: 6.93 KB (0.0178%)
lodash.debounce: 6.89 KB (0.0177%)
react-contenteditable: 6.87 KB (0.0176%)
react: 6.85 KB (0.0176%)
disposables: 6.81 KB (0.0175%)
html-to-draftjs: 6.78 KB (0.0174%)
object-fit-images: 6.61 KB (0.0170%)
react-dom-factories: 6.58 KB (0.0169%)
@turf\inside: 6.57 KB (0.0169%)
  @turf: 6.57 KB (100%)
  <self>: 0 B (0.00%)
lodash.keys: 6.46 KB (0.0166%)
turf-meta: 6.33 KB (0.0162%)
setimmediate: 6.32 KB (0.0162%)
tween-functions: 6.25 KB (0.0160%)
prelude-extension: 6.19 KB (0.0159%)
style-loader: 5.95 KB (0.0153%)
wellknown: 5.92 KB (0.0152%)
file-saver: 5.83 KB (0.0149%)
lie: 5.79 KB (0.0149%)
webpack: 5.76 KB (0.0148%)
lodash.isarguments: 5.58 KB (0.0143%)
date-arithmetic: 5.57 KB (0.0143%)
prop-types-extra: 5.56 KB (0.0143%)
uuid: 5.54 KB (0.0142%)
@carnesen: 5.53 KB (0.0142%)
material-colors: 5.48 KB (0.0141%)
react-input-autosize: 5.39 KB (0.0138%)
ismobilejs: 5.35 KB (0.0137%)
redux-immutable-state-invariant: 5.34 KB (0.0137%)
leaflet-simple-graticule: 5.28 KB (0.0135%)
reduce-css-calc: 5.26 KB (0.0135%)
  balanced-match: 1.13 KB (21.5%)
  <self>: 4.13 KB (78.5%)
scheduler: 5.19 KB (0.0133%)
querystring-es3: 5.06 KB (0.0130%)
lodash.isarray: 5.04 KB (0.0129%)
react-container-dimensions: 4.94 KB (0.0127%)
node-geo-distance: 4.93 KB (0.0126%)
turf-point-on-surface: 4.88 KB (0.0125%)
turf-center: 4.74 KB (0.0122%)
  turf-bbox: 1.74 KB (36.8%)
  <self>: 3 KB (63.2%)
react-side-effect: 4.62 KB (0.0118%)
tmatch: 4.58 KB (0.0118%)
react-prop-types: 4.51 KB (0.0116%)
object-keys: 4.36 KB (0.0112%)
react-swipeable-views-core: 4.34 KB (0.0111%)
fbjs: 4.31 KB (0.0111%)
geojson-equality: 4.21 KB (0.0108%)
react-copy-to-clipboard: 4.19 KB (0.0108%)
ansi-html: 4.16 KB (0.0107%)
intl-format-cache: 4.16 KB (0.0107%)
react-context-toolbox: 4.05 KB (0.0104%)
batch-processor: 4.01 KB (0.0103%)
reselect: 3.88 KB (0.00996%)
screenfull: 3.88 KB (0.00996%)
base64-js: 3.85 KB (0.00988%)
lrucache: 3.85 KB (0.00987%)
leaflet-plugins: 3.82 KB (0.00981%)
deep-equal: 3.8 KB (0.00975%)
lodash._getnative: 3.78 KB (0.00969%)
keycode: 3.63 KB (0.00932%)
stream-browserify: 3.54 KB (0.00908%)
turf-invariant: 3.51 KB (0.00900%)
pure-color: 3.45 KB (0.00885%)
scriptjs: 3.35 KB (0.00859%)
@icons: 3.18 KB (0.00817%)
reduce-function-call: 3.04 KB (0.00780%)
  balanced-match: 1.13 KB (37.3%)
  <self>: 1.91 KB (62.7%)
core-util-is: 2.95 KB (0.00757%)
raf: 2.92 KB (0.00750%)
  performance-now: 1.04 KB (35.4%)
  <self>: 1.89 KB (64.6%)
turf-inside: 2.9 KB (0.00743%)
parsedbf: 2.87 KB (0.00737%)
prop-types: 2.58 KB (0.00662%)
querystringify: 2.53 KB (0.00648%)
copy-to-clipboard: 2.5 KB (0.00641%)
react-is: 2.48 KB (0.00635%)
turf-intersect: 2.4 KB (0.00616%)
decode-uri-component: 2.17 KB (0.00558%)
has-symbols: 2.08 KB (0.00535%)
object-assign: 2.06 KB (0.00528%)
ieee754: 2.02 KB (0.00517%)
timers-browserify: 1.97 KB (0.00506%)
turf-union: 1.93 KB (0.00494%)
parse-key: 1.9 KB (0.00488%)
make-event-props: 1.9 KB (0.00486%)
turf-buffer: 1.85 KB (0.00475%)
immediate: 1.84 KB (0.00472%)
turf-distance: 1.81 KB (0.00463%)
warning: 1.76 KB (0.00453%)
resolve-pathname: 1.75 KB (0.00450%)
turf-bbox: 1.74 KB (0.00446%)
react-popper: 1.73 KB (0.00444%)
  warning: 1.73 KB (100%)
  <self>: 0 B (0.00%)
quickselect: 1.72 KB (0.00442%)
util-deprecate: 1.58 KB (0.00404%)
define-properties: 1.57 KB (0.00403%)
function-bind: 1.55 KB (0.00398%)
element-class: 1.55 KB (0.00396%)
draft-js-inline-toolbar-plugin: 1.52 KB (0.00389%)
css-loader: 1.47 KB (0.00377%)
redux-devtools-themes: 1.42 KB (0.00364%)
invariant: 1.36 KB (0.00350%)
hoist-non-react-statics: 1.35 KB (0.00347%)
format-number-with-string: 1.3 KB (0.00333%)
fast-deep-equal: 1.26 KB (0.00323%)
react-pure-render: 1.21 KB (0.00310%)
doc-path: 1.17 KB (0.00300%)
value-equal: 1.16 KB (0.00297%)
shallowequal: 1.16 KB (0.00297%)
canvas-to-blob: 1.14 KB (0.00293%)
es6-object-assign: 1.14 KB (0.00292%)
turf-explode: 1.11 KB (0.00286%)
change-emitter: 1.11 KB (0.00284%)
is-callable: 1.09 KB (0.00279%)
classnames: 1.08 KB (0.00276%)
detect-passive-events: 1.02 KB (0.00261%)
process-nextick-args: 1.02 KB (0.00260%)
geojson-normalize: 1 KB (0.00257%)
babel-polyfill: 1001 B (0.00251%)
turf-point: 968 B (0.00242%)
is-regex: 918 B (0.00230%)
json-stringify-safe: 907 B (0.00227%)
element-closest: 895 B (0.00224%)
is-generator-function: 885 B (0.00222%)
exenv: 863 B (0.00216%)
toggle-selection: 780 B (0.00195%)
is-symbol: 767 B (0.00192%)
requires-port: 753 B (0.00189%)
symbol-observable: 736 B (0.00184%)
inherits: 672 B (0.00168%)
eventlistener: 639 B (0.00160%)
is-boolean-object: 603 B (0.00151%)
is-number-object: 597 B (0.00150%)
is-string: 590 B (0.00148%)
is-date-object: 551 B (0.00138%)
is-arrow-function: 507 B (0.00127%)
merge-class-names: 459 B (0.00115%)
chain-function: 456 B (0.00114%)
redux-thunk: 375 B (0.000939%)
strict-uri-encode: 186 B (0.000466%)
lodash-es: 171 B (0.000428%)
gud: 139 B (0.000348%)
ansi-regex: 135 B (0.000338%)
isarray: 132 B (0.000331%)
has: 129 B (0.000323%)
intl-messageformat ./lib/locales: 15 B (0.0000376%)
intl-relativeformat ./lib/locales: 15 B (0.0000376%)
object-inspect ./util.inspect: 15 B (0.0000376%)
intl ./locale-data/complete.js: 15 B (0.0000376%)
<self>: 9.88 MB (25.9%)

Here reporting the npm run analyze without examples

npm run analyze

> mapstore2@0.1.0 analyze C:\Work\Projects\MapStore2
> npm run clean && mkdirp ./web/client/dist && webpack --json --config build/prod-webpack.config.js | webpack-bundle-size-analyzer


> mapstore2@0.1.0 clean C:\Work\Projects\MapStore2
> rimraf ./web/client/dist

(node:119868) DeprecationWarning: Tapable.plugin is deprecated. Use new API on `.hooks` instead
(node:119868) DeprecationWarning: loaderUtils.parseQuery() received a non-string value which can be problematic, see https://github.com/webpack/loader-utils/issues/56
parseQuery() will be replaced with getOptions() in the next major version of loader-utils.
ogc-schemas: 4.21 MB (11.8%)
pdfjs-dist: 2.25 MB (6.35%)
ol: 2.09 MB (5.90%)
babel-standalone: 1.68 MB (4.74%)
lodash: 825.93 KB (2.27%)
react-data-grid-addons: 781.68 KB (2.15%)
recharts: 748.1 KB (2.06%)
  core-js: 13.2 KB (1.76%)
  prop-types: 3.04 KB (0.406%)
  <self>: 731.86 KB (97.8%)
rxjs: 643.01 KB (1.77%)
draft-js: 617.43 KB (1.70%)
  immutable: 139.19 KB (22.5%)
  fbjs: 80.12 KB (13.0%)
  <self>: 398.12 KB (64.5%)
moment: 501.5 KB (1.38%)
codemirror: 461.41 KB (1.27%)
@turf: 458.65 KB (1.26%)
jsts: 436.61 KB (1.20%)
quill: 427.05 KB (1.17%)
intl: 412.44 KB (1.13%)
less: 372.78 KB (1.03%)
vis: 371.66 KB (1.02%)
react-bootstrap: 360.39 KB (0.991%)
  react-overlays: 73.23 KB (20.3%)
  <self>: 287.16 KB (79.7%)
react-data-grid: 340.88 KB (0.938%)
react-widgets: 302.54 KB (0.832%)
  dom-helpers: 12.98 KB (4.29%)
  warning: 1.76 KB (0.583%)
  <self>: 287.79 KB (95.1%)
react-draft-wysiwyg: 274.65 KB (0.756%)
core-js: 267.99 KB (0.737%)
w3c-schemas: 256.76 KB (0.706%)
css-tree: 253.72 KB (0.698%)
geostyler-sld-parser: 229.76 KB (0.632%)
  xmlbuilder: 78.77 KB (34.3%)
  lodash: 52.07 KB (22.7%)
  xml2js: 19.74 KB (8.59%)
  <self>: 79.18 KB (34.5%)
pako: 214.25 KB (0.589%)
@boundlessgeo: 199.93 KB (0.550%)
proj4: 181.9 KB (0.500%)
sockjs-client: 180.49 KB (0.496%)
bluebird: 174.97 KB (0.481%)
react-color: 160.63 KB (0.442%)
immutable: 151.73 KB (0.417%)
react-dom: 149.55 KB (0.411%)
react-grid-layout: 149.15 KB (0.410%)
  react-draggable: 74.93 KB (50.2%)
  <self>: 74.21 KB (49.8%)
jszip: 140.69 KB (0.387%)
  core-js: 9.31 KB (6.62%)
  <self>: 131.38 KB (93.4%)
html2canvas: 123.91 KB (0.341%)
react-pdf: 108.54 KB (0.299%)
shpjs: 105.41 KB (0.290%)
  jszip: 93.36 KB (88.6%)
  <self>: 12.05 KB (11.4%)
canvg-browser: 100.3 KB (0.276%)
text-encoding-polyfill: 99.25 KB (0.273%)
react-selectize: 99.04 KB (0.272%)
react-overlays: 95.42 KB (0.262%)
  classnames: 1.17 KB (1.23%)
  <self>: 94.25 KB (98.8%)
source-map: 94.56 KB (0.260%)
react-image-lightbox: 94.12 KB (0.259%)
react-intl: 94.08 KB (0.259%)
react-resizable: 92.14 KB (0.253%)
  react-draggable: 75.06 KB (81.5%)
  <self>: 17.08 KB (18.5%)
react-joyride: 92.02 KB (0.253%)
react-select: 91.69 KB (0.252%)
@terrestris\base-util: 86.43 KB (0.238%)
  lodash: 69.99 KB (81.0%)
  url-parse: 11.9 KB (13.8%)
  query-string: 4.55 KB (5.26%)
  <self>: 0 B (0.00%)
react-draggable: 86.42 KB (0.238%)
@terrestris\ol-util: 86.14 KB (0.237%)
  lodash: 86.14 KB (100%)
  <self>: 0 B (0.00%)
popper.js: 86 KB (0.237%)
geostyler-openlayers-parser: 79.19 KB (0.218%)
  lodash: 30.93 KB (39.1%)
  <self>: 48.26 KB (60.9%)
chroma-js: 76 KB (0.209%)
react-smooth: 68.97 KB (0.190%)
  react-transition-group: 26.01 KB (37.7%)
  <self>: 42.96 KB (62.3%)
leaflet-draw: 65.98 KB (0.181%)
react-dnd: 61.5 KB (0.169%)
  hoist-non-react-statics: 2.02 KB (3.29%)
  <self>: 59.48 KB (96.7%)
xmldom: 60.46 KB (0.166%)
nouislider: 59.01 KB (0.162%)
element-resize-detector: 57.75 KB (0.159%)
html-entities: 57.42 KB (0.158%)
tether: 55.36 KB (0.152%)
react-responsive: 54.44 KB (0.150%)
underscore: 51.68 KB (0.142%)
ua-parser-js: 50.61 KB (0.139%)
readable-stream: 48.79 KB (0.134%)
lodash.isequal: 48.44 KB (0.133%)
dnd-core: 47.97 KB (0.132%)
  redux: 9.07 KB (18.9%)
  <self>: 38.91 KB (81.1%)
xmlbuilder: 47.82 KB (0.132%)
react-quill: 47.76 KB (0.131%)
buffer: 47.47 KB (0.131%)
redux-devtools-log-monitor: 46.3 KB (0.127%)
  lodash.debounce: 10.53 KB (22.7%)
  <self>: 35.76 KB (77.3%)
lodash.clonedeep: 43.97 KB (0.121%)
recompose: 43.69 KB (0.120%)
sax: 42.52 KB (0.117%)
react-share: 42 KB (0.116%)
react-json-tree: 41.82 KB (0.115%)
@terrestris: 40.83 KB (0.112%)
platform: 39.73 KB (0.109%)
react-dnd-html5-backend: 39.53 KB (0.109%)
react-spinkit: 38.66 KB (0.106%)
intl-messageformat-parser: 36.82 KB (0.101%)
@mapbox: 36.09 KB (0.0993%)
tinycolor2: 35.84 KB (0.0986%)
lodash.curry: 35.03 KB (0.0964%)
axios: 34.63 KB (0.0953%)
  is-buffer: 301 B (0.849%)
  <self>: 34.34 KB (99.2%)
history: 34.59 KB (0.0951%)
@turf\circle: 33.66 KB (0.0926%)
  @turf: 33.66 KB (100%)
  <self>: 0 B (0.00%)
react-modal: 32.87 KB (0.0904%)
  lodash.assign: 16.35 KB (49.7%)
  exenv: 843 B (2.50%)
  <self>: 15.7 KB (47.8%)
react-dropzone: 31.89 KB (0.0877%)
es6-promise: 31.78 KB (0.0874%)
react-redux: 30.74 KB (0.0846%)
  hoist-non-react-statics: 2.82 KB (9.17%)
  <self>: 27.92 KB (90.8%)
react-swipeable-views: 30.01 KB (0.0826%)
create-react-class: 29.82 KB (0.0820%)
resize-observer-polyfill: 29.12 KB (0.0801%)
react-router: 29.05 KB (0.0799%)
react-twitter-widgets: 28.69 KB (0.0789%)
prelude-ls: 28.5 KB (0.0784%)
@turf\point-on-surface: 28.39 KB (0.0781%)
  @turf: 28.39 KB (100%)
  <self>: 0 B (0.00%)
webpack-dev-server: 27.73 KB (0.0763%)
  loglevel: 7.68 KB (27.7%)
  strip-ansi: 161 B (0.567%)
  <self>: 19.9 KB (71.7%)
dom-helpers: 26.07 KB (0.0717%)
expect: 25.99 KB (0.0715%)
redux: 25.93 KB (0.0713%)
react-transition-group: 25.85 KB (0.0711%)
react-addons-css-transition-group: 25.8 KB (0.0710%)
  react-transition-group: 25.54 KB (99.0%)
  <self>: 270 B (1.02%)
redux-devtools-instrument: 25.51 KB (0.0702%)
@turf\line-intersect: 24.9 KB (0.0685%)
  @turf: 24.9 KB (100%)
  <self>: 0 B (0.00%)
@turf\line-segment: 24.9 KB (0.0685%)
  @turf: 24.9 KB (100%)
  <self>: 0 B (0.00%)
@turf\polygon-to-linestring: 24.9 KB (0.0685%)
  @turf: 24.9 KB (100%)
  <self>: 0 B (0.00%)
qr.js: 24.85 KB (0.0684%)
react-notification-system: 23.67 KB (0.0651%)
leaflet.locatecontrol: 23.54 KB (0.0648%)
@babel\runtime: 23.51 KB (0.0647%)
  regenerator-runtime: 23.51 KB (100%)
  <self>: 0 B (0.00%)
json-2-csv: 23.36 KB (0.0643%)
url: 23.08 KB (0.0635%)
base16: 22.03 KB (0.0606%)
intersection-observer: 21.92 KB (0.0603%)
react-codemirror2: 21.02 KB (0.0578%)
babel-regenerator-runtime: 20.95 KB (0.0576%)
recharts-scale: 20.89 KB (0.0575%)
pbf: 19.22 KB (0.0529%)
util: 19.13 KB (0.0526%)
colorbrewer: 18.94 KB (0.0521%)
xml2js: 18.33 KB (0.0504%)
@turf\explode: 18.33 KB (0.0504%)
  @turf: 18.33 KB (100%)
  <self>: 0 B (0.00%)
draftjs-to-html: 18.27 KB (0.0502%)
react-textfit: 17.53 KB (0.0482%)
math-expression-evaluator: 17.23 KB (0.0474%)
intl-messageformat: 17.18 KB (0.0473%)
connected-react-router: 16.19 KB (0.0445%)
react-dock: 16.12 KB (0.0443%)
node-libs-browser: 16.08 KB (0.0442%)
  string_decoder: 10.79 KB (67.1%)
    safe-buffer: 1.55 KB (14.3%)
    <self>: 9.24 KB (85.7%)
  process: 5.29 KB (32.9%)
  <self>: 0 B (0.00%)
rbush: 16.06 KB (0.0442%)
react-sidebar: 15.91 KB (0.0438%)
leaflet.nontiledlayer: 15.75 KB (0.0433%)
assert: 15.62 KB (0.0430%)
leaflet-extra-markers: 14.74 KB (0.0406%)
intl-relativeformat: 14.66 KB (0.0403%)
punycode: 14.33 KB (0.0394%)
qrcode.react: 13.96 KB (0.0384%)
leaflet.gridlayer.googlemutant: 13.61 KB (0.0374%)
jsonp: 13.51 KB (0.0372%)
  debug: 8.91 KB (66.0%)
  ms: 2.7 KB (20.0%)
  <self>: 1.9 KB (14.1%)
events: 13.29 KB (0.0365%)
reactcss: 12.82 KB (0.0353%)
@babel: 12.48 KB (0.0343%)
is-equal: 12.2 KB (0.0336%)
asap: 11.52 KB (0.0317%)
uncontrollable: 11.41 KB (0.0314%)
lodash.flow: 11.37 KB (0.0313%)
path-to-regexp: 10.67 KB (0.0294%)
  isarray: 120 B (1.10%)
  <self>: 10.56 KB (98.9%)
redux-devtools-dock-monitor: 10.63 KB (0.0292%)
redux-logger: 10.29 KB (0.0283%)
react-base16-styling: 9.73 KB (0.0268%)
turf-helpers: 9.32 KB (0.0256%)
stackblur: 9.29 KB (0.0256%)
rgbcolor: 9.19 KB (0.0253%)
validator: 9 KB (0.0248%)
geojson-rbush: 9 KB (0.0247%)
create-react-context: 8.8 KB (0.0242%)
  warning: 1.73 KB (19.7%)
  <self>: 7.07 KB (80.3%)
leaflet-minimap: 8.36 KB (0.0230%)
deconstruct-number-format: 8.14 KB (0.0224%)
format-number: 8.04 KB (0.0221%)
lru-cache: 8.03 KB (0.0221%)
react-resize-detector: 8 KB (0.0220%)
object-inspect: 7.98 KB (0.0219%)
react-scroll-up: 7.96 KB (0.0219%)
loglevel: 7.68 KB (0.0211%)
react-error-boundary: 7.67 KB (0.0211%)
redux-observable: 7.58 KB (0.0209%)
redux-undo: 7.29 KB (0.0201%)
babel-runtime: 7.23 KB (0.0199%)
redux-devtools: 7.14 KB (0.0196%)
lodash.once: 6.93 KB (0.0191%)
lodash.debounce: 6.89 KB (0.0190%)
react-contenteditable: 6.87 KB (0.0189%)
react-nouislider: 6.87 KB (0.0189%)
react: 6.85 KB (0.0188%)
disposables: 6.81 KB (0.0187%)
html-to-draftjs: 6.78 KB (0.0186%)
object-fit-images: 6.61 KB (0.0182%)
react-dom-factories: 6.58 KB (0.0181%)
@turf\inside: 6.57 KB (0.0181%)
  @turf: 6.57 KB (100%)
  <self>: 0 B (0.00%)
lodash.keys: 6.46 KB (0.0178%)
turf-meta: 6.33 KB (0.0174%)
setimmediate: 6.32 KB (0.0174%)
tween-functions: 6.25 KB (0.0172%)
prelude-extension: 6.19 KB (0.0170%)
style-loader: 5.95 KB (0.0164%)
wellknown: 5.92 KB (0.0163%)
file-saver: 5.83 KB (0.0160%)
lie: 5.79 KB (0.0159%)
webpack: 5.76 KB (0.0159%)
lodash.isarguments: 5.58 KB (0.0153%)
date-arithmetic: 5.57 KB (0.0153%)
prop-types-extra: 5.56 KB (0.0153%)
uuid: 5.54 KB (0.0153%)
@carnesen: 5.53 KB (0.0152%)
material-colors: 5.48 KB (0.0151%)
react-input-autosize: 5.39 KB (0.0148%)
ismobilejs: 5.35 KB (0.0147%)
redux-immutable-state-invariant: 5.34 KB (0.0147%)
leaflet-simple-graticule: 5.28 KB (0.0145%)
reduce-css-calc: 5.26 KB (0.0145%)
  balanced-match: 1.13 KB (21.5%)
  <self>: 4.13 KB (78.5%)
scheduler: 5.19 KB (0.0143%)
querystring-es3: 5.06 KB (0.0139%)
lodash.isarray: 5.04 KB (0.0139%)
react-container-dimensions: 4.94 KB (0.0136%)
node-geo-distance: 4.93 KB (0.0135%)
turf-point-on-surface: 4.88 KB (0.0134%)
turf-center: 4.74 KB (0.0130%)
  turf-bbox: 1.74 KB (36.8%)
  <self>: 3 KB (63.2%)
react-side-effect: 4.62 KB (0.0127%)
tmatch: 4.58 KB (0.0126%)
react-prop-types: 4.51 KB (0.0124%)
object-keys: 4.36 KB (0.0120%)
react-swipeable-views-core: 4.34 KB (0.0119%)
fbjs: 4.31 KB (0.0119%)
geojson-equality: 4.21 KB (0.0116%)
react-copy-to-clipboard: 4.19 KB (0.0115%)
ansi-html: 4.16 KB (0.0115%)
intl-format-cache: 4.16 KB (0.0114%)
react-context-toolbox: 4.05 KB (0.0111%)
batch-processor: 4.01 KB (0.0110%)
reselect: 3.88 KB (0.0107%)
screenfull: 3.88 KB (0.0107%)
base64-js: 3.85 KB (0.0106%)
lrucache: 3.85 KB (0.0106%)
leaflet-plugins: 3.82 KB (0.0105%)
deep-equal: 3.8 KB (0.0105%)
lodash._getnative: 3.78 KB (0.0104%)
keycode: 3.63 KB (0.00999%)
stream-browserify: 3.54 KB (0.00974%)
turf-invariant: 3.51 KB (0.00965%)
pure-color: 3.45 KB (0.00949%)
scriptjs: 3.35 KB (0.00921%)
@icons: 3.18 KB (0.00876%)
reduce-function-call: 3.04 KB (0.00836%)
  balanced-match: 1.13 KB (37.3%)
  <self>: 1.91 KB (62.7%)
core-util-is: 2.95 KB (0.00812%)
raf: 2.92 KB (0.00804%)
  performance-now: 1.04 KB (35.4%)
  <self>: 1.89 KB (64.6%)
turf-inside: 2.9 KB (0.00797%)
parsedbf: 2.87 KB (0.00791%)
prop-types: 2.58 KB (0.00711%)
querystringify: 2.53 KB (0.00695%)
copy-to-clipboard: 2.5 KB (0.00688%)
react-is: 2.48 KB (0.00681%)
turf-intersect: 2.4 KB (0.00661%)
decode-uri-component: 2.17 KB (0.00598%)
has-symbols: 2.08 KB (0.00573%)
object-assign: 2.06 KB (0.00566%)
ieee754: 2.02 KB (0.00554%)
timers-browserify: 1.97 KB (0.00543%)
turf-union: 1.93 KB (0.00530%)
parse-key: 1.9 KB (0.00523%)
make-event-props: 1.9 KB (0.00522%)
turf-buffer: 1.85 KB (0.00510%)
immediate: 1.84 KB (0.00506%)
turf-distance: 1.81 KB (0.00497%)
warning: 1.76 KB (0.00485%)
resolve-pathname: 1.75 KB (0.00483%)
turf-bbox: 1.74 KB (0.00478%)
react-popper: 1.73 KB (0.00476%)
  warning: 1.73 KB (100%)
  <self>: 0 B (0.00%)
quickselect: 1.72 KB (0.00474%)
util-deprecate: 1.58 KB (0.00434%)
define-properties: 1.57 KB (0.00432%)
function-bind: 1.55 KB (0.00427%)
element-class: 1.55 KB (0.00425%)
draft-js-inline-toolbar-plugin: 1.52 KB (0.00417%)
css-loader: 1.47 KB (0.00405%)
redux-devtools-themes: 1.42 KB (0.00390%)
invariant: 1.36 KB (0.00375%)
hoist-non-react-statics: 1.35 KB (0.00373%)
format-number-with-string: 1.3 KB (0.00358%)
fast-deep-equal: 1.26 KB (0.00347%)
react-pure-render: 1.21 KB (0.00333%)
doc-path: 1.17 KB (0.00322%)
value-equal: 1.16 KB (0.00319%)
shallowequal: 1.16 KB (0.00318%)
canvas-to-blob: 1.14 KB (0.00314%)
es6-object-assign: 1.14 KB (0.00313%)
turf-explode: 1.11 KB (0.00307%)
change-emitter: 1.11 KB (0.00304%)
is-callable: 1.09 KB (0.00299%)
classnames: 1.08 KB (0.00296%)
detect-passive-events: 1.02 KB (0.00280%)
process-nextick-args: 1.02 KB (0.00279%)
geojson-normalize: 1 KB (0.00275%)
babel-polyfill: 1001 B (0.00269%)
turf-point: 968 B (0.00260%)
is-regex: 918 B (0.00247%)
json-stringify-safe: 907 B (0.00244%)
element-closest: 895 B (0.00240%)
is-generator-function: 885 B (0.00238%)
exenv: 863 B (0.00232%)
toggle-selection: 780 B (0.00210%)
is-symbol: 767 B (0.00206%)
requires-port: 753 B (0.00202%)
symbol-observable: 736 B (0.00198%)
inherits: 672 B (0.00181%)
eventlistener: 639 B (0.00172%)
is-boolean-object: 603 B (0.00162%)
is-number-object: 597 B (0.00160%)
is-string: 590 B (0.00158%)
is-date-object: 551 B (0.00148%)
is-arrow-function: 507 B (0.00136%)
merge-class-names: 459 B (0.00123%)
chain-function: 456 B (0.00122%)
redux-thunk: 375 B (0.00101%)
strict-uri-encode: 186 B (0.000500%)
lodash-es: 171 B (0.000459%)
gud: 139 B (0.000373%)
ansi-regex: 135 B (0.000363%)
isarray: 132 B (0.000355%)
has: 129 B (0.000347%)
intl-messageformat ./lib/locales: 15 B (0.0000403%)
intl-relativeformat ./lib/locales: 15 B (0.0000403%)
object-inspect ./util.inspect: 15 B (0.0000403%)
intl ./locale-data/complete.js: 15 B (0.0000403%)
<self>: 9.31 MB (26.2%)

@Gmarquis45
Copy link

It is really problematic .. We try to use it and deploy with CICD on gitlab but we need to add
export NODE_OPTIONS=--max_old_space_size=4096
It take 38min to npm run compile...

Have you find a solution?

Thanks in advance

@offtherailz
Copy link
Member Author

offtherailz commented Mar 9, 2021

#6622 and #6621 should reduce from 12Mib to around 9Mib the main bundle size. We can then procede optimizing:

  • lodash : using transform-imports plugin for babel.config and converting the remaining global requires. (500kb not uglified). Something like this in babel.config.js removing all require('lodash') (can be replcedi with require('loash/...') and import _ from lodash replace too (with import { ... } from lodash. the latter can e transformed into module import by transform-imports.
module.exports = function(api) {
    api.cache(true);
    return {
        "presets": [
            "@babel/env",
            "@babel/preset-react"
        ],
        "plugins": [
            ["transform-imports", {
                "react-bootstrap": {
                    "transform": "react-bootstrap/lib/${member}",
                    "preventFullImport": true
                },
                "lodash": {
                    "transform": "lodash/${member}",
                    "preventFullImport": true
                }
            }],
            "@babel/plugin-proposal-class-properties",
            "@babel/plugin-syntax-dynamic-import"
        ]
    };
};
  • recharts can be removed o loaded dynamically (500kb not uglified) ( used only for elevation chart in layer properties)
  • [ ]react-data-grid and react-data-grid-addons can be loaded together dynamically when open grids.
  • pdf.js can be loaded dynamically.
  • quill can be removed and replaced with ìdraft-js` (429 kb not ugified)
  • react-wysiwyg and draft-js can be loaded dynamically when an editor is loaded at the first time. (300kb+600kb not ugified)
    image

TODO: see the effective uglified sizes in production.

@offtherailz
Copy link
Member Author

I changed the milestone, all the optimization are on the 2021.02.00 now.

@offtherailz
Copy link
Member Author

As a final report of the current operation we can compare stable with master
image
The improvements is not so significant in terms of performance. Anyway these improvements solved a lot of issues due to build size. Now export NODE_OPTIONS=--max_old_space_size=4096 can be removed without having any issue

the bundle size (main bundle) decreased of 23%, 15% gizipped. (~3MB to ~2.5MB transferred), that is not enough for a visible improvement in terms of page load

The analysis from lighthouse will port to create a second issue #6735

@tdipisa tdipisa closed this as completed Apr 20, 2021
agpenton pushed a commit to agpenton/MapStore2 that referenced this issue Jul 8, 2021
agpenton pushed a commit to agpenton/MapStore2 that referenced this issue Jul 8, 2021
agpenton pushed a commit to agpenton/MapStore2 that referenced this issue Jul 8, 2021
agpenton pushed a commit to agpenton/MapStore2 that referenced this issue Jul 8, 2021
agpenton pushed a commit to agpenton/MapStore2 that referenced this issue Jul 8, 2021
agpenton pushed a commit to agpenton/MapStore2 that referenced this issue Jul 8, 2021
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

5 participants