Skip to content

[Issue] Load color picker dependencies only when it is actually used #28477

@ghost

Description

This issue is automatically created based on existing pull request: #28400: Load color picker dependencies only when it is actually used


Preconditions (*)

This is just another performance PR, which focuses on loading only the needed dependencies. This time I am optimizing color picker component and its spectrum and tinycolor dependencies.

Loading mentioned modules dynamically saves us 2 JavaScript requests and 123,6kB (28,3kB gzipped) from downloading and parsing.

This change is covered by unit tests that had to be adjusted to take asynchronous dependencies loading into account.

Steps to reproduce (*)

  1. Verify that spectrum.js and tinycolor.js are no longer loaded by default.
  2. Verify that above modules are loaded and color picker works as expected when used (see comment above to find out how to add it).

Actual Result: ✖️ spectrum.js and tinycolor.js are loaded by default

2020-09-02_12-33

Expected Result: ✔️ spectrum.js and tinycolor.js should no loaded by default.

Questions or comments

While making sure this change doesn't break anything I found out that colorPicker binding is not used anywhere in Magento. The easiest way to get it is to for example add it to app/code/Magento/Catalog/view/adminhtml/ui_component/category_form.xml:

<field name="color_picker_test">
    <argument name="data" xsi:type="array">
        <item name="config" xsi:type="array">
            <item name="component" xsi:type="string">Magento_Ui/js/form/element/color-picker</item>
            <item name="template" xsi:type="string">ui/form/field</item>
            <item name="elementTmpl" xsi:type="string">ui/form/element/color-picker</item>
            <item name="label" xsi:type="string">Background Color (hex)</item>
            <item name="labelVisible" xsi:type="boolean">true</item>
            <item name="visible" xsi:type="boolean">true</item>
            <item name="dataType" xsi:type="string">text</item>
            <item name="formElement" xsi:type="string">input</item>
            <item name="source" xsi:type="string">category_form</item>
        </item>
    </argument>
</field>

and test it in category edit form.

Contribution checklist (*)

  • Pull request has a meaningful description of its purpose
  • All commits are accompanied by meaningful commit messages
  • All new or changed code is covered with unit/integration tests (if applicable)
  • All automated tests passed successfully (all builds are green)

Metadata

Metadata

Assignees

Labels

Component: UiIssue: ConfirmedGate 3 Passed. Manual verification of the issue completed. Issue is confirmedIssue: Format is validGate 1 Passed. Automatic verification of issue format passedIssue: Ready for WorkGate 4. Acknowledged. Issue is added to backlog and ready for developmentPriority: P2A defect with this priority could have functionality issues which are not to expectations.Progress: PR in progressReproduced on 2.4.xThe issue has been reproduced on latest 2.4-develop branchSeverity: S3Affects non-critical data or functionality and does not force users to employ a workaround.Triage: Dev.ExperienceIssue related to Developer Experience and needs help with Triage to Confirm or Reject it

Type

No type

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions