Symfony
sponsored by SensioLabs
Menu
  • About
  • Documentation
  • Screencasts
  • Cloud
  • Certification
  • Community
  • Businesses
  • News
  • Download
  1. Home
  2. Documentation
  3. Frontend
  4. Async Code Splitting
  • Documentation
  • Book
  • Reference
  • Bundles
  • Cloud
Search by Algolia

Async Code Splitting

Edit this page

Async Code Splitting

When you require/import a JavaScript or CSS module, Webpack compiles that code into the final JavaScript or CSS file. Usually, that's exactly what you want. But what if you only need to use a piece of code under certain conditions? For example, what if you want to use video.js to play a video, but only once a user has clicked a link:

1
2
3
4
5
6
7
8
9
10
// assets/app.js

import $ from 'jquery';
// a fictional "large" module (e.g. it imports video.js internally)
import VideoPlayer from './components/VideoPlayer';

$('.js-open-video').on('click', function() {
    // use the larger VideoPlayer module
    const player = new VideoPlayer('some-element');
});

In this example, the VideoPlayer module and everything it imports will be packaged into the final, built JavaScript file, even though it may not be very common for someone to actually need it. A better solution is to use dynamic imports: load the code via AJAX when it's needed:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
// assets/app.js

import $ from 'jquery';

$('.js-open-video').on('click', function() {
    // you could start a loading animation here

    // use import() as a function - it returns a Promise
    import('./components/VideoPlayer').then(({ default: VideoPlayer }) => {
        // you could stop a loading animation here

        // use the larger VideoPlayer module
        const player = new VideoPlayer('some-element');

    }).catch(error => 'An error occurred while loading the component');
});

By using import() like a function, the module will be downloaded async and the .then() callback will be executed when it's finished. The VideoPlayer argument to the callback will be the loaded module. In other words, it works like normal AJAX calls! Behind the scenes, Webpack will package the VideoPlayer module into a separate file (e.g. 0.js) so it can be downloaded. All the details are handled for you.

The { default: VideoPlayer } part may look strange. When using the async import, your .then() callback is passed an object, where the actual module is on a .default key. There are reasons why this is done, but it does look quirky. The { default: VideoPlayer } code makes sure that the VideoPlayer module we want is read from this .default property.

For more details and configuration options, see dynamic imports on Webpack's documentation.

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

Symfony 6.2 is backed by

Symfony 6.2 is backed by

Code consumes server resources. Blackfire tells you how

Code consumes server resources. Blackfire tells you how

Peruse our complete Symfony & PHP solutions catalog for your web development needs.

Peruse our complete Symfony & PHP solutions catalog for your web development needs.

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

Avatar of Clorr, a Symfony contributor

Thanks Clorr 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