Is there a way to optimize the delete function script ?

[jrbecart]

For each row the delete javascript script returned in ajax is around 3kb (3000 bytes)
In most cases it's more than 50-75% of the whole data size returned.

Since they are all identical for each row can the script be moved somewhere else?
This will improve a little bit the performance of the request.

I tried to put it in datatables_logic.blade.php and it works fine but there is probably a better place.

  @if ($crud->hasAccess('delete'))
  <script>
    if (typeof deleteEntry != 'function') {
      $("[data-button-type=delete]").unbind('click');

      function deleteEntry(button) {
      // ask for confirmation before deleting an item
      // e.preventDefault();
      var button = $(button);
      var route = button.attr('data-route');
      var row = $("#crudTable a[data-route='"+route+"']").closest('tr');

      swal({
        title: "{!! trans('backpack::base.warning') !!}",
        text: "{!! trans('backpack::crud.delete_confirm') !!}",
        icon: "warning",
        buttons: {
          cancel: {
          text: "{!! trans('backpack::crud.cancel') !!}",
          value: null,
          visible: true,
          className: "bg-secondary",
          closeModal: true,
        },
          delete: {
          text: "{!! trans('backpack::crud.delete') !!}",
          value: true,
          visible: true,
          className: "bg-danger",
        }
        },
      }).then((value) => {
        if (value) {
          $.ajax({
              url: route,
              type: 'DELETE',
              success: function(result) {
                  if (result == 1) {
                      // Show a success notification bubble
                      new Noty({
                          type: "success",
                          text: "{!! '<strong>'.trans('backpack::crud.delete_confirmation_title').'</strong><br>'.trans('backpack::crud.delete_confirmation_message') !!}"
                        }).show();

                      // Hide the modal, if any
                      $('.modal').modal('hide');

                      // Remove the details row, if it is open
                      if (row.hasClass("shown")) {
                          row.next().remove();
                      }

                      // Remove the row from the datatable
                      row.remove();
                  } else {
                      // if the result is an array, it means 
                      // we have notification bubbles to show
                      if (result instanceof Object) {
                        // trigger one or more bubble notifications 
                        Object.entries(result).forEach(function(entry, index) {
                          var type = entry[0];
                          entry[1].forEach(function(message, i) {
                          new Noty({
                              type: type,
                              text: message
                            }).show();
                          });
                        });
                      } else {// Show an error alert
                        swal({
                          title: "{!! trans('backpack::crud.delete_confirmation_not_title') !!}",
                                text: "{!! trans('backpack::crud.delete_confirmation_not_message') !!}",
                          icon: "error",
                          timer: 4000,
                          buttons: false,
                        });
                      }			          	  
                  }
              },
              error: function(result) {
                  // Show an alert with the result
                  swal({
                      title: "{!! trans('backpack::crud.delete_confirmation_not_title') !!}",
                          text: "{!! trans('backpack::crud.delete_confirmation_not_message') !!}",
                      icon: "error",
                      timer: 4000,
                      buttons: false,
                    });
              }
          });
        }
      });

        }
    }

    // make it so that the function above is run after each DataTable draw event
    // crud.addFunctionToDataTablesDrawEventQueue('deleteEntry');
  </script>  
  @endif
`

[jrbecart]

Does anyone have any feedback? 😟

[pxpm]

@jrbecart I think the solution is to do what we do in fields, use the @loadOnce('delete_button_script') to only load the script once, but it needs to be updated to account for that fact, and we setup only one global delete click event that will catch the clicks in all the buttons.

Sorry I haven't had time to focus on this one myself as we are pushing the new 5.1 with some goodies and bug fixes, we can then look back at optimizations.

If you want to contribute and need my help on something please feel free to submit the PR and I give my inputs the best I can.

Cheers

[jrbecart]

I updated to PRO, I will test and let you know if the optimization is still needed.

[jrbecart]

I confirm it's not optimized yet. If you remove the script from the button blade template delete.blade.php and move it somewhere else to load it once, you will have a HUGE improvment in the size of data transferred in the page load or any subsequent ajax call.

For 10 rows it's 27 kb less to transfer (10-3kb)
For 100 rows it's 297 kb less to transfer (100-3kb)
For 1000 rows it's 2997 kb less to transfer (3000 -3kb)

[pxpm]

Hello @jrbecart thanks for the suggestion. Is something that already bothered me in the past, but I was working on something else and didn't prioritize it.

I decided to get a quick win today, I've just submitted a PR that should address this. Laravel-Backpack/CRUD#4834

I've used the @loadOnce directive.

You can test that branch by doing: composer require backpack/crud:"dev-optimize-delete-script as 5.4.99"

Don't forget that if you are overriding the delete button on your app/resources folder you will not get the updated version and need to manually add the changes.

Wish you the best 🎅