[Vue] Add support for lazy-loading with Async Components

[Kocal]

Q	A
Bug fix?	no
New feature?	yes
Tickets	Fix #...
License	MIT

I was a bit surprised when trying the Symfony UX' Vue integration, to see all Vue components/controllers to be loaded to render at least only one controllers.
This PR aims to reduce the bundle size and only load the required code and Vue controllers to render on the page.

To enable lazy-loading, add the 4th parameter "lazy" to require.context():

- registerVueControllerComponents(require.context('./vue/controllers', true, /\.vue$/));
+ registerVueControllerComponents(require.context('./vue/controllers', true, /\.vue$/, "lazy"));

Note: the sync-loading still works

Real life example

Given 6 really simple Vue controllers which all look the same:

If I render only two of them on a single page:

Before

You can see the app.js is about 4.8 kB, it contains all of the 6 Vue controllers.

After

You can see the app.js is now about 3.4 kB, and two more files have been lazy-loaded (our two Vue controllers rendered on the page).

On a real project, with a lot of Vue controllers, the difference would be very significative. I will try to post some results when migrating our main project at work.

---

Note: I still have to add tests and update the documentation. done

[weaverryan]

This is awesome! I've never used defineAsycComponent and require.context is always complex :). But you've got the tests, I love it.

Do you have anything else you need to do?

[Kocal]

Thanks for the review @weaverryan!

On this PR, I think nothing is missing, however I thought about a usecase for a 2nd PR: I think some people would like to have both lazy-loaded and not lazy-loaded controllers/components at the same time.
E.g.: common components like a NavBar or Aside that would be always shown on every pages, and specific components like a date picker that would be sometimes shown in some context.

Currently, that's not possible to have both registerVueControllerComponents calls like this:

registerVueControllerComponents(require.context('./vue/controllers', true, /\.vue$/));
registerVueControllerComponents(require.context('./vue/controllers-lazy', true, /\.vue$/, 'lazy'));

because vueControllers and loadComponent, which are used by the global function resolveVueComponent(), will be erased.

[weaverryan]

@Kocal I think you're right - but I think that will be solved by #461

[weaverryan]

Thanks Hugo!