Webpack Integration

Подводные камни, костыли и полученный опыт.
В первую очередь, рассказ ориентирован на тех, кто хочет заменить сборку Грантом или Гальпом на вебпак. Я рассмотрю тонкости настройки и необычные проблемы, с которыми мы столкнулись, ибо стандартные ситуации хорошо описаны на просторах интернета.

Transcript

1. Как внедрить Вебпак Подводные камни, костыли и полученный опыт Илья Зуб Noosphere Ventures 1
2. Исходные данные • 183 компонента • 190 файлов Less • 428 файлов Jade (pug) • 718 файлов JS • Все “классы” в глобальной области видимости • Все сторонние библиотеки в нашем репозитории • Самодельная система сборки • Переводы в формате gettext (*.po) 2
3. Предыдущая система сборки • Самодельная система сборки написанная на ПХП • Конфигурационные файлы зависимостей • grunt-webfont, grunt-contrib-jade; самоделка над spritesmith, less и postcss • jsmin.c для минификации Джс, cssmin.php для ЦСС • Обёртка над lazyload.js для отложенной загрузки 3
4. Почему существующая ситуация не подходит • Нужно создать и поддерживать свою модульную систему • Нужно создать и поддерживать свою систему сборки • Без какой-либо модульной системы сложно отследить зависимости между компонентами • Все сторонние библиотеки в нашем репозитории, что искушает добавить "немного" изменений прямо на месте • В момент сборки не ясно, что и когда будет подключено на страницу 4
5. Модульные системы бывают разные • Browserify • Webpack • Require.js • Rollup.js • Jspm • Assetgraph • Brunch • Lasso 5
6. Почему вебпак • Умеет автоматически разделять результирующие файлы на части • Поддерживает отложенную загрузку из коробки • Есть инструменты для визуализации и анализа результирующих файлов • Умеет работать с CommonJS, AMD, UMD • Умеет работать с любыми типами файлов • Поддерживает Source Maps • Проблемы активно устраняют, помогают решить вопросы, экосистема развивается Посмотреть сравнительную характеристику. 6
7. Алгоритм перехода 1. Добавить недостающие require() и module.exports 2. JST['<TemplateName>'] -> require('./<TemplateName>.jade') 3. Добавить @import “~styles/main.less” во все подключаемые стили 4. Добавить require('style.less') в шапки соответствующих файлов джейд 5. lazyload.load() -> require.ensure() 7
8. • Добавить module.exports, используя jscodeshift • Добавить require(), используя ESList • Заменить обращения к шаблонам, используя регулярные выражения К сожалению, изменения в отложенных загрузках и стилях нужно сделать вручную. Частичная автоматизация 8
9. Настройка вебпака • Сборка переводов - msgcat + po-loader • Спрайтинг - SpritesmithPlugin • Шрифтовые иконки - fontgen-loader • Загрузка модулей, которые вынесены в отдельные файлы - file-loader • Вынесение общих участков кода в отдельные файлы - CommonChunksPlugin • Вынесение ЦСС в отдельный файл - ExtractTextPlugin • Автоматическое импортирование модулей - ProvidePlugin • Создание фавиконок - FaviconsPlugin • Создание файла хтмл с подключёнными ассетами - HtmlWebpackPlugin • Распараллеливание сборки - happypack • Минификация яваскрипта - UglifyJsPlugin • Сборка Less и применение PostCSS - less-loader + postcss-loader 9
10. Уменьшение размера результирующих файлов • Анализ размера файлов - BundleAnalyzerPlugin • Игнорирование модулей анализатором - module.noParse • Алиасы при подключении модулей - resolve.alias • Не генерировать модули для определённых путей - IgnorePlugin • Создание дополнительного файла и его отложенная загрузка • То же самое, что и пункт выше - bundle-loader • Анализатор и визуализация результатов сборки • Слияние похожих частей кода для уменьшения размера - AggressiveMergingPlugin • Удаление похожих и одинаковых результирующих файлов - DedupePlugin 10
11. Отложенная загрузка • Контроллеры и экшны • Отображение чего-то большого по условию • Отображение чего-то по событию 11
12. Стало ли лучше? • Зависимости указаны явно в каждом файле • Появилась возможность использовать модули нпм • Появилась модульная система • Уменьшилось время сборки • Теперь можно написать юнит-тесты • Теперь можно применить ESLint и stylelint в гит коммит хуке и не пропускать несоответствующие стилю задачи 12
13. Дальнейшие улучшения • Уменьшить размер бандла • Оптимизировать отложенные загрузки • Сжимать изображения и шрифты • Отображать заглушки изображений до их загрузки • Server-side rendering • Полноценно применить линтер для джаваскрипта • Не отдавать на клиент неиспользуемый ЦСС и джаваскрипт 13
14. Дополнительная информация • Учебник по вебпаку • Документация по вебпаку первой версии • Документация по вебпаку второй версии • Мои наработки по автоматической миграции кода • Вчера появился релиз-кандидат вебпака версии 2.2.0 14
15. Вопросы приветствуются Slack - @ilyazub Скайп - physx100500 Фейсбук Вконтактик Гитхаб Линкедин 15