With a more advanced approach to JavaScript bundling, we can improve these load times. Users could still wait around 42 seconds for the initial page load as shown here: The same is true when merging the bundles into a single file.
To test and prepare your storefront deployment for the real world, we recommend you test with Chrome’s native throttling profile of “Slow 3G.” With Slow 3G, our previous bundled output times now reflect many users’ connection realities:Īt Slow 3G connectivity, it takes about 44 seconds to load all the bundles for the homepage of a clean Commerce installation. In addition, mobile devices do not render as fast as desktops. But in the real world, many things can slow down rendering: slow connections, large connection thresholds, limited networks. The previous bundled and merged load times look great in a development environment. When you enable both bundling and merging, Commerce creates a single JavaScript file: If you don’t enable bundling, Commerce only merges RequireJS and its configuration. Enabling merging without also enabling bundling is not useful because Commerce uses RequireJS. This command merges all synchronous JavaScript files into one file. To enable built-in merging from the command line: php -f bin/magento config:set dev/js/merge_files 1 But, because the browser loads these bundles synchronously, the user’s first visit to a Commerce storefront could take a while to render and hurt the user experience. Performance improves after the browser caches the bundles.
This is a native Commerce mechanism that combines all assets present in the system and distributes them among same-sized bundles (bundle_0.js, bundle_1.js … bundle_x.js):īetter, but the browser still loads ALL the JavaScript bundles, not just the ones needed.Ĭommerce bundling reduces the number of connections per page, but for each page request it loads all bundles, even when the requested page may only depend on files within one or two of the bundles. To enable built-in bundling from the command line: php -f bin/magento config:set dev/js/enable_js_bundling 1 You can turn them on within the Admin UI in Stores > Settings > Configuration > Advanced > Developer > JavaScript Settings, or from the command line. These settings are turned off by default. Out of the box, Commerce provides two ways to reduce the number of server requests: merging and bundling. For example, the following screen shot shows only the start of the list of JavaScript modules loaded on the home page of a clean installation. In a modular application, the number of server requests can reach into the hundreds. Bundling JavaScript modules for better performance is about reducing two things:
0 kommentar(er)
