Simple Vuejs Code Splitting in Laravel with Webpack/Laravel Mix

I love using Vuejs components on my Laravel websites.  But as you add more and more components, your components are going to make your default App.js (or whatever other name you’ve given it) file extremely large. And this large file being loaded on every page is going to heavily reduce the speed of your website. Luckily, there’s a super simple solution that will separate all of your Vuejs components when you run Laravel mix and load them conditionally when they’re used on the page.

Installing Dynamic Import

We’re going to install the dynamic import plugin from babel, which allows the parsing of “import()”. You can view the official plugin page here: @babel/plugin-syntax-dynamic-import

npm install babel-plugin-syntax-dynamic-import

Create a file called .babelrc in your root Laravel installation and enter the following:

{
    "plugins": ["syntax-dynamic-import"]
}

In your webpack.mix.js file that is in your root Laravel installation enter the following:

 mix.webpackConfig({
    output: {
        // Chunks in webpack
        publicPath: '/',
        chunkFilename: 'js/components/[name].js',
    },
});

The path of chunkFilename can be wherever you choose, I choose to add a components folder as a child directory of the public js folder. You can also use the following substitutions for your chunkFilename:

[hash] – The hash of the module identifier
[chunkhash] – The hash of the chunk content
[name] -The module name
[id] – The module identifier

There are even more on the Webpack configuration output documentation.

Changing the App.js File

When you install Laravel, your default App.js file will look like this: (I’ve removed the default comments to decrease the size)

require('./bootstrap');

window.Vue = require('vue');

Vue.component('example-component', require('./components/ExampleComponent.vue'));

const app = new Vue({
el: '#app'
});

The following is the old way to register your Vuejs components:

Vue.component('example-component', require('./components/ExampleComponent.vue'));

This is the new way to register your Vuejs components so that they load only on the pages you’re using them:

Vue.component('example-component', () => import(/* webpackChunkName:"example-component" */ './components/ExampleComponent.vue'));

In the import snippet, where it says webpackChunkName, that is the name that the compiled Vuejs component will be saved as when webpack runs.

Compile your assets using npm run dev or npm run production and your components should now be chunked out to separate files wherever your specified in the webpackConfig.