Webpack + React. Как уменьшить бандл в 15 раз

[batya15]

Вода!

[BoryaMogila]

А что не вода по webpack? Это моя первая статья, хотелось бы увидеть замечания поконкретней, если можно.

[13luck]

Расскажите, пожалуйста, что-нибудь про tree-shaking в webpack.

[BoryaMogila]

tree-shaking доступно только для webpack 2. Буду переходить на второй, напишу похожую статью

[Dreyk]

я собственно зашел в статью только ради того, чтоб почитать про tree-shaking...

Сама по себе статья неплоха, но советую переходить на webpack2, уже можно, есть совместимые версии react-hot-loader и webpack-dev-server

[iLikeKoffee]

Нормальная статья, не обращайте внимания. Особенно, с учетом того, что материала по теме на русском кот наплакал. У меня, кстати, есть boilerplate для проектов на react + redux (с webpack, сборкой, минификацией и т.д.). Однозначно, почерпну у вас пару приемов.

[BoryaMogila]

Спасибо

[lagun4ik]

Есть еще очень классная штука — babel-react-optimize

[BoryaMogila]

Обезательно посмотрю, спасибо.

[vovkvlad]

Я выбрал для себя Webpack по таким критериям:

• …
• Использование es6 и es7 синтаксиса с помощью babel-loader

Не то что бы я придирался, просто, насколько мне известно, то возможность подключить babel есть почти во всех сборщиках (если не во всех), потому сразу бросился в глаза данный пункт в сторону выбора webpack-a

[BoryaMogila]

Согласен у многих есть, мне понравилось удобство подключения. Но у многих и нету.

[hell0w0rd]

Но у многих и нету.

Например?

[BoryaMogila]

babel можно прекрутить куда угодно, вопрос стоит в удобсве натройки и предпочтении разработчика.

[hell0w0rd]

таки куда угодно. А где неудобно настраивать? Вроде везде babelrc поддерживается одинаково, не?

[kashey]

В https://github.com/yandex/ymb никакого бабеля нету, как и возможности использовать es2015 модули.
А сам сборщик не плохой, особенно в плане минимизации передачи данных.

[halfcupgreentea]

Он же поверх gulp сделан, так что добавить babel можно средствами gulp

[agabidullin]

Статья именуется «Webpack + React. Как уменьшить бандл в 15 раз». Под катом — список плагинов и "...P.S. Я ужал свой бандл с 2.6 mb до 160 kb".
Как-то не связано получилось. Хотелось бы прочесть историю от начала до конца: как подключается webpack, как работает и т.п.
Либо стоит поменять название статьи на «Какие плагины я использую для webpack»

[BoryaMogila]

Имеется ввиду, что используя эти плагины можно уменьшить размер бандла в 15 раз.

[remnev]

Как NoErrorsPlugin, EnvironmentPlugin, WebpackShellPlugin, babel-loader помогают уменьшить размер бандла в 15 раз?

[magmoro]

вообще никак, к уменьшению никакого отношения не имеют

[BoryaMogila]

Я согласен не имеют, изначально планировалась статья с названием типа «webpack для продакшн зборки».

[BoryaMogila]

Можно, но опасно при збоях работы CDN.

[magmoro]

кстати есть интересная статья, правда не про реакт, а ангуляр 2 уменьшение кода до 20кб (1.6mb без компресии и минификации) http://blog.mgechev.com/2016/07/21/even-smaller-angular2-applications-closure-tree-shaking/ используя precompiled templates, tree shaking, google closure compiler и brotli (вместо gzip, хотя brotli не все браузеры поддерживают).

[BoryaMogila]

спасибо, прочту.

[shir]

Из недостатков я бы выделил отсутствие ясной документации. Для тех, кто никогда не сталкивался с Webpack, я рекомендую

Немножко устаревший туториал, но узнал много полезного. http://survivejs.com/webpack/introduction/

[BoryaMogila]

устаревший, но понятный. Лутше пока не встречал.

[BoryaMogila]

я думаю что профита будет не много так как реакт весит около 50 kb. Это до gzip. Тем более что все варнинги console.log и прочие вещи выкидеваются при зборке. Хотя заменить на преакт не пробовал, наверняка утверждать не могу.

[seokirill]

Расскажите глупому, что за перекат оО?!

[BoryaMogila]

Преакт, минифицированый реакт