DEV Community

Mike Healy
Mike Healy

Posted on

1

Lighter LoDash Builds for Laravel

Laravel projects often include the LoDash JavaScript utility library. It contains handy utilities, however if you don't need its entire suite you may be serving unnecessary JS to your users that you never run.

LoDash supports custom builds to avoid this problem, and it's fairly easy to modify your Laravel's bootstrap.js file trim down the features you're loading.

Default resources/js/bootstrap.js

window._ = require('lodash'); // 71.1K (gzipped: 24.6K)
Enter fullscreen mode Exit fullscreen mode

Customizing the build

In my case I was only using the throttle and debounce helpers from LoDash. This can be mapped to the window lodash object (typically _) like so:

window._ = require('lodash/core')  // 14K (gzipped: 5.3K)
window._.debounce = require('lodash/debounce')  // 3.5K (gzipped: 1.4K)
window._.throttle = require('lodash/throttle') // 3.7K (gzipped: 1.4K)
Enter fullscreen mode Exit fullscreen mode

My application JS can then call _.debounce() and _.throttle() for those functions with a significant saving to my JS bundle size.

AWS GenAI LIVE image

How is generative AI increasing efficiency?

Join AWS GenAI LIVE! to find out how gen AI is reshaping productivity, streamlining processes, and driving innovation.

Learn more

Top comments (0)

The best way to debug slow web pages cover image

The best way to debug slow web pages

Tools like Page Speed Insights and Google Lighthouse are great for providing advice for front end performance issues. But what these tools can’t do, is evaluate performance across your entire stack of distributed services and applications.

Watch video

👋 Kindness is contagious

Please leave a ❤️ or a friendly comment on this post if you found it helpful!

Okay