Створення спільного розповсюдженого запису

Уявіть, що у вас є кілька файлів записів і кожен вимагає jquery. У цьому випадку, кожний файл виведення буде містити jQuery, сповільнюючи роботу вашого користувача. У цьому випадку, ви можете витягти ці загальні бібліотеки в "спільний" файл запису, який включається в кожну сторінку:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

Encore
    // ...
    .addEntry('page1', 'assets/js/page1.js')
    .addEntry('page2', 'assets/js/page2.js')

    // створює файл 'vendor.js' з jquery та модулем bootstrap JS
    // ці модулі більше *не* будуть включені в page1.js або page2.js
    .createSharedEntry('vendor', [
        'jquery',
        'bootstrap',

        // ви також можете вилучити CSS - це створить файл 'vendor.css'
        // цей CSS більше *не* буде вкючений в page1.css або page2.css
        'bootstrap-sass/assets/stylesheets/_bootstrap.scss'
    ])

Щойно ви зробите цю зміну, вам потрібно включити два додаткові файли JavaScript на вашій сторінці до будь-якого іншого файлу JavaScript:

1
2
3
4
5
6
7
8
9

<!-- ці два файли мають бути включені в кожну сторінку -->
<script src="{{ asset('build/manifest.js') }}"></script>
<script src="{{ asset('build/vendor.js') }}"></script>

<!-- тут ви посилаєтеся на певні JS-файли, необхідні поточній сторінці -->
<script src="{{ asset('build/app.js') }}"></script>

<!-- якщо ви вилучили якийсь CSS, включіть vendor.css -->
<link rel="stylesheet" href="{{ asset('build/vendor.css') }}" />

Файл vendor.js містить весь спільний код, який був витягнутий з інших файлів, тож очевидно, що він має бути включений. Інший файл (manifest.js), менш очевидний; він необхідний для того, щоб Webpack знав, як завантажувати ці загальні модулі.