CODEWITHSUNDEEP
javascriptrequirejsr.jsrequirejs-optimizer
johni
johni

Reputation: 5568

RequireJS Optimizer hard include

I have a large-scale client-side project which I would like to bundle into 2 bundles instead of 1.

This is my dependency tree:

module's dependency tree

The desired output would be to have these bundles:

  1. main that includes b
  2. x that includes just a (as b is already included in the first bundle and I do not want users to download more than once a piece of code).

Here's my optimizer configuration:

({
  appDir: 'www',
  baseUrl: 'js/',
  mainConfigFile: 'www/js/require.config.js',
  dir: 'www-release',
  modules: [
    {
      name: 'main',
      exclude: ['x']
    },
    {
      name: 'x',
      exclude: ['main']
    }
  ],
  optimize: 'none',
  removeCombined: true
})

I do want to exclude from main the whole dependency tree of x, yet still include modules that I explicitly require, such as a.

I know that:

  1. include — explicitly include module that are not required directly and its whole dependency tree.
  2. exclude — excluding a module is actually excluding its whole dependency tree, overriding include incase of a conflict.
  3. excludeShallow — includes the module’s dependency tree, not including the module itself.

Having that, I do not see a clear way to accomplish what I want, can you help?

Upvotes: 2

Views: 223

Answers (1)

V.S.V
V.S.V

Reputation: 302

You need to use requier.js bundling functionality like this.

In your require.config.js file

Need write bundles settings

bundles: {
    x: ['files for x bundle'],
    b: ['files for b bundle']
}

after this need change build file.

Optimizer configuration file

({
     appDir: 'www',
     baseUrl: 'js/',
    // mainConfigFile: 'www/js/require.config.js',// not need here
     dir: 'www-release',
     modules: [
        {
            name: 'main',
            create: true, // this will create www-release/main.js file(main bundle)
            include: ['main'],
            exclude: ['x']
        },
        {
            name: 'b',
            create: true,
            include: ['files for b bundle'],
            exclude: ['main']
        },
        {
            name: 'x',
            create: true,
            include: ['files for x bundle']
            exclude: ['main']
        }
   ],
   optimize: 'none',
   removeCombined: true
   paths: {
       //put paths object from requierjs.confige file 
   }
});

Upvotes: 1

Related Questions