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 = ;; /** Normally, we create a single global file -- available on all pages **/mix /*---------------------------------------------------------- | Code splitting allows us to "split" our code up. *---------------------------------------------------------- | | -> resources | . /js/split/home.js | . /js/split/badges.js | . /js/split/invoices.js | */ /*---------------------------------------------------------------------------- | 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
@if (asset( "js/split". Str::of(Route::currentRouteName())->before('.')->append('.js') ))@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 = ;; mix // etc...