You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Similar to the auto-wiring of components, different folder.
Using changes added from GH-9, explore the possibility to include all components inside a view folder as "async" components in the same chunk.
A possible convention to achieve this would be:
The root component for every View ends with either .vue or .async.vue, ignoring any files ending with .local.vue
The components exclusive to each of these views end with .local.vue and can be placed either inside the /components or /views folder (since both views and components convention will ignore them).
The convention will then scan for:
Files ending with .vue, but not .async.vue and .local.vue inside the /views folder as part of the sync context. (a require.context generated with the default sync mode)
Files ending with .async.vue inside the /views folder as part of the async context (a require.context generated with the lazy mode)
Vue routers declare their component as component: Vue.component('my-component-name') where the name is the one Autowire uses to register it based on the file name
This will give us a somewhat decent compromise between autowiring and automatic code-split per route.
Note we cannot set the chunk names, since for that we would need to use webpack magic-comments in the import statements!
The convention would find 2 async views (user-profile and about) and a sync view (home). Both async views will get its own webpack chunk, that includes local components referenced by them.
For a more automated wiring of all the views and their exclusive components that maintains code splitting capabilities, we will need to explore GH-13
The text was updated successfully, but these errors were encountered:
Similar to the auto-wiring of components, different folder.
Using changes added from GH-9, explore the possibility to include all components inside a view folder as "async" components in the same chunk.
A possible convention to achieve this would be:
.vue
or.async.vue
, ignoring any files ending with.local.vue
.local.vue
and can be placed either inside the /components or /views folder (since both views and components convention will ignore them)..vue
, but not.async.vue
and.local.vue
inside the/views
folder as part of the sync context. (arequire.context
generated with the default sync mode).async.vue
inside the/views
folder as part of the async context (arequire.context
generated with the lazy mode)Vue.component('my-component-name')
where the name is the one Autowire uses to register it based on the file nameThis will give us a somewhat decent compromise between autowiring and automatic code-split per route.
For example, given a folder structure like:
The convention would find 2 async views (user-profile and about) and a sync view (home). Both async views will get its own webpack chunk, that includes local components referenced by them.
For a more automated wiring of all the views and their exclusive components that maintains code splitting capabilities, we will need to explore GH-13
The text was updated successfully, but these errors were encountered: