Closure Compiler for combining JS files
To combine multiple js files and compress them, there is a variety of tools. One of them is the Closure Compiler. It's written in Java, so it's a requirement to have Java installed in your development environment. You can find the compiler in https://developers.google.com/closure/compiler . For CSS compression you can use the yahoo compressor http://yui.github.io/yuicompressor, Of course, we can use these tools individually.
For example, to combine 2 js files can be done with the following command:
java -jar compiler.jar --js_output_file=all-files.js jquery.maskedinput.js jquery.jgrowl.js
Assets in Yii project
Let's see this process in the context of a yii2 project. Firstly in the project, we create a template by pressing the following command:
php yii asset/template assets.php
This will create a file in the root of the project which is the Configuration file for the asset command. After that, after you have to set correctly the directory path in @webroot and the URL in this file asset.php @web.
We assume that already have download the Closure Compiler, renamed to compiler.jar and put it in the same folder as the assets.php. Then we do the same with the Yahoo compiler. We rename it to yuicompressor.jar and place it in the same directory. Finally, we type:
yii asset assets.php config/assets-prod.php
The CSS and JS will be combined and compressed, and the new configuration will be created with name assets-prod.php in the directory config. Finally, in the web config/web.php we have to replace the bundles with the following command:
'bundles' => require(__DIR__.'/assets-prod.php')
technical optimization of speed of the website can be easy but in hard tasks always can be done with the assistance of a freelance php developer as you see before this technique can be done easily in the last phase of yii development based project.
Optimizing Delivery of Assets
<script async src="/js/jquery.min.js"></script>
with async the files are downloaded asynchronously and then in the first chance script is executed
<script defer src="/js/jquery.min.js" defer></script>
with defer, the documented is download asynchronously after DOM is fully parsed from the browser. I
There a lot of ways to implement code splitting very easily and without the need for complex tools like webpack. Just use the loadJS library a tiny script from filamentgroup with Intersection Observer API.