Предотвращение дублирования путем "разделения" общего кода в отдельные файлы

Представьте, что у вас есть файлы с многочисленными точками входа, и каждый требует jquery. В таком случае, каждый файл вывода будет содержать jQuery, что сделает ваши файлы значительно больше, чем нужно. Чтобы решить это, вы можете попросить webpack проанализировать ваши файлы и разделить их на дополнительные файлы, содержащие "общий" код.

Чтобы включить это, вызовите splitEntryChunks():

1
2
3
4
5
6
7
8
9
10
11

// webpack.config.js
  Encore
      // ...

      // файлы с множественными точками входа, которые, скорее всего, импортируют один и тот же код
      .addEntry('app', './assets/app.js')
      .addEntry('homepage', './assets/homepage.js')
      .addEntry('blog', './assets/blog.js')
      .addEntry('store', './assets/store.js')

+     .splitEntryChunks()

Теперь, каждый файл вывода (к примеру, homepage.js) может быть разделен на несколько файлов (например, homepage.js и vendors-node_modules_jquery_dist_jquery_js.js - имя второго файла будет менее очивидным при создании в производсте). Это означает, что вам может понадобиться добавить несколько тегов script (или тегов link для CSS) в ваш шаблон. Encore создает файл entrypoints.json , который перечисляет, какие точно файлы CSS и JavaScript нужны для каждой записи.

Если вы используете функции Twig encore_entry_link_tags() и encore_entry_script_tags() из WebpackEncoreBundle, вам не нужно больше ничего делать! Эти функции автоматически читают этот файл и отображают столько тегов script или link, сколько нужно:

1
2
3
4
5
6
7

{#
    May now render multiple script tags:
        <script src="/build/runtime.js" defer></script>
        <script src="/build/vendors-node_modules_jquery_dist_jquery_js.js" defer></script>
        <script src="/build/homepage.js" defer></script>
#}
{{ encore_entry_script_tags('homepage') }}

1
2
3
4
5
6
7
8
9

// webpack.config.js
  Encore
      // ...

      .splitEntryChunks()
+     .configureSplitChunks(function(splitChunks) {
+         // измените конфигурацию
+         splitChunks.minSize = 0;
+     })