2

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?

johni
  • 5,342
  • 6
  • 42
  • 70
  • Is something like this valid? `{ name: 'x', exclude: ['main', 'b'] }` ? Have you considered using webpack by the way? – Dimitris Karagiannis Oct 22 '16 at 00:28
  • This won't work, b will be missing in both bundles this way. Regarding webpack - I have but for now I'm stuck with requirejs, I do not know what is the cost of switching to webpack. I have the feeling it's not going to be quick. – johni Oct 22 '16 at 02:26

1 Answers1

1

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 
   }
});
V.S.V
  • 302
  • 2
  • 20