How To Reduce Enormous JavaScript Bundles Without Effort
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.FileTooBigExceptionVendors 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):
- include app code if app bundle
- read dependencies from
package.json - exclude dependencies if app bundle
- or include dependencies if vendor bundle
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
- How to Improve Your JavaScript Skills by Writing Your Own Web Development Framework 💪
- Common Mistakes to Avoid While Working with Vue.js
➥ React for beginners series
Originally published at www.linkedin.com on January 29, 2018.
