Welcome to the Question2Answer Q&A. There's also a demo if you just want to try it out.

Please create JS and CSS minify plugin

0 votes
81 views
asked Dec 1 in Plugins by MKDan
Please create JS and CSS minify plugin. Such Plugins exists for WordPress. I'm nervous about minifying the origin files which could cause errors.

2 Answers

+1 vote
answered Dec 1 by pupi1985

There is no need to create a plugin for that. Just minimize it yourself, if you want. You will have to minimize the .js and .css files in your theme and qa-content/qa-global.js.

commented Dec 1 by MKDan
But the minification may turn the code into error.
commented Dec 1 by MKDan
For example, I minified the following code but it turns into error:-

Original code:-

    echo '<script>(function(w, d){
    var b=d.getElementsByTagName("body")[0],s=d.createElement("script");s.async=!0;
    s.src = !("IntersectionObserver" in w) ? "' . ROCKET_LL_FRONT_JS_URL . 'lazyload-8.11' . $suffix . '.js" : "' . ROCKET_LL_FRONT_JS_URL . 'lazyload-10.11.1' . $suffix . '.js";
    w.lazyLoadOptions = {
        elements_selector: "' . esc_attr( implode( ',', $elements ) ) . '",
        data_src: "lazy-src",
        data_srcset: "lazy-srcset",
        data_sizes: "lazy-sizes",
        skip_invisible: false,
        class_loading: "lazyloading",
        class_loaded: "lazyloaded",
        threshold: ' . esc_attr( $threshold ) . ',
        callback_load: function(element) {
            if ( element.tagName === "IFRAME" && element.dataset.rocketLazyload == "fitvidscompatible" ) {
                if (element.classList.contains("lazyloaded") ) {
                    if (typeof window.jQuery != "undefined") {
                        if (jQuery.fn.fitVids) {
                            jQuery(element).parent().fitVids();
                        }
                    }
                }
            }
        }
    };
    b.appendChild(s);
}(window, document));

// Listen to the Initialized event
window.addEventListener(\'LazyLoad::Initialized\', function (e) {
    // Get the instance and puts it in the lazyLoadInstance variable
    var lazyLoadInstance = e.detail.instance;

    var observer = new MutationObserver(function(mutations) {
        mutations.forEach(function(mutation) {
            lazyLoadInstance.update();
        } );
    } );
   
    var b      = document.getElementsByTagName("body")[0];
    var config = { childList: true, subtree: true };
   
    observer.observe(b, config);
}, false);
</script>';
--------------------------------------------------------------------------------------------------------------------
I have minified it to:

    echo '<script>(function(w,d){var b=d.getElementsByTagName("body")[0],s=d.createElement("script");s.async=!0;s.src=!("IntersectionObserver"in w)?"' . ROCKET_LL_FRONT_JS_URL . 'lazyload-8.11' . $suffix . '.js":"' . ROCKET_LL_FRONT_JS_URL . 'lazyload-10.11.1' . $suffix . '.js";w.lazyLoadOptions={elements_selector:"' . esc_attr( implode( ',', $elements ) ) . '",data_src:"lazy-src",data_srcset:"lazy-srcset",data_sizes:"lazy-sizes",skip_invisible:false,class_loading:"lazyloading",class_loaded:"lazyloaded",threshold:" . esc_attr( $threshold ) . ",
callback_load:function(element){if(element.tagName==="IFRAME"&&element.dataset.rocketLazyload=="fitvidscompatible")if(element.classList.contains("lazyloaded"))if(typeof window.jQuery!="undefined")if(jQuery.fn.fitVids)jQuery(element).parent().fitVids()}};b.appendChild(s)})(window,document);

window.addEventListener(\'LazyLoad::Initialized\',function(e){var lazyLoadInstance=e.detail.instance;var observer=new MutationObserver(function(mutations){mutations.forEach(function(mutation){lazyLoadInstance.update()})});var b=document.getElementsByTagName("body")[0],config={childList:!0,subtree:!0};observer.observe(b,config)},!1);
</script>';
commented Dec 1 by pupi1985
That didn't work because you did not minimize .css and .js files, as I mentioned in my answer. You are minimizing PHP code, which makes no sense at all
commented Dec 1 by MKDan
Since the above code has <script> tag, I thought it as Javascript. Will it work if I use the php minify? - http://www.cuho.eu/php-minify/
+1 vote
answered Dec 1 by Scott
You can minify JS files manually using https://closure-compiler.appspot.com/
Click Reset, then paste the code on the left, then click Compile. Then you can download the code on the right.

As Pupi said you should do this with the .js files themselves, not PHP code. There are also online minifiers for CSS, they’re easy to find.

I’ve considered adding minification to Q2A itself, but it adds a bit of complexity from a development perspective. If people make changes they’d also have to minify the files manually to test. In general it’s better to not have minified files in source control which would solve that problem, but that means adding an additional build process when people install Q2A.

I should also add, minification does not make a huge amount of difference to download time when the files are gzipped.
commented Dec 1 by MKDan
When I test my q2a website with Chrome's Lighthouse extension, it gave the score of 22. My WordPress websites get a score of around 80.

I like to convert my q2a website to PWA. But Lighthouse extension suggests my q2a site responses very slow.

"Your page loads too slowly and is not interactive within 10 seconds. Look at the opportunities and diagnostics in the "Performance" section to learn how to improve.
Interactive at 14 s"

Page speed matters for mobile users from developing countries. Every millisecond counts.
commented Dec 1 by MKDan
Since the above code has <script> tag, I thought it as Javascript. Will it work if I use the php minify? - http://www.cuho.eu/php-minify/
commented Dec 2 by Scott
What is your website?
commented Dec 6 by MKDan
www.ιнaveѕolved.coм
commented Dec 6 by MKDan
@Scott, don't use closure-compiler. Sometimes it causes an error on the minified JS file.  http://lisperator.net/uglifyjs/ is the best and safe Javascript minifier, as of I know.
...