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...

[jonrimmer]

Would also be useful for Chart.js, as it includes the whole of Moment, even though it is technically an optional dependency with v2.8: chartjs/Chart.js#5978

[clydin]

If the import/require statement is within developer controlled code, then Webpack magic comments (docs) could be used to include/exclude files (among other capabilities). Alternatively and recommended, only the files needed should be imported without any dynamic expressions.
For third-party code, a custom Angular builder such as ngx-build-plus could be used to adjust the webpack configuration (eject has been removed in favor of custom builders); potentially with the IgnorePlugin. Please note however that Webpack specific functionality is not officially supported by the Angular CLI.

For a non-Webpack specific method, the tsconfig paths option could be leveraged. Files that should be excluded can be added to the option and mapped to an empty JS file (empty.js for instance). The tsconfig paths option acts in a similar capacity to the webpack alias option but must map to a file.

[angular-automatic-lock-bot]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}