псевдо style ;)

я тоже относился скептически к mobx и rx подходу. кагбе все прошли бэкбон

и event hell не нужен

но оказалось mobx имплементирует концепцию flux лучше чем тот-же рэдакс

все? flawless victory? redux не нужен ? )))))))

я тролю если что

а что насчет reelm?

чо то много уже re всяких

а что насчет reelm?

не курил

мдя дока не оч (

ну да, дока пока не очень. Но вроде штука интересная. Можно с wsd2016 доклад глянуть

ща посмотрю. еще один + mobx в него вкидуют деньги

https://mobxjs.github.io/mobx/

и дока у нних оч крутая

+ сам автор оч часто отвечает на вопросы

Ребят, может кто - нибудь подсказать по ускорению сборки вебпака? У нас есть n приложений на реакте. Для дева отдельный компонент, который подтягивает их все, т.е. при сборке они все собираются в 1 js-ку весом в 9 метров. И пересборка занимает 50 секунд. Ну и для прома собираются в разные js, но по времени столько же.

9 метров? ух йопт

SSD нужен на билд сервере )

причем по PCI-e

Под девом я подразумевал машинки разработчиков)

Вебпаковский дев сервер с hmr

Вебпаковский дев сервер с hmr

сорри

http://webpack.github.io/docs/build-performance.html

Ещё вопрос. Кто как решает оптимистичный UI? Интересует вопрос про рефреш стараници

Ребят, может кто - нибудь подсказать по ускорению сборки вебпака? У нас есть n приложений на реакте. Для дева отдельный компонент, который подтягивает их все, т.е. при сборке они все собираются в 1 js-ку весом в 9 метров. И пересборка занимает 50 секунд. Ну и для прома собираются в разные js, но по времени столько же.

Вот это треш, откуда можно было 9 метров натянуть

Вот это треш, откуда можно было 9 метров натянуть

react, babel-polyfil, lodash какой-нить в не сжатом виде + всякие доп библиотеки и сам код

Вот это треш, откуда можно было 9 метров натянуть

Не сжатые картиночки и 10 паков шрифтов)

react, babel-polyfil, lodash какой-нить в не сжатом виде + всякие доп библиотеки и сам код

Все есть у меня и вышло 1,2 мб

С материал юай и тд тп

Шрифты и картинки вебпак не обрабатывает

Все есть у меня и вышло 1,2 мб

у меня основной бандл весит 2.7, но там своя ui библиотека

Шрифты и картинки вебпак не обрабатывает

Можно инлайнить

дерево зависимостей гляньте

может там разные версии реакта, лодаша

Можно инлайнить

обоже нет

Аж заставили посмотреть. 1,4, даже при всём том что свг (коих много) нагло заинлайнены в джиэс. Однако сорсмапы именно что 9, может у чувак таки не сжато?

И тут ещё и d3 в сборке. Ну и лодаш, правда не весь. Слабо преставляю что можно напихать на 9 метров.

ну можно реально инлайнить все svg

но я бы все таки сперва глянул дерево зависимостей

но я бы все таки сперва глянул дерево зависимостей

npm list --tree?

да

да

а уже после сборки можно как-то глянуть зависимости, которые попали в нее?

либо в рантайме выводить, какие зависимости попадают

https://www.npmjs.com/package/webpack-dependency-tree

Ну или вот так, шоб совсем — https://www.npmjs.com/package/webpack-graph

Шрифты и картинки вебпак не обрабатывает

Скорее всего обрабатывает раз у ребят hmr. Инлайн css и возможно картинки в base64 коде которые проходят по параметрам.

картинки не инлайном, и да, это не минифицированный. с минификацией время сборки вырастает до 3 минут

и пока у нас разработка или тестирование, мы не минифицируем

картинки не инлайном, и да, это не минифицированный. с минификацией время сборки вырастает до 3 минут

https://github.com/robertknight/webpack-bundle-size-analyzer - и скинь сюда результат )

react: 656.17 KB (9.37%) fbjs: 33.59 KB (5.12%) object-assign: 1.95 KB (0.297%) <self>: 620.63 KB (94.6%) react-bootstrap: 512.27 KB (7.32%) lodash-compat: 67.98 KB (13.3%) react-overlays: 67.14 KB (13.1%) react-prop-types: 2.94 KB (4.37%) <self>: 64.2 KB (95.6%) dom-helpers: 15.56 KB (3.04%) babel-runtime: 9.87 KB (1.93%) core-js: 7.33 KB (74.3%) <self>: 2.54 KB (25.7%) uncontrollable: 9.75 KB (1.90%) react-prop-types: 5.45 KB (1.06%) keycode: 2.7 KB (0.526%) warning: 1.76 KB (0.344%) invariant: 1.48 KB (0.289%) <self>: 330.58 KB (64.5%) components: 473.87 KB (6.77%) lodash: 66.29 KB (14.0%) tether: 56.93 KB (12.0%) react-scrollbar: 49.25 KB (10.4%) inputmask-core: 20.11 KB (4.24%) <self>: 281.29 KB (59.4%) lodash: 410.79 KB (5.87%) moment: 347.14 KB (4.96%) babel-polyfill: 220.93 KB (3.16%) core-js: 198.71 KB (89.9%) regenerator-runtime: 21.34 KB (9.66%) <self>: 907 B (0.401%) velocity-animate: 209.91 KB (3.00%) webpack: 108.91 KB (1.56%) node-libs-browser: 108.67 KB (99.8%) buffer: 47.4 KB (43.6%) base64-js: 3.49 KB (7.36%) ieee754: 2.01 KB (4.23%) isarray: 132 B (0.272%) <self>: 41.78 KB (88.1%) crypto-browserify: 34.3 KB (31.6%) sha.js: 16.01 KB (46.7%) ripemd160: 6.22 KB (18.1%) pbkdf2-compat: 2.02 KB (5.88%) <self>: 10.06 KB (29.3%) util: 16.05 KB (14.8%) inherits: 672 B (4.09%) <self>: 15.4 KB (95.9%) events: 8.13 KB (7.48%)

process: 2.76 KB (2.54%) <self>: 15 B (0.0135%) <self>: 251 B (0.225%) react-router: 107.3 KB (1.53%) warning: 1.76 KB (1.64%) invariant: 1.48 KB (1.38%) hoist-non-react-statics: 1.35 KB (1.26%) <self>: 102.7 KB (95.7%) i18next: 79.15 KB (1.13%) history: 62.65 KB (0.895%) deep-equal: 3.8 KB (6.07%) warning: 1.76 KB (2.82%) query-string: 1.62 KB (2.59%) strict-uri-encode: 182 B (10.9%) <self>: 1.45 KB (89.1%) invariant: 1.48 KB (2.36%) <self>: 53.98 KB (86.2%) react-input-mask: 26.13 KB (0.373%) redux: 25.8 KB (0.369%) lodash: 3.34 KB (12.9%) symbol-observable: 451 B (1.71%) <self>: 22.02 KB (85.4%) react-redux: 25.54 KB (0.365%) lodash: 3.34 KB (13.1%) invariant: 1.48 KB (5.80%) hoist-non-react-statics: 1.35 KB (5.30%) <self>: 19.37 KB (75.8%) qs: 13.74 KB (0.196%) flux: 8.93 KB (0.128%) fbjs: 1.47 KB (16.5%) <self>: 7.46 KB (83.5%) redux-logger: 8.29 KB (0.118%) deepcopy: 7.41 KB (0.106%) style-loader: 6.99 KB (0.0998%) bem-cn: 5.01 KB (0.0716%) react-callback-props-decorator: 2.92 KB (0.0417%) autobind-decorator: 2.36 KB (0.0337%) css-loader: 1.47 KB (0.0210%) debounce: 1.42 KB (0.0203%) date-now: 85 B (5.85%) <self>: 1.34 KB (94.2%) deepmerge: 1.39 KB (0.0199%) transliterate: 1.2 KB (0.0171%) classnames: 1.08 KB (0.0154%) redux-thunk: 529 B (0.00738%) react-dom: 63 B (0.000879%) react-addons-transition-group: 59 B (0.000823%) <self>: 3.59 MB (52.4%)

а при сброке дев сервера :) index.js 9.05 MB 0 [emitted] main index.js.map 10.3 MB 0 [emitted] main

<self>: 3.59 MB (52.4%)

> lodash: 410.79 KB (5.87%) Это точно более лёгкая и лучшая замена underscore?

> lodash: 410.79 KB (5.87%) Это точно более лёгкая и лучшая замена underscore?

какие иморты ?

import _ from 'lodash'

или

import { isEqual } from 'lodash';

?

import _ from 'lodash'

100500

Это полный размер lodash

ух

зло

Там вон пакеты react-bootstrap и components по пол метра

тут даже webpack tree shaking не поможет

ERROR: S client not available

Так что это норм что 9 метров

:)

угу

для экономных сделали ведь: import isEqual from ‘lodash/isEqual’

или import { mapRight, isEqual } from 'lodash';

можно отдельным пакетом поставить lodash.isEqual

или import { mapRight, isEqual } from 'lodash';

А вот надо для этого что-то делать, чтоб оно заработало? Так как у меня нет ни одного import _ from 'lodash', но все равно lodash: 506.88 KB (14.2%) :(

хмм

webpack 2 ?

"webpack": "2.1.0-beta.17",

хммм

вот ето поворот

ояхз теперь

Ну значит это пакет какой-то говнарьский тянет

Ну или вот так, шоб совсем — https://www.npmjs.com/package/webpack-graph

?

Ну значит это пакет какой-то говнарьский тянет

а, кстати, хорошее предположение

Ну значит это пакет какой-то говнарьский тянет

+++

А дерево показывает в корне потому что 3 npm

А вот надо для этого что-то делать, чтоб оно заработало? Так как у меня нет ни одного import _ from 'lodash', но все равно lodash: 506.88 KB (14.2%) :(

tree shaking нужно включить

что-то все равно не помогает ( наверно все-таки какая-то из зависимостей тянет его

что-то все равно не помогает ( наверно все-таки какая-то из зависимостей тянет его

как ты его включил?

npm install babel-preset-es2015-webpack --save-dev "presets": [ "react", "es2015-webpack", "stage-0" ],

хм... странно - компиляция такого import { noop } from 'lodash'; noop(); у меня все равно полметра лодаша тянет

я что-то не так делаю

мой мозг отказывается понимать это: webpack confg module.exports = { entry: [ './index.js' ], output: { path: '/tmp/v2', filename: 'index.js' } }; .babelrc { "presets": [ "es2015-webpack" ] } index.js import { noop } from 'lodash'; noop(); analyzer lodash: 503.54 KB (99.8%) <self>: 1.09 KB (0.217%) что я делаю не так?

используешь lodash :)

import noop from 'lodash/noop';

или babel-plugin-lodash

const noop = function () {};

Попробую попозже, сейчас отошёл от компа