Запобігання дублювання, шляхом "розділення" спільного коду на окремі файли

Дата оновлення перекладу 2024-05-29

Запобігання дублювання, шляхом "розділення" спільного коду на окремі файли

Припустимо, у вас є декілька файлів записів, і кожний з них вимагає 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') }}

Контролювання розділення ресурсів

Логіка того коли і як файли розділяються на частини контролюється плагіном SplitChunksPlugin з Webpack. Ви можете керувати конфігурацією, що передається до цього плагіну, за допомогою функції configureSplitChunks():

1
2
3
4
5
6
7
8
9
// webpack.config.js
  Encore
      // ...

      .splitEntryChunks()
+     .configureSplitChunks(function(splitChunks) {
+         // change the configuration
+         splitChunks.minSize = 0;
+     })