Deferred Tastics

Some tastics, which are not relevant to search engines, can be deferred which will reduce the overall build size of you JavaScript build. To defer the loading of a tastic you can use our asyncComponent helper inside the tastic/tastics.js.

For this replace the usual import of a tastic which looks like:

import CheckoutTastic from './checkout/tastic.jsx'

with the following lines:

import asyncComponent from 'frontastic-catwalk/src/js/component/asyncComponent'

const CheckoutTastic = asyncComponent({
    import: () => {
        return import('./checkout/tastic.jsx')
    height: { desktop: 690, tablet: 530, mobile: 542 },

Everything will stay the same. The height will be used to reserve some space for the tastic during asynchronous rendering to reduce the screen flickering. Tastics wrapped into asyncComponent will be put into their own chunks by the default webpack configuration.

To analyze the build size and find out which tastics have the most effect on the build size you can analyze the build size yourself:

1) Go into the project folder you care about 2) Run ant package 3) Inspect build/bundleSize.html (HTML report) or build/bundleStats.json (webpack bundle statistics)

With this it should be possible for you to optimize imports, libraries and decide which tastics should be deferred.