As stated before, I only used one function and only used it one time. This trick reduced the size of lodash in the bundle from 220kb to just 37kb. Lodash actually has support for importing only single functions from its core library, and that is what I did.
#Bundle files uncompressed full
The first thing that stood out to me was that the bundle included the full lodash library while I only used one function. The report I got back revealed that I had way too many libraries in the project, even though the project was only a few weeks old at that time. Laravel mix also has a nice implementation of this plugin so I could add this without too much hassle. To find out what is filling your bundle webpack has a great tool called Webpack Bundle Analyzer which will create a nice view that shows you what code files are taking up the most space. The first thing I wanted to know is where does all this code come from? A big chunk probably comes from the Vue framework, but this can’t account for an uncompressed bundle of 985kb. Naturally, I am using Laravel for this project, so the packing is done using Laravel Mix on version 4.0.14 at the time of writing. So, my mission today is to reduce the size of my JavaScript bundle and saving loading time. For my personal projects, I always want them to be as performant as possible without raising the cost. After only a few weeks the bundle had grown to approximately 1MB uncompressed.
And I noticed that my bundled JavaScript file started to grow fairly quickly. Recently I started using Vue for a new admin panel on my board games website.
0 kommentar(er)
