Merge pull request #1390 from mattolson/STRF-4965

Slimming down Javascript bundle

.eslintrc

@@ -25,6 +25,10 @@
         "import/no-named-as-default": 0,
         "import/no-named-as-default-member": 0
     },
+    "globals": {
+        "$": true,
+        "jQuery": true
+    },
     "env": {
         "es6": true,
         "browser": true

.gitignore

@@ -4,6 +4,8 @@ node_modules/
 assets/css-artifacts
 assets/js/bundle.js
 assets/dist
+vendor/bundle
+.bundle
 *.js.map
 *.zip
 .idea/

.travis.yml

@@ -1,13 +1,12 @@
 language: node_js
 node_js:
   - 6
+  - 8
 sudo: required
 dist: trusty
 install:
-  - bundle install
-  - npm install -g grunt-cli
-  - npm install -g bigcommerce/stencil-cli
+  - bundle install --path vendor/bundle
   - npm install
 script:
-  - grunt check
-  - stencil bundle
+  - npx grunt check
+  - npx stencil bundle

CHANGELOG.md

@@ -2,10 +2,17 @@
 
 ## Draft
 
+- Major performance improvements. Reduce Javascript bundle size from 376kb to 286kb. [#1390](https://github.com/bigcommerce/cornerstone/pull/1390)
 - Fixed breadcrumbs for product and category pages [#1403](https://github.com/bigcommerce/cornerstone/pull/1403)
 - Send GA tracking event whenever the last product is removed from the CART[#1409](https://github.com/bigcommerce/cornerstone/pull/1409)
 
 ## 3.0.0 (2018-12-21)
+### Breaking Changes
+- Don't load Cart resource on non-cart pages [#1401](https://github.com/bigcommerce/cornerstone/pull/1401). While the theme itself doesn't depend on
+  this resource on non-cart pages, this can potentially affect any scripts added by the Script Manager or the legacy footer scripts that depend on cart.
+  If this applies to you, you'll want to add the cart resource back on the page types that need it (via front matter).
+
+### Other Changes
 - Added defer tag to addThis and defered execution of related script [#1406](https://github.com/bigcommerce/cornerstone/pull/1406)
 - Fixed compare buttons for product list display [#1384](https://github.com/bigcommerce/cornerstone/pull/1384)
 - Remove unnecessary API call to get cookie notification status [#1380](https://github.com/bigcommerce/cornerstone/pull/1380)
@@ -16,7 +23,6 @@
 - Only show cookie privacy notice for EU IP addresses [#1381](https://github.com/bigcommerce/cornerstone/pull/1381)
 - Move Cart Quantity header value to a FE API call [#1379](https://github.com/bigcommerce/cornerstone/pull/1379)
 - Make display of quantity selection box on PDP configurable. [#1398](https://github.com/bigcommerce/cornerstone/pull/1398)
-- Don't load Cart resource on non-Cart pages [#1401](https://github.com/bigcommerce/cornerstone/pull/1401)
 - Remove deprecated fields - delivery and event date, and configurable fields. [#1407](https://github.com/bigcommerce/cornerstone/pull/1407)
 
 ## 2.6.0 (2018-11-05)

assets/js/app.js

@@ -1,12 +1,11 @@
 __webpack_public_path__ = window.__webpack_public_path__; // eslint-disable-line
 
-import 'babel-polyfill';
-import $ from 'jquery';
-import 'jquery-migrate';
 import Global from './theme/global';
 
 const getAccount = () => import('./theme/account');
 const getLogin = () => import('./theme/auth');
+const noop = null;
+
 const pageClasses = {
     account_orderstatus: getAccount,
     account_order: getAccount,
@@ -28,27 +27,27 @@ const pageClasses = {
     createaccount: getLogin,
     getnewpassword: getLogin,
     forgotpassword: getLogin,
-    blog: () => import('./theme/blog'),
-    blog_post: () => import('./theme/blog-post'),
+    blog: noop,
+    blog_post: noop,
     brand: () => import('./theme/brand'),
-    brands: () => import('./theme/brands'),
+    brands: noop,
     cart: () => import('./theme/cart'),
     category: () => import('./theme/category'),
     compare: () => import('./theme/compare'),
     page_contact_form: () => import('./theme/contact-us'),
-    error: () => import('./theme/errors'),
-    404: () => import('./theme/404-error'),
+    error: noop,
+    404: noop,
     giftcertificates: () => import('./theme/gift-certificate'),
     giftcertificates_balance: () => import('./theme/gift-certificate'),
     giftcertificates_redeem: () => import('./theme/gift-certificate'),
-    default: () => import('./theme/home'),
-    page: () => import('./theme/page'),
+    default: noop,
+    page: noop,
     product: () => import('./theme/product'),
     amp_product_options: () => import('./theme/product'),
     search: () => import('./theme/search'),
-    rss: () => import('./theme/rss'),
-    sitemap: () => import('./theme/sitemap'),
-    newsletter_subscribe: () => import('./theme/subscribe'),
+    rss: noop,
+    sitemap: noop,
+    newsletter_subscribe: noop,
     wishlist: () => import('./theme/wishlist'),
     wishlists: () => import('./theme/wishlist'),
 };
@@ -64,32 +63,35 @@ const customClasses = {};
  */
 window.stencilBootstrap = function stencilBootstrap(pageType, contextJSON = null, loadGlobal = true) {
     const context = JSON.parse(contextJSON || '{}');
-    const template = context.template;
-    const templateCheck = Object.keys(customClasses).indexOf(template);
 
     return {
         load() {
-            $(async () => {
+            $(() => {
                 // Load globals
                 if (loadGlobal) {
                     Global.load(context);
                 }
 
+                const importPromises = [];
+
                 // Find the appropriate page loader based on pageType
                 const pageClassImporter = pageClasses[pageType];
                 if (typeof pageClassImporter === 'function') {
-                    const PageClass = (await pageClassImporter()).default;
-                    PageClass.load(context);
+                    importPromises.push(pageClassImporter());
                 }
 
-                if (templateCheck > -1) {
-                    // Find the appropriate page loader based on template
-                    const customClassImporter = customClasses[template];
-                    if (typeof customClassImporter === 'function') {
-                        const CustomClass = (await customClassImporter()).default;
-                        CustomClass.load(context);
-                    }
+                // See if there is a page class default for a custom template
+                const customTemplateImporter = customClasses[context.template];
+                if (typeof customTemplateImporter === 'function') {
+                    importPromises.push(customTemplateImporter());
                 }
+
+                // Wait for imports to resolve, then call load() on them
+                Promise.all(importPromises).then(imports => {
+                    imports.forEach(imported => {
+                        imported.default.load(context);
+                    });
+                });
             });
         },
     };

assets/js/test-unit/theme/cart.spec.js

@@ -1,10 +1,8 @@
 import $ from 'jquery'
 import utils from '@bigcommerce/stencil-utils';
 import Cart from '../../theme/cart.js';
-import * as SweetAlert from 'sweetalert2';
 
 var dataSpy;
-var swalSpy;
 var UpdateSpy;
 var c = new Cart();
 beforeEach(function() {

assets/js/theme/account.js

@@ -1,13 +1,12 @@
 import PageManager from './page-manager';
 import _ from 'lodash';
-import $ from 'jquery';
 import nod from './common/nod';
 import Wishlist from './wishlist';
 import validation from './common/form-validation';
 import stateCountry from './common/state-country';
 import { classifyForm, Validators, insertStateHiddenField } from './common/form-utils';
 import { creditCardType, storeInstrument, Validators as CCValidators, Formatters as CCFormatters } from './common/payment-method';
-import swal from 'sweetalert2';
+import swal from './global/sweet-alert';
 
 export default class Account extends PageManager {
     constructor(context) {

assets/js/theme/auth.js

@@ -1,6 +1,5 @@
 import PageManager from './page-manager';
 import stateCountry from './common/state-country';
-import $ from 'jquery';
 import nod from './common/nod';
 import validation from './common/form-validation';
 import forms from './common/models/forms';

assets/js/theme/brand.js

@@ -1,10 +1,12 @@
 import { hooks } from '@bigcommerce/stencil-utils';
 import CatalogPage from './catalog';
-import $ from 'jquery';
+import compareProducts from './global/compare-products';
 import FacetedSearch from './common/faceted-search';
 
 export default class Brand extends CatalogPage {
     onReady() {
+        compareProducts(this.context.urls);
+
         if ($('#facetedSearch').length > 0) {
             this.initFacetedSearch();
         } else {

assets/js/theme/cart.js

@@ -1,11 +1,10 @@
 import PageManager from './page-manager';
-import $ from 'jquery';
 import _ from 'lodash';
 import giftCertCheck from './common/gift-certificate-validator';
 import utils from '@bigcommerce/stencil-utils';
 import ShippingEstimator from './cart/shipping-estimator';
 import { defaultModal } from './global/modal';
-import swal from 'sweetalert2';
+import swal from './global/sweet-alert';
 
 export default class Cart extends PageManager {
     onReady() {

assets/js/theme/cart/shipping-estimator.js

@@ -1,9 +1,8 @@
-import $ from 'jquery';
 import stateCountry from '../common/state-country';
 import nod from '../common/nod';
 import utils from '@bigcommerce/stencil-utils';
 import { Validators } from '../common/form-utils';
-import swal from 'sweetalert2';
+import swal from '../global/sweet-alert';
 
 export default class ShippingEstimator {
     constructor($element) {

assets/js/theme/catalog.js

@@ -1,5 +1,4 @@
 import PageManager from './page-manager';
-import $ from 'jquery';
 import urlUtils from './common/url-utils';
 import Url from 'url';
 

assets/js/theme/category.js

@@ -1,10 +1,12 @@
 import { hooks } from '@bigcommerce/stencil-utils';
 import CatalogPage from './catalog';
-import $ from 'jquery';
+import compareProducts from './global/compare-products';
 import FacetedSearch from './common/faceted-search';
 
 export default class Category extends CatalogPage {
     onReady() {
+        compareProducts(this.context.urls);
+
         if ($('#facetedSearch').length > 0) {
             this.initFacetedSearch();
         } else {

assets/js/theme/common/carousel.js

@@ -1,4 +1,3 @@
-import $ from 'jquery';
 import 'slick-carousel';
 
 export default function () {
@@ -10,8 +9,8 @@ export default function () {
 
     // Alternative image styling for IE, which doesn't support objectfit
     if (typeof document.documentElement.style.objectFit === 'undefined') {
-        $('.heroCarousel-slide').each(() => {
-            const $container = $(this);
+        $('.heroCarousel-slide').each((index, element) => {
+            const $container = $(element);
             const imgUrl = $container.find('img').data('lazy');
 
             if (imgUrl) {

assets/js/theme/common/collapsible-group.js

@@ -1,4 +1,3 @@
-import $ from 'jquery';
 import { CollapsibleEvents } from '../common/collapsible';
 
 const PLUGIN_KEY = 'collapsible-group';

assets/js/theme/common/collapsible.js

@@ -1,4 +1,3 @@
-import $ from 'jquery';
 import _ from 'lodash';
 import mediaQueryListFactory from './media-query-list';
 

assets/js/theme/common/faceted-search.js

@@ -1,5 +1,4 @@
 import { hooks, api } from '@bigcommerce/stencil-utils';
-import $ from 'jquery';
 import _ from 'lodash';
 import Url from 'url';
 import urlUtils from './url-utils';

assets/js/theme/common/form-utils.js

@@ -1,4 +1,3 @@
-import $ from 'jquery';
 import _ from 'lodash';
 import nod from './nod';
 import forms from './models/forms';

assets/js/theme/common/form-validation.js

@@ -1,5 +1,3 @@
-import $ from 'jquery';
-
 /**
  * Validate that the given date for the day/month/year select inputs is within potential range
  * @param $formField

assets/js/theme/common/nod-functions/min-max-validate.js

@@ -1,5 +1,4 @@
 import _ from 'lodash';
-import $ from 'jquery';
 
 function minMaxValidate(minInputSelector, maxInputSelector) {
     function validate(cb) {

assets/js/theme/common/payment-method.js

@@ -1,4 +1,3 @@
-import $ from 'jquery';
 import creditcards from 'creditcards';
 
 /**

assets/js/theme/common/product-details.js

@@ -1,11 +1,9 @@
-import $ from 'jquery';
 import utils from '@bigcommerce/stencil-utils';
 import 'foundation-sites/js/foundation/foundation';
 import 'foundation-sites/js/foundation/foundation.reveal';
 import ImageGallery from '../product/image-gallery';
-import modalFactory from '../global/modal';
+import modalFactory, { showAlertModal } from '../global/modal';
 import _ from 'lodash';
-import swal from 'sweetalert2';
 import Wishlist from '../wishlist';
 
 export default class ProductDetails {
@@ -370,10 +368,7 @@ export default class ProductDetails {
                 const tmp = document.createElement('DIV');
                 tmp.innerHTML = errorMessage;
 
-                return swal({
-                    text: tmp.textContent || tmp.innerText,
-                    type: 'error',
-                });
+                return showAlertModal(tmp.textContent || tmp.innerText);
             }
 
             // Open preview modal and update content

assets/js/theme/common/select-option-plugin.js

@@ -1,5 +1,3 @@
-import $ from 'jquery';
-
 /**
  * Visually hides the option from user by moving option to an invisible
  * and disabled select placeholder element.

assets/js/theme/common/state-country.js

@@ -1,8 +1,7 @@
-import $ from 'jquery';
 import utils from '@bigcommerce/stencil-utils';
 import _ from 'lodash';
 import { insertStateHiddenField } from './form-utils';
-import swal from 'sweetalert2';
+import { showAlertModal } from '../global/modal';
 
 /**
  * If there are no options from bcapp, a text field will be sent. This will create a select element to hold options after the remote request.
@@ -130,11 +129,7 @@ export default function (stateElement, context = {}, options, callback) {
 
         utils.api.country.getByName(countryName, (err, response) => {
             if (err) {
-                swal({
-                    text: context.state_error,
-                    type: 'error',
-                });
-
+                showAlertModal(context.state_error);
                 return callback(err);
             }
 

assets/js/theme/common/url-utils.js

@@ -1,4 +1,3 @@
-import $ from 'jquery';
 import Url from 'url';
 
 const urlUtils = {