hryvinskyi/magento2-deferjs

N/A

Installs: 28 490

Dependents: 0

Suggesters: 0

Security: 0

Stars: 11

Watchers: 3

Forks: 2

Open Issues: 1

Type:magento2-module

1.3.0 2024-10-17 13:10 UTC

This package is auto-updated.

Last update: 2024-10-17 13:11:14 UTC


README

The module moves javascripts to the bottom of the page.

Latest Stable Version Total Downloads PayPal donate button Latest Unstable Version License Scrutinizer Code Quality Build Status

Installation Guide

Install by composer

composer require hryvinskyi/magento2-deferjs
bin/magento module:enable Hryvinskyi_Base
bin/magento module:enable Hryvinskyi_DeferJs
bin/magento setup:upgrade

Install download package

  1. Download module https://github.com/hryvinskyi/magento2-base "Clone or download -> Download Zip"
  2. Download this module "Clone or download -> Download Zip"
  3. Unzip two modules in the folder app\code\Hryvinskyi\Base and app\code\Hryvinskyi\DeferJs
  4. Run commands:
bin/magento module:enable Hryvinskyi_Base
bin/magento module:enable Hryvinskyi_DeferJs
bin/magento setup:upgrade
  1. Configure module in admin panel

General Settings

To get the access to the 'Defer JavaScripts' settings please go to Stores -> Configuration -> Hryvinskyi Extensions -> Defer JavaScripts and expand the General Settings section.

Enabled deferred javascript: Enable or disable the extension from here.
Disable move attribute: Enter the attribute that will block the move of the script to the bottom.
Enabled minify body scripts: Enable script minification.

Features

  • Ability to skip javascripts with a special tag that can be set in the admin panel

  • Built-in skipping move Google tag manager (If you use a third-party module and can not add a special tag)

  • Exclude by controllers from defer parsing of JavaScript.

    Controller will be unaffected by defer js. Use like: [module][controller][action] (Example: cms_index_index)

  • Exclude by store paths from defer parsing of JavaScript.

    Paths will be unaffected by defer js. Use like: /women/tops-women/jackets-women.html

  • Exclude by url pattern from defer parsing of JavaScript.

    URL pattern can be a full action name or a request path. Wildcards are allowed. Like:

    *cell-phones*
    *cell-phones/nokia-2610-phone.html
    customer_account_*
    /customer/account/*
    *?mode=list
    
  • Minification of moved javascripts

  • Optimize text/x-magento-init scripts

  • Ability to extend the module with your validator

  • Increased rendering time improves the Google Page Speed score.

Add custom validator

To add your validator:

  1. Create Validator file app/code/Vendor/Module/Model/PassesValidator/Validators/YourValidator.php:

    <?php
    
    declare(strict_types=1);
    
    namespace Vendor\Module\Model\PassesValidator\Validators;
    
    use Hryvinskyi\DeferJs\Model\PassesValidator\ValidatorInterface;
    use Magento\Framework\App\Response\Http;
    
    /**
     * Class YourValidator
     */
    class YourValidator implements ValidatorInterface
    {
        /**
         * Validator function, handle javascript or not
         *
         * @param string $script
         * @param Http $http
         *
         * @return bool
         */
        public function validate(string $script, Http $http): bool
        {
            // Your code validate
        }
    }
  2. Create Dependency Injection file app/code/Vendor/Module/etc/frontend/di.xml:

    <?xml version="1.0"?>
    
    <config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
            xsi:noNamespaceSchemaLocation="urn:magento:framework:ObjectManager/etc/config.xsd">
    
        <virtualType name="deferJsPassesValidators">
            <arguments>
                <argument name="entityTypes" xsi:type="array">
                    <item name="yourValidationName"
                          xsi:type="object">Vendor\Module\Model\PassesValidator\Validators\YourValidator</item>
                </argument>
            </arguments>
        </virtualType>
    </config>
  3. Run command:

    php bin/magento setup:di:compile