A straightforward way to perform code-splitting in Laravel mix!

Adarsh Sojitra
Mar 6, 2019 · 3 min read
Photo by Linh Pham on Unsplash

Finally, after hours of hard work and research, I was successfully able to perform code-splitting in my Laravel+Vuejs application.

This is my first medium article and I am writing it because I found very less information on code-splitting in Laravel Mix and the articles I found were not so straightforward and were missing some points. So, I thought it would be a great idea to get started with Medium with this topic.

Let’s get straight into the article. I am assuming that you are using a Laravel+Vuejs bundle and you are using vue-router to perform routing through your application. So, the first step would be to install babel-plugin-syntax-dynamic-import package.

Install and configure Babel Dynamic Import Plugin

To install this plugin, navigate to your document root and execute the following npm command.

npm install @babel/plugin-syntax-dynamic-import

Once done, create a .babelrc file in your document root and populate it with the following content.

{
“plugins”: [“@babel/plugin-syntax-dynamic-import”]
}`

Now, It’s time to verify that our main blade file has all the files included so that our application can work just like it worked before code-splitting.

Include/Import all the required files in Index blade file

As our code will be divided into multiple chunks now, so our app css and js files. It means, if you were only importing app.js file till now and things used to work out as expected, now it won’t!

You have to explicitly import app.css in your main blade file that contains your Vuejs application instance. So, Your index blade file would look like the following.

<!doctype html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="csrf-token" content="{{ csrf_token() }}">
<title>{{ env('APP_NAME') }}</title><!-- CSS -->
<link rel="stylesheet" href="{{ asset('css/app.css') }}" type="text/css" />
</head>
<body>
<div id="app">
<router-view></router-view>
</div>
<!-- Javascripts -->
<script src="{{ mix('js/app.js') }}"></script>
</body>
</html>

If you have completed these steps, your application won’t break after running hot or watch or production after code splitting because it will surely load all the required Javascript and CSS files. Something no one told me to do and I wasted about 2–3 hours figuring out what happened!

Still, there is one more step you have to perform in order to perform code-splitting properly. You have to load components in your routes.js file using import function.

Import components using Import() function

We have to use import() function because it can be used as a code split point and webpack understands it. So, after using import() function to import all the components you have in your application into your routes.js file, webpack will create a separate chunk for every component whenever a bundle is created.

You need to change your method for importing components.

From:

Import ComponentName from './components/path/ComponentName.vue// ORVue.component('component-name', { /* ... */ })

To:

const ComponentName = () => import('./components/path/ComponentName.vue' /* webpackChunkName: "js/components/component-name" */)

Once done, execute any of the following commands to compile your vuejs application and see how it divides all the imported components into small chunks.

  • npm run production
  • npm run watch

Conclusion: It’s very important to perform code-splitting if your application requires many components because if you are compiling your application with a single compiledapp.js file, it will get slower and slower with each and every component you add to your application. I had a very bad time dealing with this issue.

Always make sure that you provide the best experience to visitors/customers who regularly visit your site or use your application. code-splitting will surely improve the speed of your website by a lot!

Adarsh Sojitra

Written by

I’m a system administrator, web developer and an entrepreneur with years of experience in technical fields. I’m here to share my knowledge with my new friends.

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade