Code Splitter

Laravel Mix Extension Allowing You To Easily Code Split without needing to specify every file.
latest v1.0.5 - released
zhorton999
3 downloads last week
MIT license
6 versions
code split
commands
from
code split
splitter
code splitting
split

Idea Version Maintenance Idea


Download Install


Npm NPM

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

Clew Yarn

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

Ok Purpose


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

Hot Coffee 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...