plugins - Combining JS files to one script

admin管理员组

文章数量:1023282

I am trying to combine all JS files - local and third party files. I tried using the following plugins to do the same:

• Autoptimize: It is just not combining the JS files to one
• Fast velocity minify: It is combining the JS files into grouped JS files (I don't know on what basis) but it is including both the original js files and these combined JS files. I didn't understand why it is behaving like this by default.
• Merge + minify + refresh: This is behaving similar to above "Fast velocity minify" plugin.
• WP Fastest Cache: This is clearly giving options to combine the JS and CSS files but still nothing is happening. Even after saving the settings. (btw, this require premium version for complete work)

Requirement:

• I am trying to find a plugin which let me combine JS and CSS files irrespective of whether they are being loaded locally or from third party like CDN, Facebook, Google etc.. (Based on dependencies)
• The concatenation or combination of JS and CSS files must happen based on wp pages. So whenever I make a change in existing JS / CSS file or add a new file, I need to visit this plugin -> Select the page in which I made changes and just click on a button like "Bundlify". This will create two files JS and CSS, specific to that page.
• When I perform the above action, it also caches the whole page by removing the individual JS and CSS files and adding the newly bundled JS and CSS files.
• So, there will be literally only two HTTP requests - JS file and CSS file.

Additional requirements

• Clean the JS and CSS files based on the page selected
• Pushing the created JS and CSS to any CDN cloud
• Able to defer or async the JS script
• The plugin should also able to combine dynamically adding JS and CSS files.

^ The above features I am expecting are seem to be fundamental and must be available in the million plugins of wordpress but I am unable to find any.

Please let me know if there is plugin which has the above features. If not, at least direct me to create my own custom plugin.

Thanks.

I am trying to combine all JS files - local and third party files. I tried using the following plugins to do the same:

• Autoptimize: It is just not combining the JS files to one
• Fast velocity minify: It is combining the JS files into grouped JS files (I don't know on what basis) but it is including both the original js files and these combined JS files. I didn't understand why it is behaving like this by default.
• Merge + minify + refresh: This is behaving similar to above "Fast velocity minify" plugin.
• WP Fastest Cache: This is clearly giving options to combine the JS and CSS files but still nothing is happening. Even after saving the settings. (btw, this require premium version for complete work)

Requirement:

• I am trying to find a plugin which let me combine JS and CSS files irrespective of whether they are being loaded locally or from third party like CDN, Facebook, Google etc.. (Based on dependencies)
• The concatenation or combination of JS and CSS files must happen based on wp pages. So whenever I make a change in existing JS / CSS file or add a new file, I need to visit this plugin -> Select the page in which I made changes and just click on a button like "Bundlify". This will create two files JS and CSS, specific to that page.
• When I perform the above action, it also caches the whole page by removing the individual JS and CSS files and adding the newly bundled JS and CSS files.
• So, there will be literally only two HTTP requests - JS file and CSS file.

Additional requirements

• Clean the JS and CSS files based on the page selected
• Pushing the created JS and CSS to any CDN cloud
• Able to defer or async the JS script
• The plugin should also able to combine dynamically adding JS and CSS files.

^ The above features I am expecting are seem to be fundamental and must be available in the million plugins of wordpress but I am unable to find any.

Please let me know if there is plugin which has the above features. If not, at least direct me to create my own custom plugin.

Thanks.

• plugins
• plugin-development
• wp-admin
• performance

Share Improve this question edited Apr 15, 2019 at 12:56 Mr_Green asked Apr 15, 2019 at 12:51 Mr_GreenMr_Green 15922 silver badges66 bronze badges

Add a comment  | 

1 Answer 1

Sorted by: Reset to default 1

That's a lot of requirements and features. You will probably have hard time finding one single plugin that handles all of that. Maybe some premium plugin might do it, I don't know. You just need to keep going through different plugins and dig into their source codes to find different pieces of the puzzle.

If you want to create your own custom solution, then perhaps it could be worthwhile to familiarize yourself with $wp_scripts and $wp_styles globals. I haven't worked with them personally, but I think you should be able to get all of the scripts and styles from them for further processing.

Also the WP_Scripts class might provide you some insight.

P.s. Although asking for plugin recommendations is off-topic here and I think giving such is also frowned upon, I still want to mention LSCache. I'm not an affiliate, but I've used it a few times. The plugin does quite many things and browsing its source code could give you some ideas for your custom solution.

P.p.s. As a personal experience regarding using some of the existing popular plugins to merge and minify js and css assets, it has never ended well. I've always ended up with some css or js getting messed up, thus breaking the whole site. There's just too many moving parts (actually plugin authors and coding styles) to make it work.

I am trying to combine all JS files - local and third party files. I tried using the following plugins to do the same:

• Autoptimize: It is just not combining the JS files to one
• Fast velocity minify: It is combining the JS files into grouped JS files (I don't know on what basis) but it is including both the original js files and these combined JS files. I didn't understand why it is behaving like this by default.
• Merge + minify + refresh: This is behaving similar to above "Fast velocity minify" plugin.
• WP Fastest Cache: This is clearly giving options to combine the JS and CSS files but still nothing is happening. Even after saving the settings. (btw, this require premium version for complete work)

Requirement:

• I am trying to find a plugin which let me combine JS and CSS files irrespective of whether they are being loaded locally or from third party like CDN, Facebook, Google etc.. (Based on dependencies)
• The concatenation or combination of JS and CSS files must happen based on wp pages. So whenever I make a change in existing JS / CSS file or add a new file, I need to visit this plugin -> Select the page in which I made changes and just click on a button like "Bundlify". This will create two files JS and CSS, specific to that page.
• When I perform the above action, it also caches the whole page by removing the individual JS and CSS files and adding the newly bundled JS and CSS files.
• So, there will be literally only two HTTP requests - JS file and CSS file.

Additional requirements

• Clean the JS and CSS files based on the page selected
• Pushing the created JS and CSS to any CDN cloud
• Able to defer or async the JS script
• The plugin should also able to combine dynamically adding JS and CSS files.

^ The above features I am expecting are seem to be fundamental and must be available in the million plugins of wordpress but I am unable to find any.

Please let me know if there is plugin which has the above features. If not, at least direct me to create my own custom plugin.

Thanks.

I am trying to combine all JS files - local and third party files. I tried using the following plugins to do the same:

• Autoptimize: It is just not combining the JS files to one
• Fast velocity minify: It is combining the JS files into grouped JS files (I don't know on what basis) but it is including both the original js files and these combined JS files. I didn't understand why it is behaving like this by default.
• Merge + minify + refresh: This is behaving similar to above "Fast velocity minify" plugin.
• WP Fastest Cache: This is clearly giving options to combine the JS and CSS files but still nothing is happening. Even after saving the settings. (btw, this require premium version for complete work)

Requirement:

• I am trying to find a plugin which let me combine JS and CSS files irrespective of whether they are being loaded locally or from third party like CDN, Facebook, Google etc.. (Based on dependencies)
• The concatenation or combination of JS and CSS files must happen based on wp pages. So whenever I make a change in existing JS / CSS file or add a new file, I need to visit this plugin -> Select the page in which I made changes and just click on a button like "Bundlify". This will create two files JS and CSS, specific to that page.
• When I perform the above action, it also caches the whole page by removing the individual JS and CSS files and adding the newly bundled JS and CSS files.
• So, there will be literally only two HTTP requests - JS file and CSS file.

Additional requirements

• Clean the JS and CSS files based on the page selected
• Pushing the created JS and CSS to any CDN cloud
• Able to defer or async the JS script
• The plugin should also able to combine dynamically adding JS and CSS files.

^ The above features I am expecting are seem to be fundamental and must be available in the million plugins of wordpress but I am unable to find any.

Please let me know if there is plugin which has the above features. If not, at least direct me to create my own custom plugin.

Thanks.

• plugins
• plugin-development
• wp-admin
• performance

Share Improve this question edited Apr 15, 2019 at 12:56 Mr_Green asked Apr 15, 2019 at 12:51 Mr_GreenMr_Green 15922 silver badges66 bronze badges

Add a comment  | 

1 Answer 1

Sorted by: Reset to default 1

That's a lot of requirements and features. You will probably have hard time finding one single plugin that handles all of that. Maybe some premium plugin might do it, I don't know. You just need to keep going through different plugins and dig into their source codes to find different pieces of the puzzle.

If you want to create your own custom solution, then perhaps it could be worthwhile to familiarize yourself with $wp_scripts and $wp_styles globals. I haven't worked with them personally, but I think you should be able to get all of the scripts and styles from them for further processing.

Also the WP_Scripts class might provide you some insight.

P.s. Although asking for plugin recommendations is off-topic here and I think giving such is also frowned upon, I still want to mention LSCache. I'm not an affiliate, but I've used it a few times. The plugin does quite many things and browsing its source code could give you some ideas for your custom solution.

P.p.s. As a personal experience regarding using some of the existing popular plugins to merge and minify js and css assets, it has never ended well. I've always ended up with some css or js getting messed up, thus breaking the whole site. There's just too many moving parts (actually plugin authors and coding styles) to make it work.

本文标签： pluginsCombining JS files to one script