From 970d0e5ca774bcec5cf8226a6672b2d576fbac53 Mon Sep 17 00:00:00 2001 From: Matt Olson Date: Thu, 8 Mar 2018 21:07:46 -0800 Subject: [PATCH 1/8] STRF-4599: Remove Modernizr * Modernizr is a blocking script that has very little benefit for us. Removing this script improves page responsiveness. * We used Modernizr via the css classes `csscolumns`, `flexbox`, `objectfit`, and `js`. * The `csscolumns` class was used for productMasonry for older browsers, but since then all of our supported browsers support css columns. There is one small problem with Firefox: it does not support break-inside, but it does support page-break-inside, which does the same thing. See https://caniuse.com/#feat=multicolumn * The `flexbox` class is unused * The `objectfit` class is used by carousel. Reimplmented without using Modernizer. The previous implmentation put a background image on the wrapper div and then hid it if object-fit is supported. The new implementation does not put the background image on the wrapper div by default, but instead assumes that your browser supports object-fit (all ours do except for IE). For IE, we use javascript to copy the image source from the image tag to the background image of the wrapper div and then hide the image. * The `js` class is used for a few things in css, so mimic this behavior with a simple inline script. --- assets/js/theme/common/carousel.js | 12 +++++ assets/modernizr-custom.js | 3 -- .../stencil/heroCarousel/_heroCarousel.scss | 50 +++++++++---------- .../scss/layouts/products/_productGrid.scss | 20 +------- templates/components/carousel.html | 3 +- templates/layout/amp-iframe.html | 6 ++- templates/layout/base.html | 6 ++- 7 files changed, 47 insertions(+), 53 deletions(-) delete mode 100644 assets/modernizr-custom.js diff --git a/assets/js/theme/common/carousel.js b/assets/js/theme/common/carousel.js index 7844286858..05048ea415 100644 --- a/assets/js/theme/common/carousel.js +++ b/assets/js/theme/common/carousel.js @@ -7,4 +7,16 @@ export default function () { if ($carousel.length) { $carousel.slick(); } + + // Alternative image styling for IE, which doesn't support objectfit + if (typeof document.documentElement.style.objectFit === 'undefined') { + $('.heroCarousel-slide').each(() => { + const $container = $(this); + const imgUrl = $container.find('img').data('lazy'); + + if (imgUrl) { + $container.css('backgroundImage', `url(${imgUrl})`).addClass('compat-object-fit'); + } + }); + } } diff --git a/assets/modernizr-custom.js b/assets/modernizr-custom.js deleted file mode 100644 index 06718abbb6..0000000000 --- a/assets/modernizr-custom.js +++ /dev/null @@ -1,3 +0,0 @@ -/*! modernizr 3.5.0 (Custom Build) | MIT * - * https://modernizr.com/download/?-csscolumns-flexbox-objectfit-setclasses !*/ - !function(e,n,t){function r(e,n){return typeof e===n}function o(){var e,n,t,o,s,i,a;for(var l in x)if(x.hasOwnProperty(l)){if(e=[],n=x[l],n.name&&(e.push(n.name.toLowerCase()),n.options&&n.options.aliases&&n.options.aliases.length))for(t=0;td;d++)if(m=e[d],y=j.style[m],a(m,"-")&&(m=i(m)),j.style[m]!==t){if(s||r(o,"undefined"))return f(),"pfx"==n?m:!0;try{j.style[m]=o}catch(g){}if(j.style[m]!=y)return f(),"pfx"==n?m:!0}return f(),!1}function h(e,n,t,o,s){var i=e.charAt(0).toUpperCase()+e.slice(1),a=(e+" "+k.join(i+" ")+i).split(" ");return r(n,"string")||r(n,"undefined")?y(a,n,o,s):(a=(e+" "+P.join(i+" ")+i).split(" "),u(a,n,t))}function g(e,n,r){return h(e,t,t,n,r)}var C=[],x=[],S={_version:"3.5.0",_config:{classPrefix:"",enableClasses:!0,enableJSClass:!0,usePrefixes:!0},_q:[],on:function(e,n){var t=this;setTimeout(function(){n(t[e])},0)},addTest:function(e,n,t){x.push({name:e,fn:n,options:t})},addAsyncTest:function(e){x.push({name:null,fn:e})}},Modernizr=function(){};Modernizr.prototype=S,Modernizr=new Modernizr;var w=n.documentElement,b="svg"===w.nodeName.toLowerCase(),_="Moz O ms Webkit",k=S._config.usePrefixes?_.split(" "):[];S._cssomPrefixes=k;var E=function(n){var r,o=prefixes.length,s=e.CSSRule;if("undefined"==typeof s)return t;if(!n)return!1;if(n=n.replace(/^@/,""),r=n.replace(/-/g,"_").toUpperCase()+"_RULE",r in s)return"@"+n;for(var i=0;o>i;i++){var a=prefixes[i],l=a.toUpperCase()+"_"+r;if(l in s)return"@-"+a.toLowerCase()+"-"+n}return!1};S.atRule=E;var P=S._config.usePrefixes?_.toLowerCase().split(" "):[];S._domPrefixes=P;var T={elem:l("modernizr")};Modernizr._q.push(function(){delete T.elem});var j={style:T.elem.style};Modernizr._q.unshift(function(){delete j.style}),S.testAllProps=h,S.testAllProps=g,function(){Modernizr.addTest("csscolumns",function(){var e=!1,n=g("columnCount");try{e=!!n,e&&(e=new Boolean(e))}catch(t){}return e});for(var e,n,t=["Width","Span","Fill","Gap","Rule","RuleColor","RuleStyle","RuleWidth","BreakBefore","BreakAfter","BreakInside"],r=0;r {{#each carousel.slides}} -
+
{{alt_text}} {{#if heading}} diff --git a/templates/layout/amp-iframe.html b/templates/layout/amp-iframe.html index 665c57f6d0..5dcda95dd5 100644 --- a/templates/layout/amp-iframe.html +++ b/templates/layout/amp-iframe.html @@ -9,7 +9,11 @@ {{{stylesheet '/assets/css/theme.css'}}} {{ getFontsCollection }} - + + {{{ head.scripts }}} diff --git a/templates/layout/base.html b/templates/layout/base.html index 0a9acfe617..6e02302f7c 100644 --- a/templates/layout/base.html +++ b/templates/layout/base.html @@ -9,7 +9,11 @@ {{{stylesheet '/assets/css/theme.css'}}} {{ getFontsCollection }} - + + {{{head.scripts}}} {{{head.rsslinks}}} From 886ce4b727ddc8a1bcf65617dc7be1e74115a28b Mon Sep 17 00:00:00 2001 From: Erik Christensen Date: Thu, 8 Mar 2018 16:00:00 -0800 Subject: [PATCH 2/8] STRF-4607: Save proper amount of space for carousel * Add wrapper div for hero carousel that has the appropriate height for the image to be displayed after lazy loading. * This improves frontend performance because the browser will be less likely to load images below the fold immediately. --- .../stencil/heroCarousel/_heroCarousel.scss | 25 +++++++++---------- templates/components/carousel.html | 8 +++--- 2 files changed, 17 insertions(+), 16 deletions(-) diff --git a/assets/scss/components/stencil/heroCarousel/_heroCarousel.scss b/assets/scss/components/stencil/heroCarousel/_heroCarousel.scss index 4a2b19a1c5..8af00c526c 100644 --- a/assets/scss/components/stencil/heroCarousel/_heroCarousel.scss +++ b/assets/scss/components/stencil/heroCarousel/_heroCarousel.scss @@ -9,15 +9,11 @@ // object-fit and instead copy the image src to a the background-image of the // wrapper div and add the compat-object-fit class. // -// 2. With JS on, minimise the jump in content as you progressively enhance the -// slider. Slowly fade and slide the height, instead of a jump in collapsing -// hidden content. -// -// 3. Visually overrides the top margin for '.body' defined in _body.scss. +// 2. Visually overrides the top margin for '.body' defined in _body.scss. // The '.body' top margin creates space between the header and page content. // However, on the homepage, we want the carousel to be flush with the header. // -// 4. Allows image to scale on large screens while preventing the top and bottom +// 3. Allows image to scale on large screens while preventing the top and bottom // from becoming cut off. // ----------------------------------------------------------------------------- @@ -29,18 +25,15 @@ margin-top: -(spacing("single") + spacing("base")); // 3 } - .js & { // 2 - max-height: remCalc(0); - opacity: 0; - overflow: hidden; - transition: all 600ms ease-out; - } - &.slick-initialized { // 2 max-height: remCalc(1000); opacity: 1; } + &:not(.slick-initialized) :not(.heroCarousel-slide--first).heroCarousel-slide { + display: none; + } + .slick-next, .slick-prev { top: 50%; @@ -90,6 +83,12 @@ } } + .heroCarousel-image-wrapper { + @include breakpoint("medium") { + max-height: remCalc(600px); + } + } + &.compat-object-fit { // 1 background-size: cover; background-position: 50%; diff --git a/templates/components/carousel.html b/templates/components/carousel.html index f6e43420f1..6d10f6d8a1 100644 --- a/templates/components/carousel.html +++ b/templates/components/carousel.html @@ -10,9 +10,11 @@ }'> {{#each carousel.slides}} -
- {{alt_text}} +
+
+ {{alt_text}} +
{{#if heading}} {{> components/carousel-content show_background=true}} {{else}} From 3d4d715aadc63d05c3ca5d1d14d667aa10b72417 Mon Sep 17 00:00:00 2001 From: Juned Kazi Date: Fri, 9 Mar 2018 11:04:30 -0800 Subject: [PATCH 3/8] STRF-4605: Add dns prefetch & preconnect * Add dns prefetch & preconnect to core resources that we know we will need -- fonts, cdn, jirafe, etc --- templates/layout/base.html | 8 ++++++++ 1 file changed, 8 insertions(+) diff --git a/templates/layout/base.html b/templates/layout/base.html index 6e02302f7c..f7c70996d6 100644 --- a/templates/layout/base.html +++ b/templates/layout/base.html @@ -2,9 +2,17 @@ {{ head.title }} + + + + + + + {{{ head.meta_tags }}} {{{ head.config }}} {{#block "head"}} {{/block}} + {{{stylesheet '/assets/css/theme.css'}}} From 31bdddbf64293d85192cae00e966d531f527b150 Mon Sep 17 00:00:00 2001 From: Matt Olson Date: Sat, 10 Mar 2018 15:43:00 -0800 Subject: [PATCH 4/8] STRF-4603: Webpack 4 + Javascript optimizations * Upgrade to webpack 4 * Clean up stencil bootstrap * Simplify interface for PageManager and get rid of async library dependency * Get rid of html5-history-api library dependency (no longer needed) * Get rid of fastclick library dependency (no longer needed) * Upgrade several babel dependencies * Separate webpack config into common, dev, prod, and add npm scripts to build * Get rid of minifications in babel loader, instead rely on webpack * Get rid of LoaderOptionsPlugin * Get rid of CommonsChunkPlugin (webpack 4 will automaticaly do this for prod) --- .travis.yml | 14 +++++----- assets/js/app.js | 30 +++++--------------- assets/js/theme/account.js | 10 +++---- assets/js/theme/auth.js | 9 ++---- assets/js/theme/brand.js | 2 +- assets/js/theme/cart.js | 4 +-- assets/js/theme/category.js | 2 +- assets/js/theme/common/product-details.js | 3 +- assets/js/theme/compare.js | 2 +- assets/js/theme/contact-us.js | 2 +- assets/js/theme/gift-certificate.js | 3 +- assets/js/theme/global.js | 15 +--------- assets/js/theme/page-manager.js | 29 ++++++------------- assets/js/theme/product.js | 12 +------- assets/js/theme/search.js | 2 +- assets/js/theme/wishlist.js | 11 ++------ karma.conf.js | 2 +- package.json | 24 ++++++++-------- stencil.conf.js | 23 ++++----------- webpack.conf.js => webpack.common.js | 34 ++++++----------------- webpack.dev.js | 13 +++++++++ webpack.prod.js | 12 ++++++++ 22 files changed, 97 insertions(+), 161 deletions(-) rename webpack.conf.js => webpack.common.js (64%) create mode 100644 webpack.dev.js create mode 100644 webpack.prod.js diff --git a/.travis.yml b/.travis.yml index ace8af2260..c71d4b7b3e 100644 --- a/.travis.yml +++ b/.travis.yml @@ -1,13 +1,13 @@ language: node_js node_js: -- 4 + - 6 sudo: required dist: trusty install: -- bundle install -- npm install -g grunt-cli -- npm install -g bigcommerce/stencil-cli -- npm install + - bundle install + - npm install -g grunt-cli + - npm install -g bigcommerce/stencil-cli + - npm install script: -- grunt check -- stencil bundle + - grunt check + - stencil bundle diff --git a/assets/js/app.js b/assets/js/app.js index 6db94f1076..902b8d5bbd 100644 --- a/assets/js/app.js +++ b/assets/js/app.js @@ -63,32 +63,16 @@ window.stencilBootstrap = function stencilBootstrap(pageType, contextJSON = null return { load() { $(async () => { - let globalClass; - let pageClass; - let PageClass; - - // Finds the appropriate class from the pageType. - const pageClassImporter = pageClasses[pageType]; - if (typeof pageClassImporter === 'function') { - PageClass = (await pageClassImporter()).default; - } - + // Load globals if (loadGlobal) { - globalClass = new Global(); - globalClass.context = context; + Global.load(context); } - if (PageClass) { - pageClass = new PageClass(context); - pageClass.context = context; - } - - if (globalClass) { - globalClass.load(); - } - - if (pageClass) { - pageClass.load(); + // Find the appropriate page loader based on pageType + const pageClassImporter = pageClasses[pageType]; + if (typeof pageClassImporter === 'function') { + const PageClass = (await pageClassImporter()).default; + PageClass.load(context); } }); }, diff --git a/assets/js/theme/account.js b/assets/js/theme/account.js index 6bc14e63dd..6f281d509e 100644 --- a/assets/js/theme/account.js +++ b/assets/js/theme/account.js @@ -8,14 +8,14 @@ import { classifyForm, Validators, insertStateHiddenField } from './common/form- import swal from 'sweetalert2'; export default class Account extends PageManager { - constructor() { - super(); + constructor(context) { + super(context); this.$state = $('[data-field-type="State"]'); this.$body = $('body'); } - loaded(next) { + onReady() { const $editAccountForm = classifyForm('form[data-edit-account-form]'); const $addressForm = classifyForm('form[data-address-form]'); const $inboxForm = classifyForm('form[data-inbox-form]'); @@ -27,7 +27,7 @@ export default class Account extends PageManager { this.passwordRequirements = this.context.passwordRequirements; // Instantiates wish list JS - this.wishlist = new Wishlist(); + Wishlist.load(); if ($editAccountForm.length) { this.registerEditAccountValidation($editAccountForm); @@ -67,8 +67,6 @@ export default class Account extends PageManager { } this.bindDeleteAddress(); - - next(); } /** diff --git a/assets/js/theme/auth.js b/assets/js/theme/auth.js index 876e4fea67..4f1c2472e7 100644 --- a/assets/js/theme/auth.js +++ b/assets/js/theme/auth.js @@ -7,8 +7,8 @@ import forms from './common/models/forms'; import { classifyForm, Validators } from './common/form-utils'; export default class Auth extends PageManager { - constructor() { - super(); + constructor(context) { + super(context); this.formCreateSelector = 'form[data-create-account-form]'; } @@ -167,9 +167,8 @@ export default class Auth extends PageManager { /** * Request is made in this function to the remote endpoint and pulls back the states for country. - * @param next */ - loaded(next) { + onReady() { const $createAccountForm = classifyForm(this.formCreateSelector); const $loginForm = classifyForm('.login-form'); const $forgotPasswordForm = classifyForm('.forgot-password-form'); @@ -193,7 +192,5 @@ export default class Auth extends PageManager { if ($createAccountForm.length) { this.registerCreateAccountValidator($createAccountForm); } - - next(); } } diff --git a/assets/js/theme/brand.js b/assets/js/theme/brand.js index ee3dedbd76..9d897aae28 100644 --- a/assets/js/theme/brand.js +++ b/assets/js/theme/brand.js @@ -4,7 +4,7 @@ import $ from 'jquery'; import FacetedSearch from './common/faceted-search'; export default class Brand extends CatalogPage { - loaded() { + onReady() { if ($('#facetedSearch').length > 0) { this.initFacetedSearch(); } else { diff --git a/assets/js/theme/cart.js b/assets/js/theme/cart.js index 1c6588559e..b222c46bc3 100644 --- a/assets/js/theme/cart.js +++ b/assets/js/theme/cart.js @@ -8,7 +8,7 @@ import { defaultModal } from './global/modal'; import swal from 'sweetalert2'; export default class Cart extends PageManager { - loaded(next) { + onReady() { this.$cartContent = $('[data-cart-content]'); this.$cartMessages = $('[data-cart-status]'); this.$cartTotals = $('[data-cart-totals]'); @@ -16,8 +16,6 @@ export default class Cart extends PageManager { .hide(); // TODO: temporary until roper pulls in his cart components this.bindEvents(); - - next(); } cartUpdate($target) { diff --git a/assets/js/theme/category.js b/assets/js/theme/category.js index 76ee97a312..9086863815 100644 --- a/assets/js/theme/category.js +++ b/assets/js/theme/category.js @@ -4,7 +4,7 @@ import $ from 'jquery'; import FacetedSearch from './common/faceted-search'; export default class Category extends CatalogPage { - loaded() { + onReady() { if ($('#facetedSearch').length > 0) { this.initFacetedSearch(); } else { diff --git a/assets/js/theme/common/product-details.js b/assets/js/theme/common/product-details.js index c34d834f59..6ae2c287cc 100644 --- a/assets/js/theme/common/product-details.js +++ b/assets/js/theme/common/product-details.js @@ -17,7 +17,8 @@ export default class ProductDetails { this.imageGallery.init(); this.listenQuantityChange(); this.initRadioAttributes(); - this.wishlist = new Wishlist().load(); + + Wishlist.load(); const $form = $('form[data-cart-item-add]', $scope); const $productOptionsElement = $('[data-product-option-change]', $form); diff --git a/assets/js/theme/compare.js b/assets/js/theme/compare.js index b1ff241164..679b53be6a 100644 --- a/assets/js/theme/compare.js +++ b/assets/js/theme/compare.js @@ -3,7 +3,7 @@ import $ from 'jquery'; import swal from 'sweetalert2'; export default class Compare extends PageManager { - loaded() { + onReady() { const message = this.context.compareRemoveMessage; $('body').on('click', '[data-comparison-remove]', event => { diff --git a/assets/js/theme/contact-us.js b/assets/js/theme/contact-us.js index 4f58749441..383c464bf9 100644 --- a/assets/js/theme/contact-us.js +++ b/assets/js/theme/contact-us.js @@ -4,7 +4,7 @@ import $ from 'jquery'; import forms from './common/models/forms'; export default class ContactUs extends PageManager { - loaded() { + onReady() { this.registerContactFormValidation(); } diff --git a/assets/js/theme/gift-certificate.js b/assets/js/theme/gift-certificate.js index 1c271bd0db..d039db741b 100644 --- a/assets/js/theme/gift-certificate.js +++ b/assets/js/theme/gift-certificate.js @@ -8,8 +8,7 @@ import { defaultModal } from './global/modal'; export default class GiftCertificate extends PageManager { constructor(context) { - super(); - this.context = context; + super(context); const $certBalanceForm = $('#gift-certificate-balance'); diff --git a/assets/js/theme/global.js b/assets/js/theme/global.js index 5482a874ef..a24bddf4f1 100644 --- a/assets/js/theme/global.js +++ b/assets/js/theme/global.js @@ -1,6 +1,5 @@ import $ from 'jquery'; import './common/select-option-plugin'; -import 'html5-history-api'; import PageManager from './page-manager'; import quickSearch from './global/quick-search'; import currencySelector from './global/currency-selector'; @@ -15,21 +14,10 @@ import maintenanceMode from './global/maintenanceMode'; import carousel from './common/carousel'; import 'lazysizes'; import loadingProgressBar from './global/loading-progress-bar'; -import FastClick from 'fastclick'; import sweetAlert from './global/sweet-alert'; -function fastClick(element) { - return new FastClick(element); -} - export default class Global extends PageManager { - /** - * You can wrap the execution in this method with an asynchronous function map using the async library - * if your global modules need async callback handling. - * @param next - */ - loaded(next) { - fastClick(document.body); + onReady() { quickSearch(); currencySelector(); foundation($(document)); @@ -43,6 +31,5 @@ export default class Global extends PageManager { maintenanceMode(this.context.maintenanceMode); loadingProgressBar(); sweetAlert(); - next(); } } diff --git a/assets/js/theme/page-manager.js b/assets/js/theme/page-manager.js index 3c3979ed6c..29060a8d2a 100644 --- a/assets/js/theme/page-manager.js +++ b/assets/js/theme/page-manager.js @@ -1,35 +1,22 @@ -import async from 'async'; +import $ from 'jquery'; export default class PageManager { constructor(context) { this.context = context; } - before(next) { - next(); - } - - loaded(next) { - next(); + type() { + return this.constructor.name; } - after(next) { - next(); + onReady() { } - type() { - return this.constructor.name; - } + static load(context) { + const page = new this(context); - load() { - async.series([ - this.before.bind(this), // Executed first after constructor() - this.loaded.bind(this), // Main module logic - this.after.bind(this), // Clean up method that can be overridden for cleanup. - ], (err) => { - if (err) { - throw new Error(err); - } + $(document).ready(() => { + page.onReady.bind(page)(); }); } } diff --git a/assets/js/theme/product.js b/assets/js/theme/product.js index ee9c1aad09..56b430aab1 100644 --- a/assets/js/theme/product.js +++ b/assets/js/theme/product.js @@ -16,7 +16,7 @@ export default class Product extends PageManager { this.$reviewLink = $('[data-reveal-id="modal-review-form"]'); } - before(next) { + onReady() { // Listen for foundation modal close events to sanitize URL after review. $(document).on('close.fndtn.reveal', () => { if (this.url.indexOf('#write_review') !== -1 && typeof window.history.replaceState === 'function') { @@ -24,10 +24,6 @@ export default class Product extends PageManager { } }); - next(); - } - - loaded(next) { let validator; // Init collapsible @@ -53,13 +49,7 @@ export default class Product extends PageManager { return false; }); - next(); - } - - after(next) { this.productReviewHandler(); - - next(); } productReviewHandler() { diff --git a/assets/js/theme/search.js b/assets/js/theme/search.js index d63a52b9f1..50843f878d 100644 --- a/assets/js/theme/search.js +++ b/assets/js/theme/search.js @@ -57,7 +57,7 @@ export default class Search extends CatalogPage { urlUtils.goToUrl(url); } - loaded() { + onReady() { const $searchForm = $('[data-advanced-search-form]'); const $categoryTreeContainer = $searchForm.find('[data-search-category-tree]'); const url = Url.parse(window.location.href, true); diff --git a/assets/js/theme/wishlist.js b/assets/js/theme/wishlist.js index 8d2733e408..62bef80d73 100644 --- a/assets/js/theme/wishlist.js +++ b/assets/js/theme/wishlist.js @@ -7,8 +7,8 @@ import { api } from '@bigcommerce/stencil-utils'; import { defaultModal } from './global/modal'; export default class WishList extends PageManager { - constructor() { - super(); + constructor(context) { + super(context); this.options = { template: 'account/add-wishlist', @@ -83,7 +83,7 @@ export default class WishList extends PageManager { }); } - load() { + onReady() { const $addWishListForm = $('.wishlist-form'); if ($addWishListForm.length) { @@ -93,9 +93,4 @@ export default class WishList extends PageManager { this.wishlistDeleteConfirm(); this.wishListHandler(); } - - loaded(next) { - this.load(); - next(); - } } diff --git a/karma.conf.js b/karma.conf.js index de0e552eae..df30f664dd 100644 --- a/karma.conf.js +++ b/karma.conf.js @@ -1,4 +1,4 @@ -var webpackTestConfig = require('./webpack.conf.js'); +var webpackTestConfig = require('./webpack.dev.js'); module.exports = function (config) { config.set({ diff --git a/package.json b/package.json index b0bb1201c2..b773832803 100644 --- a/package.json +++ b/package.json @@ -7,12 +7,9 @@ "license": "MIT", "dependencies": { "@bigcommerce/stencil-utils": "^1.1.2", - "async": "^2.5.0", "babel-polyfill": "^6.26.0", "easyzoom": "^2.5.0", - "fastclick": "^1.0.6", "foundation-sites": "^5.5.3", - "html5-history-api": "^4.2.7", "jquery": "^3.3.1", "jquery-migrate": "^1.4.1", "jstree": "vakata/jstree", @@ -26,15 +23,15 @@ "devDependencies": { "@bigcommerce/citadel": "^2.15.1", "babel-core": "^6.26.0", - "babel-eslint": "^8.0.1", - "babel-loader": "^7.1.2", - "babel-plugin-dynamic-import-webpack": "^1.0.1", - "babel-plugin-lodash": "^3.2.11", + "babel-eslint": "^8.2.2", + "babel-loader": "^7.1.4", + "babel-plugin-dynamic-import-webpack": "^1.0.2", + "babel-plugin-lodash": "^3.3.2", "babel-plugin-syntax-dynamic-import": "^6.18.0", "babel-plugin-transform-regenerator": "^6.26.0", "babel-plugin-transform-runtime": "^6.23.0", - "babel-preset-env": "^1.2.2", - "clean-webpack-plugin": "^0.1.17", + "babel-preset-env": "^1.6.1", + "clean-webpack-plugin": "^0.1.19", "core-js": "^2.5.0", "es6-shim": "^0.35.3", "eslint": "^4.8.0", @@ -62,7 +59,12 @@ "lodash-webpack-plugin": "^0.11.2", "regenerator-runtime": "^0.11.0", "time-grunt": "^1.2.2", - "uglify-js": "^3.0.28", - "webpack": "^3.6.0" + "webpack": "^4.1.1", + "webpack-cli": "^2.0.11", + "webpack-merge": "^4.1.2" + }, + "scripts": { + "build": "webpack --config webpack.prod.js", + "buildDev": "webpack --config webpack.dev.js" } } diff --git a/stencil.conf.js b/stencil.conf.js index ef85515fef..5b68247659 100644 --- a/stencil.conf.js +++ b/stencil.conf.js @@ -1,5 +1,6 @@ var webpack = require('webpack'); -var webpackConfig = require('./webpack.conf.js'); +var devConfig = require('./webpack.dev.js'); +var prodConfig = require('./webpack.prod.js'); /** * Watch options for the core watcher @@ -26,7 +27,7 @@ var watchOptions = { */ function development() { // Rebuild the bundle once at bootup - webpack(webpackConfig).watch({}, err => { + webpack(devConfig).watch({}, err => { if (err) { console.error(err.message, err.details); } @@ -39,23 +40,11 @@ function development() { * Hook into the `stencil bundle` command and build your files before they are packaged as a .zip */ function production() { - webpackConfig.watch = false; - webpackConfig.devtool = false; - webpackConfig.plugins.push(new webpack.LoaderOptionsPlugin({ - minimize: true, - })); - webpackConfig.plugins.push(new webpack.optimize.UglifyJsPlugin({ - comments: false, - compress: { - warnings: true, - }, - sourceMap: false, // Toggle to turn on source maps. - })); - - webpack(webpackConfig).run(err => { + webpack(prodConfig).run(err => { if (err) { console.error(err.message, err.details); - throw err; + process.exit(1); + return; } process.send('done'); diff --git a/webpack.conf.js b/webpack.common.js similarity index 64% rename from webpack.conf.js rename to webpack.common.js index 9ecb68d209..132e7239b8 100644 --- a/webpack.conf.js +++ b/webpack.common.js @@ -1,13 +1,12 @@ -var CleanWebpackPlugin = require('clean-webpack-plugin'), - config = require('./config.json'), - LodashModuleReplacementPlugin = require('lodash-webpack-plugin'), - path = require('path'), - webpack = require('webpack'); +const CleanPlugin = require('clean-webpack-plugin'), + LodashPlugin = require('lodash-webpack-plugin'), + path = require('path'), + webpack = require('webpack'); +// Common configuration, with extensions in webpack.dev.js and webpack.prod.js. module.exports = { bail: true, context: __dirname, - devtool: 'source-map', entry: { main: './assets/js/app.js', }, @@ -19,9 +18,6 @@ module.exports = { use: { loader: 'babel-loader', options: { - cacheDirectory: true, - compact: true, - minified: true, plugins: [ 'dynamic-import-webpack', // Needed for dynamic imports. 'lodash', // Automagically tree-shakes lodash. @@ -34,8 +30,8 @@ module.exports = { useBuiltIns: true, // Tree-shake babel-polyfill. }], ], - } - } + }, + }, }, { test: /jquery-migrate/, @@ -49,36 +45,24 @@ module.exports = { path: path.resolve(__dirname, "assets/dist"), }, plugins: [ - new CleanWebpackPlugin(['assets/dist'], { + new CleanPlugin(['assets/dist'], { verbose: false, watch: false, }), - new webpack.LoaderOptionsPlugin({ - minimize: true, - }), - new LodashModuleReplacementPlugin, // Complements 'babel-plugin-lodash by shrinking it's cherry-picked builds further. + new LodashPlugin, // Complements babel-plugin-lodash by shrinking its cherry-picked builds further. new webpack.ProvidePlugin({ $: 'jquery', jQuery: 'jquery', 'window.jQuery': 'jquery', }), - new webpack.optimize.CommonsChunkPlugin({ - children: true, - minChunks: 2, - }), ], resolve: { alias: { - 'async': path.resolve(__dirname, 'node_modules/async/dist/async.min.js'), - 'html5-history-api': path.resolve(__dirname, 'node_modules/html5-history-api/history.min.js'), - jquery: path.resolve(__dirname, 'node_modules/jquery/dist/jquery.min.js'), 'jquery-migrate': path.resolve(__dirname, 'node_modules/jquery-migrate/dist/jquery-migrate.min.js'), - 'jquery-zoom': path.resolve(__dirname, 'node_modules/jquery-zoom/jquery.zoom.min.js'), jstree: path.resolve(__dirname, 'node_modules/jstree/dist/jstree.min.js'), 'pace': path.resolve(__dirname, 'node_modules/pace/pace.min.js'), 'slick-carousel': path.resolve(__dirname, 'node_modules/slick-carousel/slick/slick.min.js'), sweetalert2: path.resolve(__dirname, 'node_modules/sweetalert2/dist/sweetalert2.min.js'), }, }, - watch: false, }; diff --git a/webpack.dev.js b/webpack.dev.js new file mode 100644 index 0000000000..ca419d16d8 --- /dev/null +++ b/webpack.dev.js @@ -0,0 +1,13 @@ +const webpack = require('webpack'), + merge = require('webpack-merge'), + commonConfig = require('./webpack.common.js'); + +module.exports = merge(commonConfig, { + mode: 'development', + devtool: 'source-map', + plugins: [ + new webpack.DefinePlugin({ + 'process.env.NODE_ENV': 'development', + }), + ], +}); diff --git a/webpack.prod.js b/webpack.prod.js new file mode 100644 index 0000000000..1997776194 --- /dev/null +++ b/webpack.prod.js @@ -0,0 +1,12 @@ +const webpack = require('webpack'), + merge = require('webpack-merge'), + commonConfig = require('./webpack.common.js'); + +module.exports = merge(commonConfig, { + mode: 'production', + plugins: [ + new webpack.DefinePlugin({ + 'process.env.NODE_ENV': 'production', + }), + ], +}); From 2f53571477712eac6deebe6baa3e642fba6f5752 Mon Sep 17 00:00:00 2001 From: Erik Christensen Date: Fri, 9 Mar 2018 16:24:16 -0800 Subject: [PATCH 5/8] STRF-4609: Inject svg icons into page after load * Use svg-injector to fetch the svg icon sprite rather than embed it directly on the page. This improves frontend performance because the icons will be cached after the first request and we reduce the page weight by about 28kb. * Move location of generated svg so it is retrievable by the frontend through the CDN. * Update svgstore grunt task --- README.md | 4 ++-- assets/img/icon-sprite.svg | 1 + assets/js/theme/global.js | 2 ++ assets/js/theme/global/svg-injector.js | 5 +++++ grunt/svgstore.js | 2 +- package.json | 1 + templates/components/common/icons/icon-defs.html | 1 - templates/layout/amp-iframe.html | 2 +- templates/layout/base.html | 2 +- webpack.common.js | 1 + 10 files changed, 15 insertions(+), 6 deletions(-) create mode 100644 assets/img/icon-sprite.svg create mode 100644 assets/js/theme/global/svg-injector.js delete mode 100644 templates/components/common/icons/icon-defs.html diff --git a/README.md b/README.md index de9f764f12..e3112ff95d 100644 --- a/README.md +++ b/README.md @@ -159,8 +159,8 @@ Icons are delivered via a single SVG sprite, which is embedded on the page in `templates/layout/base.html`. It is generated via a grunt task `grunt svgstore`. The task takes individual SVG files for each icon in `assets/icons` and bundles -them together, to be inlined on the top of the theme, inside a handlebars partial. -Each icon can then be called in a similar way to an inline image via: +them together, to be inlined on the top of the theme, via an ajax call managed +by svg-injector. Each icon can then be called in a similar way to an inline image via: ``` diff --git a/assets/img/icon-sprite.svg b/assets/img/icon-sprite.svg new file mode 100644 index 0000000000..0b30adbd4e --- /dev/null +++ b/assets/img/icon-sprite.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/assets/js/theme/global.js b/assets/js/theme/global.js index a24bddf4f1..b66859e8d2 100644 --- a/assets/js/theme/global.js +++ b/assets/js/theme/global.js @@ -15,6 +15,7 @@ import carousel from './common/carousel'; import 'lazysizes'; import loadingProgressBar from './global/loading-progress-bar'; import sweetAlert from './global/sweet-alert'; +import svgInjector from './global/svg-injector'; export default class Global extends PageManager { onReady() { @@ -31,5 +32,6 @@ export default class Global extends PageManager { maintenanceMode(this.context.maintenanceMode); loadingProgressBar(); sweetAlert(); + svgInjector(); } } diff --git a/assets/js/theme/global/svg-injector.js b/assets/js/theme/global/svg-injector.js new file mode 100644 index 0000000000..ae6ebc38e5 --- /dev/null +++ b/assets/js/theme/global/svg-injector.js @@ -0,0 +1,5 @@ +import svgInjector from 'svg-injector'; + +export default function () { + svgInjector(document.querySelectorAll('svg[data-src]')); +} diff --git a/grunt/svgstore.js b/grunt/svgstore.js index 8a8f10d8c0..2e71a91c8e 100644 --- a/grunt/svgstore.js +++ b/grunt/svgstore.js @@ -7,7 +7,7 @@ module.exports = { 'default': { files: { - './templates/components/common/icons/icon-defs.html': ['./assets/icons/**/*.svg'] + './assets/img/icon-sprite.svg': ['./assets/icons/**/*.svg'] } } }; diff --git a/package.json b/package.json index b773832803..6af47dd853 100644 --- a/package.json +++ b/package.json @@ -18,6 +18,7 @@ "nod-validate": "^2.0.12", "pace": "hubspot/pace#a03f1f1de62c9cea6c88b2267b8d7a83858b6cb6", "slick-carousel": "^1.8.1", + "svg-injector": "^1.1.3", "sweetalert2": "^6.10.1" }, "devDependencies": { diff --git a/templates/components/common/icons/icon-defs.html b/templates/components/common/icons/icon-defs.html deleted file mode 100644 index 08a4c42e61..0000000000 --- a/templates/components/common/icons/icon-defs.html +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/templates/layout/amp-iframe.html b/templates/layout/amp-iframe.html index 5dcda95dd5..82a0efff7a 100644 --- a/templates/layout/amp-iframe.html +++ b/templates/layout/amp-iframe.html @@ -24,7 +24,7 @@ -
{{> components/common/icons/icon-defs }}
+ {{#block "page"}} {{/block}} diff --git a/templates/layout/base.html b/templates/layout/base.html index f7c70996d6..79403a23ec 100644 --- a/templates/layout/base.html +++ b/templates/layout/base.html @@ -34,7 +34,7 @@ {{{snippet 'header'}}} -
{{> components/common/icons/icon-defs }}
+ {{#if settings.privacy_cookie}} {{> components/common/cookie}} diff --git a/webpack.common.js b/webpack.common.js index 132e7239b8..b5036482aa 100644 --- a/webpack.common.js +++ b/webpack.common.js @@ -62,6 +62,7 @@ module.exports = { jstree: path.resolve(__dirname, 'node_modules/jstree/dist/jstree.min.js'), 'pace': path.resolve(__dirname, 'node_modules/pace/pace.min.js'), 'slick-carousel': path.resolve(__dirname, 'node_modules/slick-carousel/slick/slick.min.js'), + 'svg-injector': path.resolve(__dirname, 'node_modules/svg-injector/dist/svg-injector.min.js'), sweetalert2: path.resolve(__dirname, 'node_modules/sweetalert2/dist/sweetalert2.min.js'), }, }, From 3a62b5c46353a0be5196f0ece278c8687c265aa2 Mon Sep 17 00:00:00 2001 From: Matt Olson Date: Fri, 4 May 2018 16:00:51 -0700 Subject: [PATCH 6/8] STRF-4617: Reduce defaults for product counts * Reduce the default number of featured, new, and bestselling products on the home page. * These can always be updated in Theme Editor, but the defaults don't need to be so high. --- config.json | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/config.json b/config.json index 090c38901d..347c9024ee 100644 --- a/config.json +++ b/config.json @@ -41,9 +41,9 @@ "Firefox ESR" ], "settings": { - "homepage_new_products_count": 12, - "homepage_featured_products_count": 8, - "homepage_top_products_count": 8, + "homepage_new_products_count": 5, + "homepage_featured_products_count": 4, + "homepage_top_products_count": 4, "homepage_show_carousel": true, "homepage_stretch_carousel_images": false, "homepage_new_products_column_count": 4, From 9a8d499fcda76d4831dd626b46c31fbcdf3bbd94 Mon Sep 17 00:00:00 2001 From: Matt Olson Date: Mon, 7 May 2018 17:20:28 -0700 Subject: [PATCH 7/8] STRF-4873: Lazier image loading * Use laziest possible setting for images --- assets/js/theme/global.js | 5 +++++ templates/components/carousel.html | 2 +- 2 files changed, 6 insertions(+), 1 deletion(-) diff --git a/assets/js/theme/global.js b/assets/js/theme/global.js index b66859e8d2..167e76604c 100644 --- a/assets/js/theme/global.js +++ b/assets/js/theme/global.js @@ -19,6 +19,11 @@ import svgInjector from './global/svg-injector'; export default class Global extends PageManager { onReady() { + // Only load visible elements until the onload event fires, + // after which preload nearby elements. + window.lazySizesConfig = window.lazySizesConfig || {}; + window.lazySizesConfig.loadMode = 1; + quickSearch(); currencySelector(); foundation($(document)); diff --git a/templates/components/carousel.html b/templates/components/carousel.html index 6d10f6d8a1..a0bb91f484 100644 --- a/templates/components/carousel.html +++ b/templates/components/carousel.html @@ -6,7 +6,7 @@ "slidesToScroll": 1, "autoplay": true, "autoplaySpeed": {{carousel.swap_frequency}}, - "lazyLoad": "anticipated" + "lazyLoad": "ondemand" }'> {{#each carousel.slides}} From 4ee4620e2e8d613a7324adea7c937cdcdf2e23b7 Mon Sep 17 00:00:00 2001 From: Matt Olson Date: Thu, 10 May 2018 18:20:52 -0700 Subject: [PATCH 8/8] STRF-4604: Configurable resource hints * Use `resourceHints` helper from paper 2.0.8, which looks up configured cdn and font providers. --- templates/layout/amp-iframe.html | 2 +- templates/layout/base.html | 15 +++++---------- 2 files changed, 6 insertions(+), 11 deletions(-) diff --git a/templates/layout/amp-iframe.html b/templates/layout/amp-iframe.html index 82a0efff7a..50b5e5e12a 100644 --- a/templates/layout/amp-iframe.html +++ b/templates/layout/amp-iframe.html @@ -12,7 +12,7 @@ {{{ head.scripts }}} diff --git a/templates/layout/base.html b/templates/layout/base.html index 79403a23ec..0ed6e7fa29 100644 --- a/templates/layout/base.html +++ b/templates/layout/base.html @@ -2,27 +2,22 @@ {{ head.title }} - - - - - - - + {{{ resourceHints }}} {{{ head.meta_tags }}} {{{ head.config }}} {{#block "head"}} {{/block}} - {{{stylesheet '/assets/css/theme.css'}}} - {{ getFontsCollection }} + {{ getFontsCollection }} + {{{stylesheet '/assets/css/theme.css'}}} + {{{head.scripts}}} {{{head.rsslinks}}}