[Harry19911]

Mam projekt którego Webpack kompiluje do 746 KB. Używam komendy

webpack -p

w webpack.config.js mam plugin

 new webpack.DefinePlugin({

'process.env': {

 'NODE_ENV': JSON.stringify('production')

}

 }

w package.json mam

"babel-core": "^6.9.1",
"babel-loader": "^6.2.4",
"babel-plugin-transform-runtime": "^6.6.0",
"babel-polyfill": "^6.9.1",
"babel-preset-es2015": "^6.9.0",
"babel-preset-react": "^6.5.0",
"babel-preset-stage-2": "^6.5.0",
"babel-preset-stage-3": "^6.5.0",
"bootstrap-sass": "^3.3.6",
"css-loader": "^0.18.0",
"extract-text-webpack-plugin": "^1.0.1",
"file-loader": "^0.9.0",
"font-awesome": "^4.6.3",
"iframe-resizer": "~3.5.4",
"intl": "^1.2.4",
"jquery": "^2",
"lodash": "^4.13.1",
"node-sass": "^3.7.0",
"numeral": "^1.5.3",
"query-string": "^4.2.2",
"react": "^0.14.8",
"react-bootstrap": "^0.29.4",
"react-bootstrap-select": "^0.14.0",
"react-collapse": "^2.2.4",
"react-dom": "^0.14.7",
"react-height": "^2.1.0",
"react-motion": "^0.4.4",
"react-redux": "^4.4.1",
"react-select": "^1.0.0-beta13",
"react-tooltip": "^3.0.5",
"redux": "^3.3.1",
"redux-form": "^5.2.5",
"redux-saga": "^0.9.5",
"sass-loader": "^3.2.0",
"style-loader": "~0.13.1",
"underscore": "^1.8.3",
"url-loader": "^0.5.7",
"webpack": "^1.13.1"

Sprawdziłem jeszcze wielkość bibliotek narzędziem webpack-bundle-size-analyzer. Stąd widzę że mógłbym pozbyć się lodash bo z niego tylko jedną funkcję używam

react: 579.25 KB (19.3%)
lodash: 506.88 KB (16.9%)
react-bootstrap: 340.45 KB (11.4%)
core-js: 7.33 KB (2.15%)
babel-runtime: 2.54 KB (0.746%)
: 330.58 KB (97.1%)
core-js: 198.71 KB (6.63%)
intl: 177.96 KB (5.94%)
redux-form: 96.76 KB (3.23%)
lodash-compat: 67.98 KB (2.27%)
react-overlays: 67.14 KB (2.24%)
react-prop-types: 2.94 KB (4.37%)
: 64.2 KB (95.6%)
react-select: 48.2 KB (1.61%)
react-motion: 45.13 KB (1.51%)
redux-saga: 44.38 KB (1.48%)
react-tooltip: 33.68 KB (1.12%)
fbjs: 32.93 KB (1.10%)
numeral: 23.34 KB (0.779%)
regenerator-runtime: 22.32 KB (0.745%)
redux: 22.02 KB (0.735%)
react-redux: 19.37 KB (0.646%)
dom-helpers: 15.56 KB (0.519%)
uncontrollable: 9.75 KB (0.325%)
react-collapse: 8.51 KB (0.284%)
style-loader: 6.99 KB (0.233%)
react-prop-types: 5.45 KB (0.182%)
react-input-autosize: 4.39 KB (0.146%)
deep-equal: 3.8 KB (0.127%)
react-height: 3.49 KB (0.116%)
process: 2.76 KB (0.0920%)
keycode: 2.7 KB (0.0899%)
react-lazy-cache: 2.67 KB (0.0891%)
raf: 1.84 KB (0.0614%)
warning: 1.76 KB (0.0589%)
invariant: 1.48 KB (0.0494%)
css-loader: 1.47 KB (0.0491%)
hoist-non-react-statics: 1.09 KB (0.0365%)
classnames: 1.08 KB (0.0359%)
babel-polyfill: 907 B (0.0296%)
performance-now: 886 B (0.0289%)
symbol-observable: 451 B (0.0147%)
bootstrap-sass: 413 B (0.0135%)
webpack: 251 B (0.00818%)
is-promise: 165 B (0.00538%)
react-dom: 63 B (0.00205%)
babel-runtime: 49 B (0.00160%)
intl .: 15 B (0.000489%)
: 592.91 KB (19.8%)

Da się jeszcze bardziej skompresować kod?
#javascript #webdev

[babysteps]

Webpack 2 + tree shaking?

[epi]

@Harry19911: tak, poczytaj to:
http://blog.mgechev.com/2016/06/26/tree-shaking-angular2-production-build-rollup-javascript/

[budyn]

'NODE_ENV': JSON.stringify('production')

@Harry19911: A co to? ( ͡º ͜ʖ͡º)

[magic96]

@budyn: lepsze to niż "\"production\"", standardy określają, że stringi/klucze w jsonie muszą być pakowane w cudzysłowie, nie apostrof.

[budyn]

@magic96: Spoko, nie wiem, nie używam, ale myślałem, że można po prostu 'production'

[magic96]

@budyn: chociaż to w sumie definicja z poziomu JS, więc można też '"production"', ale też z czytelnością słabo :v

[Harry19911]

@budyn: trzeba wsadzić cudzysłów " więc nie może być samo 'production' tylko '"production"'

[taximan]

@Harry19911: react jest troche duzy, na pewno dobrze minfikujesz? zamiast calego lodasha stosuj tylko te czesci ktore potrzebujesz wiec przykladowo

import { map } from 'lodash';

zrob

import map from 'lodash.map';

@@@ edit : podobna sytulacja jest chyba z react-boostrap tzn taka sama mozliwisc iirc.