Preventing Duplication by "Splitting" Shared Code into Separate Files ===================================================================== Suppose you have multiple entry files and *each* requires ``jquery``. In this case, *each* output file will contain jQuery, making your files much larger than necessary. To solve this, you can ask webpack to analyze your files and *split* them into additional files, which will contain "shared" code. To enable this, call ``splitEntryChunks()``: .. code-block:: diff Encore // ... // multiple entry files, which probably import the same code .addEntry('app', './assets/js/app.js') .addEntry('homepage', './assets/js/homepage.js') .addEntry('blog', './assets/js/blog.js') .addEntry('store', './assets/js/store.js') + .splitEntryChunks() Now, each output file (e.g. ``homepage.js``) *may* be split into multiple file (e.g. ``homepage.js``, ``vendor~homepage.js``). This means that you *may* need to include *multiple* ``script`` tags (or ``link`` tags for CSS) in your template. Encore creates an :ref:`entrypoints.json ` file that lists exactly which CSS and JavaScript files are needed for each entry. If you're using the ``encore_entry_link_tags()`` and ``encore_entry_script_tags()`` Twig functions from WebpackEncoreBundle, you don't need to do anything else! These functions automatically read this file and render as many ``script`` or ``link`` tags as needed: .. code-block:: html+twig {# May now render multiple script tags: #} {{ encore_entry_script_tags('homepage') }} Controlling how Assets are Split -------------------------------- The logic for *when* and *how* to split the files is controlled by the `SplitChunksPlugin from Webpack`_. You can control the configuration passed to this plugin with the ``configureSplitChunks()`` function: .. code-block:: diff Encore // ... .splitEntryChunks() + .configureSplitChunks(function(splitChunks) { + // change the configuration + splitChunks.minSize = 0; + }) .. _`SplitChunksPlugin from Webpack`: https://webpack.js.org/plugins/split-chunks-plugin/