Async components #2
Conversation
| @@ -0,0 +1,1703 @@ | |||
| (window["webpackJsonp"] = window["webpackJsonp"] || []).push([[0],{ | |||
There was a problem hiding this comment.
This is the axios chunk, gets loaded on every page that needs axios. Won't get loaded if no axios is imported in the component.
| const files = require.context('./', true, /\.vue$/i) | ||
| files.keys().map(key => Vue.component(key.split('/').pop().split('.')[0], files(key).default)) | ||
| // Register global Vue components | ||
| Vue.component('Layout', require('./Misc/Layout').default); |
There was a problem hiding this comment.
If you first register the components you want globally, it will keep them in the main chunk (app.js)
|
|
||
| // Register all Async Vue components | ||
| require.context('./', true, /\.vue$/i, 'lazy').keys().forEach(file => { | ||
| Vue.component(file.split('/').pop().split('.')[0], () => import(`${file}`)); |
There was a problem hiding this comment.
${ is needed, as you can't pass an expression to import and require
| Vue.component('Layout', require('./Misc/Layout').default); | ||
|
|
||
| // Register all Async Vue components | ||
| require.context('./', true, /\.vue$/i, 'lazy').keys().forEach(file => { |
There was a problem hiding this comment.
The key is to lazy load the context, so it doesn't already load all the components
| .extract(['vue', 'lodash', 'popper.js', 'axios']) | ||
| .webpackConfig({ | ||
| output: { | ||
| chunkFilename: 'js/[name].js', |
There was a problem hiding this comment.
Added this, so the chunk end up in the /js instead of /public folder
|
|
||
| mix.js('resources/js/app.js', 'public/js') | ||
| .sass('resources/sass/app.scss', 'public/css') | ||
| .extract(['vue', 'lodash', 'popper.js', 'axios']) |
There was a problem hiding this comment.
This is no longer needed really, as chunks already take care of this
patrickbrouwers
force-pushed
the
async-components
branch
from
ab0c8f7 to
cb7bedc
Compare
|
This is awesome @patrickbrouwers! 💥💥💥 I think I'm going to create a fresh branch for this. Thanks so much! ❤️ |
2 participants
As discussed on Twitter, here's the example on how to load the components dynamically.