Slimming down Javascript bundle

[mattolson]

What?

Responding to code review on #1229 that was done post-merge

Based on recommendations from @davidchin in #1229 (comment) :

• Move stencil-cli and grunt-cli to devDependencies
• Use npx to run tests using local instead of global packages
• Add Node 8.x (can't support 10 yet because stencil-cli does not)

Based on #1229 (comment) :

• Change function passed to jQuery each so reference to this is correct

Based on #1229 (comment) :

• Add webpack performance warnings for large assets and chunks

Based on #1229 (comment) :

• Enable source maps in production

Update to babel 7

• Remove babel-polyfill and instead rely on useBuiltIns: 'usage'
• Use @babel/preset-env
• Set targets
• Add webpack-bundle-analyzer to help us visualize webpack bundles
• Remove transform-regenerator plugin
• Bump versions to latest for all babel related packages
• Use minimized jquery from distribution
• Use splitChunks: all to separate node_modules into a separate file
  to avoid re-downloading it again when minor changes are made to app.js

Reduce usage of sweetAlert and compareProducts

• Remove sweetalert2 from global bundle
• Create Foundation reveal modal to be used for error messages
• Replace usage of sweetalert2 with alert modal in every place
  except cart, shipping estimator, and account details, which
  have more complex use cases
• Change global/sweet-alert to return the swal instance so we
  can call it anywhere to get the initialized instance, rather than
  doing this in jquery onReady
• Bump sweetalert to latest 6.x
• Remove compareProducts from global bundle and add to category,
  brand, compare, and search pages.

Remove async/await

• Removal of async/await results in bundle savings because webpack
  doesn't need to include a shim

Switch from pace to nanobar

• Pace is an unmaintained, large library that we use for the loading progress indicator. Replace with nanobar and jQuery ajax hooks.

Impact

The bundle size for the entrypoint has been reduced from 376kb to 286kb.

Before

[matt.olson@C02X425EJG5M:~/workspace/cornerstone] $ URL=http://matt-olson.mybigcommerce.com npm run lighthouse

> bigcommerce-cornerstone@2.6.0 lighthouse /Users/matt.olson/workspace/cornerstone
> npx lighthouse --output json --chrome-flags="--headless" --quiet --disable-device-emulation --throttling-method=provided $URL | jq '{ttfb: .audits | .["time-to-first-byte"] | .rawValue, paint: .audits | .["first-meaningful-paint"] | .rawValue, interactive: .audits.interactive.rawValue}'

{
  "ttfb": 277.21999999999997,
  "paint": 702.078,
  "interactive": 845.0290001220703
}

After

[matt.olson@C02X425EJG5M:~/workspace/cornerstone] $ URL=http://matt-olson.mybigcommerce.com npm run lighthouse

> bigcommerce-cornerstone@2.6.0 lighthouse /Users/matt.olson/workspace/cornerstone
> npx lighthouse --output json --chrome-flags="--headless" --quiet --disable-device-emulation --throttling-method=provided $URL | jq '{ttfb: .audits | .["time-to-first-byte"] | .rawValue, paint: .audits | .["first-meaningful-paint"] | .rawValue, interactive: .audits.interactive.rawValue}'

{
  "ttfb": 245.334,
  "paint": 523.496,
  "interactive": 618.681
}

[bigbot]

Autotagging @bigcommerce/storefront-team @davidchin

More commits added since review

[junedkazi]

Can you please add a before and after for this change

[davidwrpayne]

Looks fine to me. Pretty awesome results.

[mattolson]

@Ubersmake This is good to go from my perspective. Can you help with some additional testing? It's a pretty broad change, so extra eyes will be helpful.

[steve-ross]

FYI if you use _.get() you need to pass the following options to the lodash plugin {paths: true}

Thanks for this PR it helped me with optimizing our build on a custom theme.

More commits since review

[davidwrpayne]

All looks fine to me from a non Js background.