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]

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