Запобігання дублювання, шляхом "розділення" спільного коду на окремі файли
Дата оновлення перекладу 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;
+ })