cornerstone
cornerstone copied to clipboard
Feature Request: move off of jquery in order to decrease load time and bundle size
Feature Request: Deprecate jQuery
Since we have webpack & polyfills you could move off of requiring jQuery since it increases the bundle size by 100K (even more if you can get rid of lodash (mostly using _.get & filter?)
Comparison when removing the app.js / webpack entry that injects jQuery
bundle: 5.1K chunk: 2.8K
With JQuery (and granted a lot of other theme files)
Steps to reproduce behavior
Some code I've created using vanilla JS:
// vanilla dom-ready event:
export const ready = (fn) => {
if (document.readyState !== 'loading'){
fn();
} else {
document.addEventListener('DOMContentLoaded', fn);
}
}
// vanillaPageManager.js
import { ready } from "./global/dom-ready";
export class SimplePageManager {
constructor(context) {
this.context = context;
}
type() {
return this.constructor.name;
}
onReady() {
}
static load(context) {
const page = new this(context);
ready(() => {
page.onReady.bind(page)();
});
}
}
// landingPageManager
import smoothscroll from 'smoothscroll-polyfill';
import { SimplePageManager } from '../vanillaPageManager';
import { buildAccordian } from './simpleAccordion';
import { headerSmoothScroll } from './headerSmoothScroll';
export class LandingPageManager extends SimplePageManager {
onReady() {
smoothscroll.polyfill();
buildAccordian();
headerSmoothScroll();
}
}
export default LandingPageManager;
// webpack modification
entry: {
main: './assets/js/app.js',
head_async: ['lazysizes', 'bgset'],
polyfills: './assets/js/polyfills.js',
landingPage: './assets/js/landingPage.js'
},