Suggestion for developers.

  • Resolved Samuel

    (@martdsam)


    4 years, 7 months ago

    I really liked the plugin and all the features offered. Thank you very much for your work.

    However, the main function I wanted to use (forms) became unviable due to the huge amount of CSS (200kb +) and Javascript (1.4mb +) that are included.

    It would be nice to have a cleaner option without any css and javascript. That way, the field validation and styling part would be up to the developer and the plugin responsible for fetching the HTML and the backend part. The developer would only inform the URL of the back end in ajax and wait for a response, it would be with an API.

    I don’t know how everything works behind the plugin so I don’t know what the possibility of this being implemented, I’m just passing on my idea, because I like extremely clean sites and without unnecessary things.

Viewing 5 replies - 1 through 5 (of 5 total)
  • Plugin Author Konrad Chmielewski

    (@hwk-fr)

    Hello Samuel,

    Thanks for the feedback. I’m not sure to know where you get those files information from, but ACF Extended JS files represent 110ko and not 1.4mb.

    About your request, Dynamic Forms (and ACF Forms in general) are heavily tied to ACF logic. As forms can contain any possible fields, that’s why ACF (and ACF Extended) load all JS and CSS on form render. It is possible to manually de-enqueue those CSS & JS files, but it would require to re-create all the validation process and styling, which is a dead-end in my opinion.

    If you’re interested, here is the code to de-enqueue ACF styles on the front-end. You can follow this methodology to de-enqueue others ACF + ACF Forms CSS/JS files:

    
add_action('wp_enqueue_scripts', 'acf_form_deregister_styles');
function acf_form_deregister_styles(){
    
    // Deregister ACF Form style
    wp_deregister_style('acf-global');
    wp_deregister_style('acf-input');
    
    // Avoid dependency conflict
    wp_register_style('acf-global', false);
    wp_register_style('acf-input', false);
    
}

    Note: I plan to minify CSS/JS files in the future to lower CSS/JS footprint.

    Hope it helps!

    Have a nice day.

    Regards.

    Thread Starter Samuel

    (@martdsam)

    Hi, thanks for the reply.

    I also found 1.4mb of javascript very strange, but it’s real.

    When I call the <?php acfe_form(); ?>

    The following list of scripts is added to my front end:

    wp-emoji-release.min.js?ver=5.4 200 script (index):11 14.2 kB
    wp-embed.min.js?ver=5.4 200 script (index) 1.7 kB
    jquery.js?ver=1.12.4-wp 200 script (index) 97.2 kB
    jquery-migrate.min.js?ver=1.4.1 200 script (index) 10.4 kB
    core.min.js?ver=1.11.4 200 script (index) 4.2 kB
    widget.min.js?ver=1.11.4 200 script (index) 7.1 kB
    mouse.min.js?ver=1.11.4 200 script (index) 3.5 kB
    sortable.min.js?ver=1.11.4 200 script (index) 25.2 kB
    resizable.min.js?ver=1.11.4 200 script (index) 18.7 kB
    acf-input.min.js?ver=5.8.9 200 script (index) 120 kB
    acf-extended.js?ver=0.8.5.5 200 script (index) 8.5 kB
    acf-extended-fields.js?ver=0.8.5.5 200 script (index) 43.0 kB
    acf-extended-form.js?ver=0.8.5.5 200 script (index) 6.8 kB
    acf-pro-input.min.js?ver=5.8.9 200 script (index) 18.8 kB
    select2.full.min.js?ver=4.0 200 script (index) 75.3 kB
    datepicker.min.js?ver=1.11.4 200 script (index) 36.7 kB
    jquery-ui-timepicker-addon.min.js?ver=1.6.1 200 script (index) 41.4 kB
    draggable.min.js?ver=1.11.4 200 script (index) 19.2 kB
    slider.min.js?ver=1.11.4 200 script (index) 11.2 kB
    jquery.ui.touch-punch.js?ver=0.2.2 200 script (index) 1.5 kB
    iris.min.js?ver=1.0.7 200 script (index) 24.0 kB
    color-picker.min.js?ver=5.4 200 script (index) 3.8 kB
    codemirror.min.js?ver=5.29.1-alpha-ee20357 200 script (index) 586 kB
    underscore.min.js?ver=1.8.3 200 script (index) 16.5 kB
    code-editor.min.js?ver=5.4 200 script (index) 3.4 kB
    acf-extended-repeater.js?ver=0.8.5.5 200 script (index) 1.8 kB
    acf-extended-fc.js?ver=0.8.5.5 200 script (index) 15.0 kB
    acf-extended-fc-control.js?ver=0.8.5.5 200 script (index) 22.2 kB
    acf-extended-fc-modal-select.js?ver=0.8.5.5 200 script (index) 8.0 kB
    acf-extended-fc-modal-edit.js?ver=0.8.5.5 200 script (index) 2.4 kB

    I know that many of them are part of wordpress itself, but on my front-end I remove all standard wordpress scripts and when I use the acfe_form() function Everything is inserted again. I guarantee you that none of these scripts existed in my project before adding this function.

    Thanks for your attention.

    Plugin Author Konrad Chmielewski

    (@hwk-fr)

    Hello,

    Those files are dependencies of JS loaded by ACF during initialization (Datepicker, WYSIWYG editor JS etc…). ACF needs to load them when using ACF Forms, because as I mentioned earlier, it must prepare any possible field render.

    If you prefer handcrafted, customized & optimized development, you should probably create your own form, because that behavior is inherant to ACF logic.

    Regards.

    Plugin Author Konrad Chmielewski

    (@hwk-fr)

    Note: Here is the documentation of ACF Form: https://www.advancedcustomfields.com/resources/acf_form/

    ACF Extended Dynamic Form is basically a wrapper of that native feature, which add a bunch of settings & some advanced logic over it. What you’re looking for is the acf_form_head() function, which actually enqueue all JS/CSS files needed.

    With ACF Extended, you don’t need to use this function because it is automatically added.

    Regards.

    Thread Starter Samuel

    (@martdsam)

    Okay, now I understand.

    Thank you very much for the clarifications. I really believe that I will have to do everything manually.

    Thanks.

Viewing 5 replies - 1 through 5 (of 5 total)
  • The topic ‘Suggestion for developers.’ is closed to new replies.