Wp-rocket: Add the filename as a comment inside the combined file so that we know the source of the CSS or JS

[DahmaniAdame]

Is your feature request related to a problem? Please describe.
Our combined CSS and JS files don't include the file names.

When we debug cache dir size issue, we diff check combined files to find dynamic codes or codes that may not be added on multiple pages.

We then need to find to which file that code belongs either using Chrome to search the source files (can be tricky at times as we might need to be on the page where the files to be excluded is added), or do a string search using String Locator (that can be slow depending on the server and website size).

This whole process of looking to where the code belongs will be spared if we have the file names added on top of their code while combining them.

Another use case to have the file name showing on the combined file.

I was left with a bunch of files of the exact same size. It turned out that one of the files with a version string using the current time (thanks to Vasilis for spotting that).

This would have been spotted while doing the diff check.

Describe the solution you'd like
Add the filename as a comment inside the combined file so that we know the source of the CSS or JS.

Additional context
Slack conversation - https://wp-media.slack.com/archives/C08N8J6VC/p1611222669001400

[Tabrisrp]

@wp-media/productrocket Do we want to go forward with this, knowing we are going to remove combine JS?

Also, including the filename as comments inside the file will increase the final size.

[arunbasillal]

@Tabrisrp Based on the bench-marking I did last week, removing Combined JS might not be feasible in the short term. (The plan is to do more tests on customer websites).

The increase in file size will be nominal, right? A website with 15 JS files will have 15 lines of text added. Which after compression (gzip) should be negligible.

Imo, let's do it since it will save time for L2.

[engahmeds3ed]

Scope a solution

1. Create private method on \WP_Rocket\Engine\Optimization\Minify\JS\Combine called add_comment which returns the comment structure when debug is enabled only as follows:-

private function add_comment ( string $comment_message ) {
    if ( ! rocket_get_constant( 'WP_DEBUG' ) ) {
        return '';
    }
    return "/*{$comment_message}*/\r\n";
}

1. Call this method here:
   https://github.com/wp-media/wp-rocket/blob/68efad9f187d3ee48d3361e339a0545fdfc2f8e5/inc/Engine/Optimization/Minify/JS/Combine.php#L321-L336

for inline JS we will add the message Inline Script.

1. We can call this method twice for each type ( START and END ) so L2 team knows where is the start and where is the end of each block.

2. Adjust tests to add WP_DEBUG.

Estimate the effort
[S]

@wp-media/productrocket please confirm the following points:-

1. Url Comment will be added only when debug mode is enabled.
2. for inline JS, we will add the comment Inline Script START, Inline Script END
3. We will add two comments, one before the JS content and another one after it.

[arunbasillal]

@engahmeds3ed The idea to add it only when Debug mode is enabled is brilliant! Everything else looks great from my side.

@DahmaniAdame / @vmanthos Can you please confirm that this will serve the purpose that L2 was looking for?

[DahmaniAdame]

@engahmeds3ed nice touch with enabling it only when debugging is on 👍🙏
@arunbasillal looks good to me!

[vmanthos]

This looks good to me too! 🙏