offtherailz commented 5 years ago

We should investigate and propose solutions to:

[ ] reduce bundle size
[ ] reduce memory usage during prod build

MV88 commented 5 years ago

What about lodash-webpack-plugin for using only needed stuff? Maybe something can be found here
What about tree-shaking for production by using modules:false for babel.config.js? see here and this example
Alternatively we can check which files have side effects and specify them in the webpack configuration with sideEffects: ["path/fileWithSideEffect.js"]

MV88 commented 5 years ago

@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 commented 5 years ago

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 commented 5 years ago

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 commented 4 years ago

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 commented 3 years ago

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 r`eact-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](https://user-images.githubusercontent.com/1279510/110513363-6dfcc100-8106-11eb-8dd1-c38129e8401f.png)

TODO: see the effective uglified sizes in production.

offtherailz commented 3 years ago

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

offtherailz commented 3 years ago

As a final report of the current operation we can compare stable with master 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

geosolutions-it / MapStore2

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

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