![]() This file will contain the entire build configuration for your bundles. Add a build.js fileĬreate a build.js file in the Magento root directory. Part 1: Create a bundling configuration 1. The following steps require you to install and have familiarity with the following tools:įull versions of the sample code used in this article are available here: You may find that some bundling strategies will work better than others.Ī clean Magento installation allows reaching enough good performance by splitting bundles by page types, but some customizations may require deeper analysis and other asset distributions. How you define your bundles is up to you and the structure of your Magento store. You could also create bundles by purpose: for common features, product-related features, shipping features, checkout features, taxes, and form validations. When you bundle your RequireJS modules by page type, you will end up with only a handful of bundles that cover the dependencies of any page in your store.įor example, you might end up with a bundle for the dependencies common to all pages, a bundle for CMS-only pages, a bundle for Catalog-only pages, another bundle for Search-only pages, and a bundle for Checkout pages. ![]() Each page categorized into one of these page types has a different set of RequireJS module dependencies. You can categorize Magento’s pages into several page types, including Category, Product, CMS, Customer, Cart, and Checkout. One way to achieve this is to define your bundles by page types. To do that, we want to build our bundles so that each page in our store will only need to download a common bundle and a page-specific bundle for each page accessed. Remember, the goal of JavaScript bundling is to reduce the number and size of requested assets for each page loaded in the browser. 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 Magento 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, Magento creates a single JavaScript file: If you don’t enable bundling, Magento only merges RequireJS and its configuration. Enabling merging without also enabling bundling is not useful because Magento uses RequireJS. This command merges all synchronous JavaScript files into one file. Php -f bin/magento config:set dev/js/merge_files 1
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |