cornerstone icon indicating copy to clipboard operation
cornerstone copied to clipboard

Feature Request: move off of jquery in order to decrease load time and bundle size

Open steve-ross opened this issue 2 years ago • 6 comments

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

image

With JQuery (and granted a lot of other theme files)

image

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'
    },

steve-ross avatar Jan 21 '22 19:01 steve-ross