Создание общей распространённой записи

Представьте, что у вас есть несколько файлов записей и каждый требует 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 знал, как загружать эти общие модули.