Compiling all assets into one file

The Beans Compiler is able to compile and cache all WordPress enqueued assets into a single cached file, on a per-page basis. This applies to files enqueued by plugins too.

Compiling enqueued styles and scripts can be enabled on the WordPress admin Admin->Appearance->Settings page. Note that the compiling will not take effect if the development mode is enabled.

Below is an example of a page with multiple assets files before and after compiling is applied.

Before

<html>
  <head>
    <link rel="stylesheet" id="theme-css" href="http://domain.com/wp-content/plugins/example/assets/css/style.css?ver=2.0.0" type="text/css" media="all">
   <link rel="stylesheet" id="example-plugin-css" href="http://domain.com/wp-content/plugins/example/assets/css/example.css?ver=2.0.0" type="text/css" media="all">
    <link rel="stylesheet" id="another-plugin-css" href="http://domain.com/wp-content/plugins/another/assets/css/another.css?ver=1.0.0" type="text/css" media="all">
    <script type="text/javascript" src="http://domain.com/wp-includes/js/jquery/jquery.js?ver=1.0.0"></script>
    <script type="text/javascript" src="http://domain.com/wp-includes/js/jquery/jquery-migrate.min.js?ver=1.0.0"></script>
  </head>
 <body>
    <!-- Header, content, footer html -->
   <script type="text/javascript" src="http://domain.com/wp-content/plugins/example/assets/js/example.min.js?ver=2.0.0"></script>
    <script type="text/javascript">
     /* <![CDATA[ */
     var plugin_params = {"param":"value"};
      /* ]]> */
   </script>
   <script type="text/javascript" src="http://domain.com/wp-content/plugins/another/assets/js/another.min.js?ver=1.0.0"></script>
  </body>
</html>

After

<html>
 <head>
    <link rel="stylesheet" id="beans-css" href="https://domain.com/uploads/beans/compiler/beans/6920e8f.css?ver=4.2.2" type="text/css" media="all">
 </head>
 <body>
    <!-- Header, content, footer html -->
   <script type="text/javascript" src="https://domain.com/uploads/beans/compiler/beans/4cb1481.js?ver=4.2.2"></script>
 </body>
</html>

The examples above shows how the Beans Compiler can cut down mutliple HTTP requests to one each for your CSS and JavaScript. On pages where your assets vary, new cache files will be created automaticatically.