Webpack 4 и code splitting

    25 февраля 2018 года вышел релиз webpack 4.0.0 (и на сегодняшний день 4.0.1). Одна из полезных и сравнительно новых фич webpack — code splitting, перенесена в новой версии из плагинов в основную конфигурацию. При практически полном отсутствии документации, как теперь нужно конфигурировать code splitting в версии 4 — я немного испытал шок, но все же попытался собрать информацию, чтобы по минимуму начать работать с новой версией. Я надеюсь, что через некоторое время появятся и обстоятельные tutorials, и статьи. Пока же спешу сделать заметки по найденной информации, чтобы не потерять ее на просторах интернета.

    В webpack версии 3 code splitting конфигурировался в параметрах плагина:

    new CommonsChunkPlugin({
          name: 'common',
          minChunks: 2,
    }),
    

    Сейчас в конфигурацию добавлена новая секция — оптимизация. Один из вариантов конфигурации, который имеет аналогичный функционал выглядит так:

    optimization: {
        minimize: false,
        runtimeChunk: { name: 'common' },
        splitChunks: {
          cacheGroups: {
            default: false,
            commons: {
              test: /\.jsx?$/,
              chunks: 'all',
              minChunks: 2,
              name: 'common',
              enforce: true,
            },
          },
        },
      },
    

    К сожалению не все параметры в настоящее время документированы и многое остается неясным.
    AdBlock похитил этот баннер, но баннеры не зубы — отрастут

    Подробнее
    Реклама

    Комментарии 27

      +3
      Вы всё делаете неправильно. Основная фича Вебпак 4 это ZeroConfig. Просто не нужно его конфигурировать, он магическим образом сам сделает всё что нужно, вот почитайте https://habrahabr.ru/post/347812/ А если вам нужно что-то сложнее чем то, как он сделает, то вы слишком сложный разработчик и хотите странного. Сложных программ не должно быть, старайтесь чтобы всё было awsome и easy, и не делайте лишней работы. А если серьёзно то мне хочется плакать от того как развивается современный веб.
        0
        А если серьёзно то мне хочется плакать от того как развивается современный веб.

        можете раскрыть свои переживания?
          +6

          Я, конечно, не Aquahawk, но просто разработчик, который большую часть времени занимается бэкендом и системными штуками.
          Иногда для разных pet project возникает необходимость сделать веб-интерфейс к чему-то.


          И вот я, будучи не совсем глупым человеком, лезу в гугл и ищу в сторону modern web development.


          Что нахожу:


          1. Туториалы для новичков "как запустить create-react-app", "установить npm/node/tsc/yeoman/leftpad/etc", в которых говорится "сделайте npm install X", пишется hello world в шаблоне, всё.
          2. Чем Vue/Angular лучше React, почему jQuery отжил своё, а на backbone правильные пацаны не должны писать.
          3. Как прикрутить модную библиотеку для REST/реактивного программирования/и т.д. к React/Angular/Vue.

          Как только начинаешь производить системный подход, углубляться дальше "npm install/run", читать доки к webpack, tsc, бабелам всяким, понимаешь, что разобраться, КАК всё это работает возможно только за целую вечность.


          И в сухом остатке выходит, что современный веб — это либо "просто запустить, но магия под капотом", либо "ничего непонятно, и когда будет понятно — не известно".


          Это всё, безусловно, ИМХО, и чисто впечатление от человека, который занимается разработкой веб-интерфейсов достаточно ситуативно.


          TL;DR Инструментарий для разработчика не должен становиться проблемой на долгие часы изучения.

            +2

            В других языках не так что ли? Все эти компиляторы, SDK конфигурируются одной кнопкой, что даже ребенок может справиться с этим?

            Предугадать абсолютно все желания пользователей нельзя, поэтому простые проекты да, делают без огромных конфигов, но это не значит, что должны быть только "простые" проекты. Проекты бывают разные, в том числе и сложные, которые в любом случае требуют доп настроек

            • НЛО прилетело и опубликовало эту надпись здесь
              0
              Я с вами согласен. Но частично. Скажу за себя. Я выбрал свой любимый frontend стек для разработки — ReactJS, Redux, Bootstrap, SCSS и т.п. Конечно, хорошо знать все то разнообразие, которое предлагает современное сообщество. Но будучи обычным backend разработчиком я в эти дебри не лезу. Я не знаю, как готовить Angular, Backbone, не умею в Typescript и т.д. Читаю статьи либо общего характера, либо связанные с моими инструментами. И не испытываю того дикого дискомфорта, который ощущаете Вы. Но да, когда я только начал знакомиться с фронтендом, я был потерян и запутан.
              Что касательно всяких там вебпаков и бабелей. Эти инструменты слишком универсальны, чтобы быть простыми. Проектов много, они разные, у всех разные потребности. Да и без них пока никак. Браузеры только сейчас научились import, а есть ещё большой процент старых и мобильных браузеров, которые до сей поры про let и const не знают.
              Если говорить о разнообразии, то это же здорово! Вспомнить только про npm и yarn. Пока второй не появился, первый не особо стремился оптимизировать скорость загрузки пакетов. Конкуренция это всегда хорошо.
                0
                Кстати об import.
                Я недавно попробовал заюзать родной нодовский import (.mjs) и столкнулся с тем что он сделан несовместимым с остальным миром. То есть из .mjs модуля можно импортировать только другой .mjs модуль.
                То есть теперь альтернатива — или пропускать весь код для нода через бабел — или начать целенаправленно и поседовательно юзать .mjs.
                Если к этому добавить что есть запрос (а в webpack он уже реализован) на динамический import (на нем и основан собственно code splitting) то ситуация с импортами выглядит немного запутанно.
                0
                ну всё верно написали, добавить конечно есть чего по мелочи, но смысла нет, и так достаточно сказано.
                  +1
                  И вот я, будучи не совсем глупым человеком, лезу в гугл и ищу в сторону modern web development.

                  В этот момент вам нужно понять, что вам нужно. Если вы хотите изучить гибкие мощные современные инструменты, то они по определению будут сложные, с наскока за полчаса их не освоить.


                  Но если вам нужно написать немного кода для браузера, не обязательно лезть в "modern web development". Можно по старинке руками подключить скрипты на страницу. Появление Webpack никак этого не отменяет.

                0
                Мне нужен совершенно определеннывй результат. Загрузка приложения которая
                1. При первом обращение к любой (не только к /) странице приложения React грузился весь необходимый для прорисовки страницы код в макимум двух файлах
                2. При переходе на другие страницы догружался недостающий код.

                Из коробки пока что у меня получется больше файлов при первой загрузке. Возможно что я еще не нашел тот вариант который сделает это для меня без конфигурирования.
                  0
                  Как заставить его без конфигурации загружать babel-loader? У меня без конфигурации не заработало.
                0
                Научили наконец работать с sass или все так же стабильно плохо?
                  +1
                  Хочу поинтересоваться, а что не так с sass?
                    0
                    Помнится, была проблема с путями внутри sass и я так и не нашел способ (может кто нибудь покажет конфиг) как таки на выходе получить несколько файлов css вместо одного.
                      0
                      Кажется с ним, да и со стилями вообще, можно было работать только через extract-text-plugin, если нужно было билдить стили в несколько файлов для разных страниц.
                    0

                    Пошли на поводу у parceljs. Личное имхо, подход при котором напрочь забивают на обратную совместимость (напишите пожалуйста все плагины еще раз для 4 версии) разочаровывает.

                      0
                      Одна из полезных и сравнительно новых фич webpack — code splitting, перенесена в новой версии из плагинов в основную конфигурацию.

                      В оригинальной документации по Webpack куда вы даете ссылку, как был этот плагин так и остался. Недавно собирал достаточно большое приложение и так же использовал его с 4-ой версией. Ума не приложу где вы тут проблему нашли. В документации же все написано, что и как делать…
                        +1
                        Вот оно что…
                        Уважаемый автор:
                        1) Ни чего не поменялось и ни чего ни куда не переехало. Все осталось как раньше.
                        2) В новый webpack заехал плагин который поставляется из коробки и этот плагин называется SplitChunksPlugin.
                        3) Появился он в ответ на некоторые проблемы которые были у CommonChunksPlugin.
                        4) Если вы хотите его использовать, подозреваю у вас есть какие то проблемы со старым плагином. Если же их нет и вы чего то не понимаете, не создавайте их себе, берите то что есть и решайте задачу.
                        5) Если все же хочется его использовать, разберитесь как работает CommonChunksPlugin и как работает SplitChunksPlugin. Самое важное здесь то, что они работают по разному. Если вам реально нужен этот плагин, даже за неимением документации всегда можно прочесть код. Понять как он работает не составит большого труда если вы читали документацию по webpack и понимаете концепции в нем заложены:
                        github.com/webpack/webpack/blob/master/lib/optimize/SplitChunksPlugin.js
                          –1
                          Вы точно ссбирали со старым плагином после выхода релиза? У меня процесс сборки закончился с ошибкой о том что старый плуги не просто deprecated а удален из системы
                            +1
                            Да плагин действительно полностью выпилен. Не совсем ясны мотивы бороться с признанием такого малозначительного факта. Вот как это выглядит
                            image
                              0
                              Да, действительно вы правы, я накосячил. Еще раз все проверил. Оказалось у меня по дефолту встал не последний Webpack, причем ставил я его неделю назад без указания версии, т.е. последний. В итоге после очередной переустановки он таки упал. Пошел посмотрел документацию и код и в очередной раз убедился что у хипстеров из команды Webpack бардак с документацией как был с первой версии так и остался. Для себя решил проблемы очень просто, откатился обратно. Нет смысла просто так гнаться за обновлениями, если они не решают каких то фундаментальных проблем которые у вас были. Если же решают, читайте код нового плагина. Я для себя решил пока не ковырять его глубоко а просто подождать пока они обновят доки.
                            –1
                            Я де не против разбираться.очень даже за! Просто доков нет. Надеюсь что скоро появятся.
                              0
                              Вышла версия 4.1.1 в которой пофикшены баги по code splitting. Например в нулевых версиях его нельзя было отключить или если можно то неясно как это сделать. Сейчас по умолчанию оно отключено. Сейчас я подумал а может быть это даже такой ход был чтобы обратить внимание разработчиков на интересную возможность?
                                0
                                А как сделать spliting для server-side рендеринга?
                                  0
                                  Не совсем понял в чем вопрос. Code spliting становится необходим на стороне клиента (а не сервера) когда все файлы js компонуются в один или несколько файлов. На стороне сервера это не имеет смысла, т.к. все зависимости загружаются как правило при старте приложения и нет профита от code splitting. Например для того чтобы написать изоморфное приложения приходится делать немного разные роутеры для клиента github.com/apapacy/realworld-react-universal-hot/blob/master/src/react/clientRouter.js и для сервера github.com/apapacy/realworld-react-universal-hot/blob/master/src/react/serverRouter.js

                                  В первом случае используется новы динамический импорт во втором — статический require
                                    0
                                    Спасибо. Разобрался в вопросе пару дней назад)

                                Только полноправные пользователи могут оставлять комментарии. Войдите, пожалуйста.

                                Самое читаемое