antonkril / magento-rjs-config Goto Github PK

JavaScript 100.00%

magento-rjs-config's Introduction

magento-rjs-config

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.

Usage

Install r.js
Download build.js from this repo
Edit build.js to remove/add files from your custom theme to bundles (optional)
Apply the jquery.cookie issue patch
Run magento setup:static-content:deploy to 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}

Output

Bundles all files common for all Magento 2 Luma storefront pages into requirejs/require.js file
Generates 5 page-specific bundle files:
- bundles/default.js - should be added to default layout handle
- bundles/cart.js - should be added to checkout_cart_index layout handle
- bundles/checkout.js - should be added to checkout_index_index layout handle
- bundles/catalog.js - should be added to catalog_category_view and catalog_product_view layout handles
- bundles/product.js - should be added to catalog_product_view layout handle

Adding bundles to pages

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>

Fixing missconfiguration of jquery.cookie

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']
};

magento-rjs-config's People

Contributors

Stargazers

Watchers

Forkers

rganin nuovecode niemaco itris quentinfarizon kirmorozov samjuk erikhansen benspace48 emirajbbd harrigo fterenzani yosefkurniawan arrowgr coresh jearsoncarillo junaidq57 toanthanhnguyen

magento-rjs-config's Issues

Uncaught TypeError: Cannot read property

I am getting following error . build is working file .site is working. but getting these 2 errors.
Please let me know if this can be fixed.

require.js:194 Uncaught TypeError: Cannot read property 'getItem' of undefined

TypeError: Cannot read property 'setConf' of undefined

Possible readme mistake?

Readme says "bundles/common.js - should be added to default layout handle" while build.js seems to use default.js name. Please see https://github.com/antonkril/magento-rjs-config/blob/master/build.js#L168

Error JS on console, jquery.cookie seems to be not loaded properly

Hi @antonkril
I really appreciate this idea. Running Magento with bundle js should make the performance better.

Anyway, I am trying to implement this r.js bundling on Luma. The bundles files are generated successfully. They are loaded on the related page successfully as well. Unfortunately, it is not really working.
There is an error in the console. Here is the error:

I am guessing seems the jquery.cookie is not loaded properly.
Is it related to your concern about the cookies issue on this part? https://github.com/antonkril/magento-rjs-config/#fixing-missconfiguration-of-jquerycookie
I did try this step, I was creating a new requirejs-config.js under Magento_Theme module, and put the jquery/jquery.cookie as deps there. But the error persist, it bring another error on console instead.

Both error actually are similar. it says that cookieStorage is not defined.

Do you have any idea about what is going on here?
Thank you very much in advance! Really appreciate your help.

Support javaScript mixins

Hi Anton,

I know this gist is deprecated and I'm trying to use the guide for Magento 2.3 (https://devdocs.magento.com/guides/v2.3/performance-best-practices/advanced-js-bundling.html) to bundle the javascript, but I run into the problem that mixins aren't loaded for components that I extended.

I've tried including the 'mixins!Magento_Ui/js/lib/knockout/bindings/bootstrap' assets in the modules right after 'Magento_Ui/js/lib/knockout/bindings/bootstrap', for example. But this seems to cause to not load and stop JavaScript. I can't just leave out the components that have mixins assigned to them, because then I would need to strip out any component that get's extends by any (core, own, third party) module. Do you think it can be achieved at all? And perhaps how?

Perhaps I should direct Adrew Levine about this, though, but this gist is my only lead so far.

Using experimental es2015+ uglify-js harmony branch with Magento

Has someone tried using the experimental https://www.npmjs.com/package/uglify-js-es6#harmony with this build.js?
It would be nice to be able to use a better optimization level than 'none'.
I'm looking for responses like "I made it work but it took weeks|days|hours and it's brittle" to "don't try, it's a hell hole and won't work"...

Bundled JS files still downloaded separately

Hi,

Thanks for your work on this configuration and instructions on using the RequireJS optimizer.

I have an issue with files that are included in the bundle still being downloaded as before. It seems that the only change is that the file will get downloaded twice (once as part of the bundle, and once as part of the way RequireJS normally works). Is there some further configuration required to tell RequireJS that the files have already been downloaded?

Is this necessary if HTTP2 is enabled

Just wondering if this will be necessary if you're using HTTP2?
https://http2.github.io/faq/#why-is-http2-multiplexed

Any thoughts?