How To Reduce Enormous JavaScript Bundles Without Effort

jbardon⚡
Jan 29, 2018 · 3 min read
Picture by @gianpaololapaglia from Unsplash

Your bundle is too big and you tried my trick to debug JavaScript in IntelliJ but it didn’t work. Actually, if the bundle is big enough, IntelliJ will tell your JavaScript file is too big and that’s true.

IO Error: com.intellij.openapi.util.io.FileTooBigException

Vendors hold the place

Your application bundle is big, but it’s not because of your code. It’s because the final bundle includes the code base and all your dependencies (aka. vendors).

There are many choices based on your project bundler and your determination to make it work.

The first solution supports your laziness. Allow IntelliJ to handle bigger files. My configuration can appear a bit too radical but you can try with way smaller numbers.

Another solution is to set IntelliJ custom properties (same menu, above VM Options).

# Maximum file size (kilobytes) IDE provides code assistance for. idea.max.intellisense.filesize=60000# Maximum file size (kilobytes) IDE is able to open. idea.max.content.load.filesize=60000

This second solution comes from StackOverflow. No matter which solution you choose, restart IntelliJ to make it load your new settings.

Break up with vendors (more complicated)

Let’s cover more technical solutions. They consist of configuring the bundler. The two most used are Gulp and Webpack.

The good news about Webpack, a built-in feature allows you to split your bundle. It then creates separate chunks based on your instructions.

This code is straightforward, add the chunk plugin in your configuration. Then check if the module path contains node_modules as a discriminative criterion.

Here comes the tricky solution for gulp users. The script I wrote to make it is too big to be copy/pasted in this article. You better want to consult the gist.

The idea behind this script is quite simple (magic happens here):

With this function declared, you can use it with the right parameters from your gulp tasks.

<script src="/vendor.js"></script>
<script src="/bundle.js"></script>

Please note both solutions need you to remember to include the vendors bundle. It must be set in the HTML page right before the app bundle.

Hope this article allowed you to overcome the issue when using source map to debug your project.

If you found this article useful, please click on the 👏 button a few times to make others find the article and to show your support! 👊

Don’t forget to follow me to get notified of my upcoming articles 🙏

Check out my Other Articles

➥ JavaScript

➥ React for beginners series

Originally published at www.linkedin.com on January 29, 2018.

DailyJS

JavaScript news and opinion.

DailyJS

JavaScript news and opinion.

jbardon⚡

Written by

Avid learner about web development 🔍 and writer ✍️ for sharing tips and tricks — Full-Stack Developer @SmarAdServer ➕

DailyJS

JavaScript news and opinion.