Symfony
sponsored by SensioLabs
Menu
  • About
  • Documentation
  • Screencasts
  • Cloud
  • Certification
  • Community
  • Businesses
  • News
  • Download
  1. Home
  2. Documentation
  3. Frontend
  4. Creating a Shared Commons Entry
  • Documentation
  • Book
  • Reference
  • Bundles
  • Cloud
Search by Algolia

Creating a Shared Commons Entry

Edit this page

Warning: You are browsing the documentation for Symfony 4.0, which is no longer maintained.

Read the updated version of this page for Symfony 6.2 (the current stable version).

Creating a Shared Commons Entry

Suppose you have multiple entry files and each requires jquery. In this case, each output file will contain jQuery, slowing down your user's experience. In this case, you can extract these common libraries to a "shared" entry file that's included on every page:

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')

    // this creates a 'vendor.js' file with jquery and the bootstrap JS module
    // these modules will *not* be included in page1.js or page2.js anymore
    .createSharedEntry('vendor', [
        'jquery',
        'bootstrap',

        // you can also extract CSS - this will create a 'vendor.css' file
        // this CSS will *not* be included in page1.css or page2.css anymore
        'bootstrap/scss/bootstrap.scss'
    ])

As soon as you make this change, you need to include two extra JavaScript files on your page before any other JavaScript file:

1
2
3
4
5
6
7
8
9
<!-- these two files now must be included in every page -->
<script src="{{ asset('build/manifest.js') }}"></script>
<script src="{{ asset('build/vendor.js') }}"></script>

<!-- here you link to the specific JS files needed by the current page -->
<script src="{{ asset('build/app.js') }}"></script>

<!-- if you extracted some CSS, include vendor.css -->
<link rel="stylesheet" href="{{ asset('build/vendor.css') }}" />

The vendor.js file contains all the common code that has been extracted from the other files, so it's obvious that it must be included. The other file (manifest.js) is less obvious: it's needed so that Webpack knows how to load those shared modules.

Tip

The vendor.js file works best when its contents are changed rarely and you're using long-term caching. Why? If vendor.js contains application code that frequently changes, then (when using versioning), its filename hash will frequently change. This means your users won't enjoy the benefits of long-term caching for this file (which is generally quite large).

This work, including the code samples, is licensed under a Creative Commons BY-SA 3.0 license.
We stand with Ukraine.
Version:
Become certified from home

Become certified from home

Measure & Improve Symfony Code Performance

Measure & Improve Symfony Code Performance

↓ Our footer now uses the colors of the Ukrainian flag because Symfony stands with the people of Ukraine.

Avatar of Rémi Andrieux, a Symfony contributor

Thanks Rémi Andrieux (@pimolo) for being a Symfony contributor

1 commit • 2 lines changed

View all contributors that help us make Symfony

Become a Symfony contributor

Be an active part of the community and contribute ideas, code and bug fixes. Both experts and newcomers are welcome.

Learn how to contribute

Symfony™ is a trademark of Symfony SAS. All rights reserved.

  • What is Symfony?
    • Symfony at a Glance
    • Symfony Components
    • Case Studies
    • Symfony Releases
    • Security Policy
    • Logo & Screenshots
    • Trademark & Licenses
    • symfony1 Legacy
  • Learn Symfony
    • Symfony Docs
    • Symfony Book
    • Reference
    • Bundles
    • Best Practices
    • Training
    • eLearning Platform
    • Certification
  • Screencasts
    • Learn Symfony
    • Learn PHP
    • Learn JavaScript
    • Learn Drupal
    • Learn RESTful APIs
  • Community
    • SymfonyConnect
    • Support
    • How to be Involved
    • Code of Conduct
    • Events & Meetups
    • Projects using Symfony
    • Downloads Stats
    • Contributors
    • Backers
  • Blog
    • Events & Meetups
    • A week of symfony
    • Case studies
    • Cloud
    • Community
    • Conferences
    • Diversity
    • Documentation
    • Living on the edge
    • Releases
    • Security Advisories
    • SymfonyInsight
    • Twig
    • SensioLabs
  • Services
    • SensioLabs services
    • Train developers
    • Manage your project quality
    • Improve your project performance
    • Host Symfony projects
    Deployed on
Follow Symfony
Search by Algolia