r.js build file for Magento 2.2.0-rc30 CE Luma theme.
Magento 2 built-in bundler relies only on php environment, so it is not very efficient.
The build file from this repo can be used to execute budnling and minification on deployed static content with R.js tool. It will optimize main pages of Magento 2.
Should be used only during deployment to production.
- Install r.js
- Download
build.js
from this repo - Edit
build.js
to remove/add files from your custom theme to bundles - Run
magento setup:static-content:deploy
to deploy Magento 2 static content to{magentoDir}/pub/static/
folder - For every theme locale:
- Move
{magentoDir}/pub/static/{vendor}/{theme}/{locale}
folder to{magentoDIr}pub/static/{vendor}/{theme}/{locale}_source
- Run
r.js -o build.js --baseUrl={magentoDir}/pub/static/{vendor}/{theme}/{locale}_source --dir={magentoDir}/pub/static/{vendor}/{theme}/{locale}
- Move
- Bundles all files common for all Magento 2 Luma storefront pages into
requirejs/require.js
file - Generates 5 page-specific bundle files:
bundles/common.js
- should be added todefault
layout handlebundles/cart.js
- should be added tocheckout_cart_index
layout handlebundles/checkout.js
- should be added tocheckout_index_index
layout handlebundles/catalog.js
- should be added tocatalog_category_view
andcatalog_product_view
layout handlesbundles/product.js
- should be added tocatalog_product_view
layout handle
To add a bundle file to corresponding layout handle, add following instruction to the handle layout file in your module:
<head>
<script src="bundles/{bundleFile}.js" />
</head>
Example for cart page
// My/Module/view/frontend/layout/checkout_cart_index.xml
<?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']
};