Автор: Давыденков Михаил
node.js стеку в Нетологии ~ 1 год
Тогда это был прорыв. Сейчас мы можем лучше
Webpack. Понимание
Жизнь без бандлов
Главное назначение webpack - построение графа зависимостей, и разбиение его на бандлы, в которых достаточно удобно упорядочивать эти зависимости
Важно понимать, что построение графа зависимостей основано на СТАТИЧЕСКОМ анализе кода. JS код не исполняется, чтобы построить дерево зависимостей (поэтому не может быть условных зависимостей)
Small tips (not only webpack related)
Tree shaking
Inspired by rollup.js
Doesn't work with require.js
Use es2015 imports
see helpers.js (inspect result with source maps)
.babelrcCode splitting
Всё в один бандл - плохая стратегия. Хочется маленькие бандлы, хочется грузить код когда необходимо (при переходе к тяжёлым частям приложения)
Выход - динамические импорты. Выносим heavy lifting в отдельные бандлы (d3, тяжёлые библиотеки типа react, lazy evaluation approach) (Смотрим демку про System.import, говорим о require.ensure )
Commons chunking
Commons chunking
Каждый неймспейс/страницу веб сервиса можно рассматривать как отдельное приложение (entry points in webpack config). И зачастую у каждого из этих приложений есть общий код, который хочется кешировать в браузере (реакт, редакс, плагины, любой вендор код должен быть отделен от логики приложения). При переходе между приложениями грузить только маленькие бандлы. (поговорить про инжект в head/body)
Можно использовать webpack.optimize.CommonsChunkPlugin (Смотрим дифф )
Чтобы заинжектить в html лейаут скрипт теги используется HtmlWebpackPlugin
Longterm caching
Дайджесты на коммон чанкс пересчитываются на каждый билд. Можно добавить манифест, чтобы дайджесты считались только по апдейту кода
Смотрим диффЭкстрактим CSS
Чтобы не происходило мерцания экрана, CSS должен быть загружен в HEAD
Смотрим диффOffline
Оффлайн плагин позволяет закешировать все ассеты приложения в сервис воркере. Удобно для контентных страниц где не нужно заморачиваться с бекендом (Нетология-групп сайт, например)
Смотрим диффПро тестирование и деплой можно посмотреть тут
Также рекомендую всем к просмотру курс Webpack 2 deep dive . Многие вещи которые я упустил там хорошо описаны