NOTE This readme is deprecated. See https://devdocs.magento.com/guides/v2.3/performance-best-practices/advanced-js-bundling.html
NOTE Configuration generation tool that automates build.js creation was created by Shane Osbourne: https://github.com/WeareJH/config-gen
This r.js build file is built for Magento 2.2.0-rc30 CE Luma theme.
NOTE: Manual modification of the build.js file for your project IS NOT REQUIRED. A major benefit will be achieved by any Magento/blank or Magento/luma-based installation with this build configuration without the need for any modifications. Tweaking the build.js file is optional if you want to achieve 100% improvements.
The Magento 2 built-in bundler relies only on PHP, which is not very efficient and could lead to potential issues. The build file build.js from this repository can be used to execute bundling and minification on deployed static content with the r.js tool shipped with the NPM version of RequireJS. It will optimize the main pages of Magento 2.
The process described here should be applied only during deployment to production.
- Install r.js
- Download
build.jsfrom this repo - Edit
build.jsto remove/add files from your custom theme to bundles (optional) - Apply the jquery.cookie issue patch
- Run
magento setup:static-content:deployto deploy Magento 2 static content to{magentoDir}/pub/static/folder - For every theme locale that you use:
- Move
{magentoDir}/pub/static/{area}/{vendor}/{theme}/{locale}folder to{magentoDIr}pub/static/{area}/{vendor}/{theme}/{locale}_source - Run
r.js -o build.js baseUrl={magentoDir}/pub/static/{area}/{vendor}/{theme}/{locale}_source dir={magentoDir}/pub/static/{area}/{vendor}/{theme}/{locale}
- Move
- Bundles all files common for all Magento 2 Luma storefront pages into
requirejs/require.jsfile - Generates 5 page-specific bundle files:
bundles/default.js- should be added todefaultlayout handlebundles/cart.js- should be added tocheckout_cart_indexlayout handlebundles/checkout.js- should be added tocheckout_index_indexlayout handlebundles/catalog.js- should be added tocatalog_category_viewandcatalog_product_viewlayout handlesbundles/product.js- should be added tocatalog_product_viewlayout handle
To add a bundle file to the corresponding page, add following instruction to the page layout update file in your module:
<head>
<script src="bundles/{bundleFile}.js" />
</head>Example for cart pages, create a file My/Module/view/frontend/layout/checkout_cart_index.xml with the following contents:
<?xml version="1.0"?>
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
<head>
<script src="bundles/cart.js" />
</head>
</page>JQuery.cookie module should be added to 'deps'. To add, create a 'requiejs-config.js' file in your module:
//My/Module/view/frontend/requirejs-config.js
var config = {
'deps': ['jquery/jquery.cookie']
};