Excluding files in bundled javascript

[pjordaan]

Bug Report or Feature Request (mark with an x)

- [ ] bug report
- [ X] feature request

Command (mark with an x)

- [ ] new
- [X] build
- [ ] serve
- [ ] test
- [ ] e2e
- [ ] generate
- [ ] add
- [ ] update
- [ ] lint
- [ ] xi18n
- [ ] run
- [X ] config
- [ ] help
- [ ] version
- [ ] doc

Versions

Any Angular Cli

Repro steps

Webpack has a nice feature to generate code for dynamic requires, for example: require('@angular/' + lib); would write code and bundle all @angular packages together. The downside of this feature is that it often includes too much at the same time.
There are quite a few node.js libraries that do something like require('./i18n/' + language + '.js') to load the correct i18n. That works nice on a node.js server, but if used with Webpack the bundled output will contain all languages.

As a solution you would need to modify the Webpack configuration to exclude all languages you do not use. However since the Webpack config can not be altered without 'ng eject' there is no way for me to exclude javascript from bundling.

Desired functionality

Being able to exclude files from the bundled files to reduce filesize without having to call ng eject.

Mention any other details that might be useful

Example blog: https://bjacobel.com/2016/12/04/highlight-bundle-size/

[clydin]

Can you provide some examples of packages which exhibit this issue? moment.js, for instance, properly handles the described scenario without any modification.

[pjordaan]

hi, I provided a link of an example with Webpack and highlight.js, but I should check out highlight.js if that library is fixed or not as that blog is from 2016 (and is how I knew of this Webpack feature and the potential problem with it)
In my usecase I wrote something like this to load locale data dynamically:

require(`
    ['@angular/common/locales/' + locale + '.js', '@angular/common/locales/extra/' + locale  + 
'.js'],
    function (localeData, extraData) {
        registerLocaleData(localeData.default, locale, extraData.default);
    }
)

I noticed doing something like this included all locales of Angular and I could not configure angular-cli to only include a few languages, so I created this ticket.

[cristhiank]

I think this is related to SheetJS/sheetjs#438
I'm interested in being able to exclude some dependencies like cpexcel shown in the above link.

[maxime1992]

Same here. We're using faker in some sub module that shouldn't end up in the prod build and faker + faker-uuid is taking ~40% of the final bundle 😭

[MattiJarvinen]

@maxime1992 did you find a solution or did you just define angular fileReplacements for that submodule like this?

...
           fileReplacements": [
               {
                  "replace": "src/environments/environment.ts",
                  "with": "src/environments/environment.prod.ts"
                },
                {
                  "replace": "src/app/submodule/submodule.module.ts",
                  "with": "src/app/submodule/submodule.prod.module.ts"
                },
              ],

Also how could I replace node_modules entry like this?

[maxime1992]

@MattiJarvinen-BA I did not find any...