Howto use stub_js_modules to prevent bloating your bundles?

Hi!

Continuing the discussion from Anybody using mockup patterns? Expect huge bloat if only a couple of us will do!:

Can somebody elaborate on how to use the stub_modules, please?

  • How are they specified using generic setups registry.xml?
  • In case of production (precompiling with grunt) how does the compile process get notice of that stub_modules are used?

Let's assume we have a production bundle containing a mockup pattern that depends on jquery (or any other resource already included in the "plone bundle"):
Bundle spezification:

require([
  'jquery',  // Is alread present in the Plone bundle
  'pat-registry',  
  'mockup-patterns-inqbus_mailcenter_listview',  
 ...

Pattern definition:

define([
    'mockup-patterns-base',
    'pat-registry',
    'jquery', // here we require jquery 
    'inqbus_mailcenter_datatables',
    'inqbus_mailcenter_datatables_editable'
    ], function (Base, Registry, $, Datatables, DatatablesEditable) {
    'use strict';

These specifications will cause jquery to be compiled into the bundle.
And here comes the final question: How to use stub_modules to prevent the jquery to be compiled into the bundle?

Any help appreciated

Volker

Here is how it is done in plone core: Products.CMFPlone/Products/CMFPlone/profiles/dependencies/registry.xml at master · plone/Products.CMFPlone · GitHub

You can also add in stub modules through the resource registry control panel in the bundle settings.

As long as you are using the plone-compile-resources, it'll read what is in the bundle settings and use it appropriately. If you have your own custom Gruntfile, then you can stub out modules like this for instance https://github.com/plone/plone.app.mosaic/blob/master/build.js

Hi Nathan!

Thank you so much for the valuable pointers! I will implement it as once!

Volker

({
    baseUrl: 'src/plone/app/mosaic/browser/static/js',
    name: 'mosaic.pattern',
    out: 'src/plone/app/mosaic/browser/static/plone-mosaic.js',
    optimize: 'uglify2',
    generateSourceMaps: true,
    preserveLicenseComments: false,
    paths: {
        'jquery': 'empty:',        <---   like this ?
        'tinymce': 'empty:',
        'underscore': 'empty:',
        'pat-logger': 'empty:',
        'pat-registry': 'empty:',
        'mockup-patterns-base': 'empty:',
        'mockup-patterns-modal': 'empty:',
        'mockup-patterns-tinymce': 'empty:',
        'mockup-utils': 'empty:',
        'mosaic-url': ''
    }
})

Doing so (setting jquery to empty in my config.js file) I'm rewarded with:

Running "requirejs:inqbus_mailcenter" (requirejs) task

Error: ENOENT, no such file or directory
'/home/volker/workspace/mailcenter7/zeocluster/src/inqbus.mailcenter.mockup/s
rc/inqbus/mailcenter/mockup/js/empty.js'
In module tree:
mockup-bundles-inqbus_mailcenter
Warning: RequireJS failed. Use --force to continue.

Aborted due to warnings.
Makefile:50: recipe for target 'bundle' failed
make: *** [bundle] Error 6

Or did I get you wrong?

Volker

Did you use empty or empty:? Looks like you used the former when you need the later.

Ah! Need new glasses!

Thank you again Nathan, your my daysaver.

Volker