Package Exports

@iesdebrasil/laravel-mix-code-splitter
@iesdebrasil/laravel-mix-code-splitter/index.js

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (@iesdebrasil/laravel-mix-code-splitter) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

Idea Idea

Install

NPM

npm install --save-dev laravel-mix-code-splitter

Yarn

yarn add laravel-mix-code-splitter --save

Purpose

Split Code
Improve Apps
Improve User Lives
Improve Developer Lives
Hook Into Laravel Mix without Losing any original, core logic

Laravel Mix Code Splitter

Definition from google

"Modern sites often combine all of their JavaScript into a single, large bundle. ... An alternative to large bundles is code-splitting, which is where JavaScript is split into smaller chunks. This enables sending the minimal code required to provide value upfront, improving page-load times. The rest can be loaded on demand."

Setup

1. webpack.mix.js

let mix = require('laravel-mix');
require('laravel-mix-code-splitter');

/** Normally, we create a single global file -- available on all pages **/
mix.js('resources/js/app.js', 'public/js/app.js')

  /*----------------------------------------------------------
   | Code splitting allows us to "split" our code up.
   *----------------------------------------------------------
   |  
   | -> resources   
   |    . /js/split/home.js       
   |    . /js/split/badges.js
   |    . /js/split/invoices.js
   |         
   */  
   .split(mix.js, 'resources/js/split', 'public/js/split') 

   /*----------------------------------------------------------------------------
     | Providing splits of our code for each page or feature specific page
     *----------------------------------------------------------------------------
     |  
     | -> public  
     |    . /js/split/home.js
     |    . /js/split/badges.js
     |    . /js/split/invoices.js
     |
     */

2. Cool, cool -- sound great, how do we actually "code split" within Laravel?

After mix does its thing, there's multitudes of ways to dynamically load the proper split for the current route ~ here's a simpler implementation I personally like

routes/web.php

Add names to your routes, we'll use resourceful routes to speed the example up

Route::resource('home', 'HomeController')->home('home');
Route::resource('badges', 'BadgesController')->name('badges');
Route::resource('invoices', 'InvoiceController')->name('invoices');

Add snippet to your primary layout blade file

resources/views/layouts/app.blade.php

First we load our js (app.js)
Then we check if there is a code split
If there is a code split for the current route resource group, we load it


<script src="{{ asset('js/app.js') }}"></script>

@if (asset( "js/split". Str::of(Route::currentRouteName())->before('.')->append('.js') ))
    <script src="{{ asset( Str::of(Route::currentRouteName())->before('.')->start('js/split')->finish('.js') ) }}"></script>
@endif

home.js loads on visits to

/home
/home/{id}
/home/create
/home/{id}/edit

badges.js loads on visits to

/badges
/badges/{id}
/badges/create
/badges/{id}/edit

invoices.js loads on visits to

/invoices
/invoices/{id}
/invoices/create
/invoices/{id}/edit

app.js loads on every page

Code splitting non-js files

let mix = require('laravel-mix');
require('laravel-mix-code-splitter');

mix

.js('resources/js/app.js', 'public/js/app.js')
.split(mix.js, 'resources/js/split', 'public/js/split') 


.css('resources/js/app.css', 'public/css/app.css')
.split(mix.css, 'resources/css/split', 'public/css/split')

.css('resources/js/app.css', 'public/css/app.css')
.split(mix.css, 'resources/css/split', 'public/css/split')

.postCss('resources/css/main.css', 'public/css', [require('precss')()])
.split(mix.postCss, 'resources/css', 'public/css/split', [require('precss')()])

// etc...