File size

Introduction

In pro plugin, we aim to provide essential functionalities while keeping the file size minimal for optimal performance. Including the internationalization (intl) library significantly increases the plugin’s size, which might not be necessary for all users. To address this, we have devised a solution to include these files conditionally.

File Sizes

Here is a breakdown of the file sizes:

• Current Pro Plugin: 250kb (zip file)
• Intl Library:
  • intlTelInput.min.js: 29kb
  • utils.js: 253kb
  • Localization files (i18n): 190kb
  • Flag and globe images: 250kb
  • intlTelInput.min.css: 17kb
• Total Size with Intl Library: Additional 500kb

Solution: Separate Intl Library Plugin

To ensure our pro plugin remains lightweight, we have created a separate plugin for the intl library files. This plugin includes all necessary files and can be installed only if needed.

1. Separate Plugin for Intl Library:
   • Contents:
     • intlTelInput.min.js
     • utils.js
     • Localization files (i18n)
     • Flag and globe images
     • intlTelInput.min.css
   • Total Size: Approximately 500kb
2. Conditional Loading:
   • If the intl library plugin is installed:
     • The pro plugin will call the necessary files from this plugin.
   • If the intl library plugin is not installed:
     • The pro plugin will load the intl library from GitHub using the jsdelivr CDN.

Implementation Details

For users who require the intl library, follow these steps:

1. Install the separate intl library plugin.
2. The pro plugin will automatically detect the presence of the intl library plugin and use the files from it.
3. If the intl library plugin is not installed, the pro plugin will load the necessary files from GitHub.

Additional Resources

For more information, you can check out the latest release of the intl library on GitHub: intl-tel-input v23.1.2.

Why We Use Conditional Loading for the Intl Library

The (intl) library adds 500kb just to load a single input number field, which triples the plugin size. Therefore, we only include this feature for users who specifically need to add an intl tel input field in the greetings form. This approach keeps the plugin lightweight for those who don’t need this feature.

Why We Use This Approach:

• Optimized Performance: Keeping the core plugin size minimal ensures faster load times and better performance for all users.
• Conditional Loading: Only users who need the intl library will download the extra 500kb, avoiding unnecessary bulk for others.
• Flexibility: Users have the choice to install the intl library plugin or rely on CDN loading, depending on their needs.

By implementing this solution, we cater to the needs of all our customers efficiently, ensuring a streamlined and responsive experience without compromising on essential features.