JavaScript

Overview

Dashly-exclusive components are written in JavaScript without any jQuery dependency in order to make it easier to integrate with SPA frameworks such as Angular, React and Vue. None of the plugins use jQuery either. During the build process the JavaScript code from the source folder is minified and moved to the assets folder.

General usage

Most of the JavaScript component files are combined into one file, the final theme javascript file, however the vendor component files are dynamically imported when used on the page.

Dashly uses the code splitting method. Code splitting is one of the most compelling features of webpack. This feature allows you to split your code into various bundles which can then be loaded on demand or in parallel. It can be used to achieve smaller bundles and control resource load prioritization which has a major impact on load time.

A very simple example:

const inputmask = document.querySelectorAll('[data-inputmask]');

if(typeof inputmask != 'undefined' && inputmask.length) {
    import(/* webpackChunkName: 'inputmask' */ 'inputmask')
    .then(({default: Inputmask}) => {
        Inputmask().mask(inputmask);
        
    })
    .catch(console.warn);
}