How to check which js files were used in final merged js

Question

With enabled javascript merging and bundling i get one javascript file.

How can i analyze which javascript files across the themes were involved? I suppose var/view_preprocessed should give an answer to this but i am not sure.

Now under the var/view_preprocessed/frontend i have 3 theme directories and those have other child directories, for example:

-bs_cogito
--bs_cogito1
--bs_cogito2
--bs_cogito3
--bs_cogito4

-Magento
--blank
--luma

-Venustheme
--need
--need_child

Is javascript across all these directories used in final merged javascript? The problem i try to solve is that currently my final javascript is very heavy, almost 1.2M(minified) and i am trying to figure out why it is so big, and how to reduce it's size. I think somehow i load js that is unnecessary or duplicated.

Answer 1

Please check your theme_directory/etc/view.xml. You will find

<vars module="Js_Bundle"> <var name="bundle_size">1MB</var> </vars>

You can increase or decrease the bundle size here. Below this you can files excluded and loaded individually. For eg.

<exclude> <item type="file">Lib::jquery/jquery.min.js</item></exclude>

You can try decreasing your bundle size. Mostly try avoiding bundling as as all your js files are loaded for each and every page though it is required or not required increasing your page size.