@webpack_ru
Webpack — русскоговорящее сообщество

Обсуждения webpack, лоадеров, плагинов и сборок Правила: http://bit.ly/our_etiquette См. также: @rollup_ru, @react_js, @vscode_ru, @macos_ru, @js_ru

974 members

Архив канала @webpack_ru 7 ноября 2017 г.

09:33:50 ПП
User 111940155
Всем привет
09:33:53 ПП
User 111940155
Webpack 2.6

Есть основной чанк, в него идут все пакеты с node_modules, нужен еще один, в который 
собраны несколько либ, которые надо подгружать только на определенной странице.

При этом приложение - это SPA, т.е мне надо именно по требованию подгрузку, а не подключать в шаблон файл этого бандла. В шаблон подключается только основной файл сборки и первый чанк с пакетами из node_modules
 
- можно ли это решить по средствам  CommonChank?
- или тут подойдет только динамический require (import)?

Много времени уже потратил, подскажите пожалуйста
09:39:13 ПП
User 30260375
User 111940155
Webpack 2.6

Есть основной чанк, в него идут все пакеты с node_modules, нужен еще один, в который 
собраны несколько либ, которые надо подгружать только на определенной странице.

При этом приложение - это SPA, т.е мне надо именно по требованию подгрузку, а не подключать в шаблон файл этого бандла. В шаблон подключается только основной файл сборки и первый чанк с пакетами из node_modules
 
- можно ли это решить по средствам  CommonChank?
- или тут подойдет только динамический require (import)?

Много времени уже потратил, подскажите пожалуйста
динамический ипорт + CommonChank
09:39:39 ПП
User 30260375
хотя нет
09:39:48 ПП
User 30260375
тут тупо динамический импорт
09:40:22 ПП
User 30260375
если эти либы заимпорчены в одном чанке то тупо его импортиш и всё
09:41:07 ПП
User 111940155
User 30260375
тут тупо динамический импорт
вот тоже думаю так, но как же тогда параметр async в CommonChank - я думал тут его функциональность должна как то помочь?
09:42:17 ПП
User 30260375
User 111940155
вот тоже думаю так, но как же тогда параметр async в CommonChank - я думал тут его функциональность должна как то помочь?
а зачем? commonChank нужен когда у тебя есть например три чанка с общими зависимостями, и вот те самые общие зависимости выносятся в общий бандл, дабы они не попали в каждый чанк. если у тебя всего один чанк, то это нафин не нужно
09:43:52 ПП
User 111940155
User 30260375
а зачем? commonChank нужен когда у тебя есть например три чанка с общими зависимостями, и вот те самые общие зависимости выносятся в общий бандл, дабы они не попали в каждый чанк. если у тебя всего один чанк, то это нафин не нужно
вообще два чанка выходит - один common.js - в него все идут пакеты из node_modules, а вот второй как раз должен быть с этими несколькими либами
09:44:29 ПП
User 111940155
если бы у меня были отдельные страницы, а не SPA, я бы просто отдельный чанк подключил на отедльной странице
09:44:41 ПП
User 111940155
но я с вами согласен с самим решением
09:44:58 ПП
User 30260375
не путай бандл с чанком
09:45:20 ПП
User 30260375
бандл это штука которая всегда подключена, чанк же это штука которая подключается по требованию
09:45:34 ПП
User 30260375
так вот, у вас один бандл и один чанк. так что всё ок. тупо импорт и всё
09:47:10 ПП
User 111940155
я не перепутал - у меня должна быть ситуация в идеале
- бандл 
- чанк с пакетами из node_modules
- чанк с либами которые надо отдельно сгруппировать (их несколько)
09:48:20 ПП
User 111940155
решение рабочее - когда делаешь 
- бандл 
- чанк с node_modules
- подгружаешь динамическим импортом нужные либы отдельно (на определенном роуте)
09:48:56 ПП
User 111940155
по сути при динамическом импорте, сам собой делается отдельный чанк (если посмотреть выходные файлы)
09:49:05 ПП
User 30260375
User 111940155
я не перепутал - у меня должна быть ситуация в идеале
- бандл 
- чанк с пакетами из node_modules
- чанк с либами которые надо отдельно сгруппировать (их несколько)
зачем чанк с node_modules, они же обычно везде нужны?
09:49:53 ПП
User 111940155
    new webpack.optimize.CommonsChunkPlugin({
      names: 'common',
      minChunks: function({ context }) {
        return context && context.indexOf('node_modules') !== -1;
      }
    }),
09:50:43 ПП
User 30260375
User 111940155
    new webpack.optimize.CommonsChunkPlugin({
      names: 'common',
      minChunks: function({ context }) {
        return context && context.indexOf('node_modules') !== -1;
      }
    }),
в итоге выходит не чанк а бандл
09:50:57 ПП
User 30260375
ещё раз. чанк всегда грузится динамически
09:52:51 ПП
User 111940155
User 30260375
ещё раз. чанк всегда грузится динамически
т.е два бандла у меня - один из entry формируется, второй этим применением плагина?
09:52:56 ПП
User 30260375
в названии CommonsChunkPlugin слово чанк означает не то что он делает чанки а то что он выносит общий код из чанков в бандл
09:53:01 ПП
User 30260375
User 111940155
т.е два бандла у меня - один из entry формируется, второй этим применением плагина?
именно
09:54:04 ПП
User 111940155
ок, спасибо за пояснение. 
а по опции async можете пояснить?
09:54:22 ПП
User 30260375
смотря что
09:55:04 ПП
User 111940155
ну вот пускай у кода выше, я добавил эту опцию, как подключение в шаблон должно происходить? бандл из enty будет подгружать?
09:56:03 ПП
10:00:43 ПП
User 111940155
я в принципе знаю про такой подход, пользуюсь от части
10:01:52 ПП
User 111940155
но применимо к ситуации, не очень понимаю, что происходит при добавлении этого параметра, - как с эим работать (в документации конечно прочитал, но практических примеров не нашел)
10:03:17 ПП
User 111940155
за книжку спасибо, надо прочитать обязательно
10:03:55 ПП
User 111940155
вы наверное не поняли, что я имел ввиду - я про опцию в плагине commonChank
10:04:51 ПП
User 30260375
User 111940155
вы наверное не поняли, что я имел ввиду - я про опцию в плагине commonChank
аааааа. там она разрешает выносит файлы из чанков
10:05:20 ПП
User 111940155
User 30260375
аааааа. там она разрешает выносит файлы из чанков
можно чуть чуть поподробнее?
10:07:24 ПП
User 30260375
вот есть у тебя 3 чанка(импорт который в разных условиях грузит 3 разных файлах) и все они зависят от одной либы. и ты хочешь чтоб эта либа вынеслась в отдельный бандл. так вот, чтоб это произошло, нужно постваить async:true
10:13:29 ПП
User 111940155
User 30260375
вот есть у тебя 3 чанка(импорт который в разных условиях грузит 3 разных файлах) и все они зависят от одной либы. и ты хочешь чтоб эта либа вынеслась в отдельный бандл. так вот, чтоб это произошло, нужно постваить async:true
спасибо и наверное последний вопрос, - для импорта нескольких либ использовал 
require(['a', 'b', 'c'], function(a, b, c) { .... }
вебпак сам сгруппировал их в один бандл, можно ли добавиться того же с import()? он принимает только один параметр - строку, как понял, мне надо будет воспользоваться Promise.all для подгрузки нескольких
10:14:40 ПП
User 30260375
зачем? если в А еслть статический импорт на B то при импорте A заимпортится и B тоже
10:15:27 ПП
User 111940155
User 30260375
зачем? если в А еслть статический импорт на B то при импорте A заимпортится и B тоже
там немного другая ситуация, библиотеки не имортят др др
10:15:53 ПП
User 30260375
а как они тогда работают? в глобальную область себя прописывают?
10:16:43 ПП
User 111940155
видимо да, но можно это представить, что мне как бы надо три тяжелых библиотеки подключить на одной странице, и чтобы к началу работы логики страницы, они все подгрузились
10:18:35 ПП
User 30260375
ну тут как бы архитектурная проблема. но в целом вам никто не мешает создать фаил который будет импортить все эти библиотеки и ничего больше с ними не делать, и импортировать этот фаил. тогда они все одним запросом подтянутся. но это не решит проблему явно не правильной архитектуры
10:20:59 ПП
User 111940155
User 30260375
ну тут как бы архитектурная проблема. но в целом вам никто не мешает создать фаил который будет импортить все эти библиотеки и ничего больше с ними не делать, и импортировать этот фаил. тогда они все одним запросом подтянутся. но это не решит проблему явно не правильной архитектуры
проблема с этим есть, но это уже ньюансы плагина. 
т.е нет такого хака как с require([..] ..) c новыми импортами?
10:26:06 ПП
User 30260375
import( webpackChunkName: "my-chunk-name", webpackMode: "lazy-once" );  вот так импортируй всет три модуля. тогда будет выполнен один запрос
10:32:13 ПП
User 111940155
User 30260375
import( webpackChunkName: "my-chunk-name", webpackMode: "lazy-once" );  вот так импортируй всет три модуля. тогда будет выполнен один запрос
10:32:30 ПП
User 30260375
код покажи
10:33:17 ПП
User 111940155
  import('./d', 'lazy-once').then(d => d());
10:33:20 ПП
User 111940155
вот с одним
10:33:53 ПП
User 111940155
у меня webpack 2.6.1
10:37:53 ПП
User 30260375
упс не так
10:38:42 ПП
User 30260375
попробуй так (/* webpackMode: "lazy-once", webpackChunkName: "d" */ './d')
10:39:39 ПП
User 111940155
хм, вебпак что комменты прочитает?
10:40:01 ПП
User 30260375
по всей видимости, да
10:40:11 ПП
User 30260375
по крайней мере попробовать стоит
10:41:25 ПП
User 111940155
жесть какая..
10:41:41 ПП
User 111940155
реально прочитал - надо только "lazy" просто
10:43:23 ПП
User 111940155
ну чанка то он два сделал
10:45:13 ПП
User 111940155
User 30260375
по крайней мере попробовать стоит
я правильно вашу идею реализовал?
  import(/* webpackMode: "lazy", webpackChunkName: "d" */ './d').then(d => d());
  import(/* webpackMode: "lazy", webpackChunkName: "e" */ './e').then(e => e());
10:46:12 ПП
User 30260375
User 111940155
реально прочитал - надо только "lazy" просто
с lazy можешь вообще этот коментарий убрать, ибо это дефолтный режим. но тогда за каждой либой будет сделан отдельный запрос, что не совсем хорошо
10:47:52 ПП
User 111940155
а, надо просто webpackChunkName указать один, тогда склеит
10:49:07 ПП
User 111940155
@worldxaker спасибо большое за то, что сэкономили мне кучу времени и нервов
10:50:04 ПП
User 30260375
User 111940155
а, надо просто webpackChunkName указать один, тогда склеит
нет. нужно указать мод lazy-once, с точки зрения кода это ничего не изменит. но к серверу будет не три запроса, а один
10:52:26 ПП
User 111940155
User 30260375
нет. нужно указать мод lazy-once, с точки зрения кода это ничего не изменит. но к серверу будет не три запроса, а один
10:53:16 ПП
User 30260375
тогда я советую обновить вебпак до последней версии, либо смирится и использовать lazy
10:55:55 ПП
User 111940155
import(/* webpackChunkName: "t" */ './d').then(d => console.log(d));
import(/* webpackChunkName: "t" */ './e').then(e => console.log(e));
при таком коде один чанк получается с одним запросом
10:57:31 ПП
User 111940155
но как бы мне не нарваться на проблемы с асинхронностью, библиотеки все таки зависимы, а промайсы отработают в разные моменты (сразу не проверишь, т.к делаю на упращенном варианте)
11:03:50 ПП
User 30260375
User 111940155
но как бы мне не нарваться на проблемы с асинхронностью, библиотеки все таки зависимы, а промайсы отработают в разные моменты (сразу не проверишь, т.к делаю на упращенном варианте)
оберни их в promiseAll, либо обнови вебпак
11:08:00 ПП
User 111940155
User 30260375
оберни их в promiseAll, либо обнови вебпак
спасибо
11:13:12 ПП
User 30260375
User 111940155
спасибо
Не за что