Server bundles are minified by default

[laurentgoudet]

🐞 Bug report

Command (mark with an x)

• new
• build
• serve
• test
• e2e
• generate
• add
• update
• lint
• xi18n
• run
• config
• help
• version
• doc

Is this a regression?

No

Description

By default, the production server bundles generated by the Angular CLI are minified, making debugging much harder, despite the code comment at https://github.com/angular/angular-cli/blob/master/packages/angular_devkit/build_angular/src/angular-cli-files/models/webpack-configs/common.ts#L416 reading:

// On server, we don't want to compress anything. We still set the ngDevMode = false for it
// to remove dev code, and ngI18nClosureMode to remove Closure compiler i18n code

The reason being that, when buildOptions.platform == 'server' is true, the following object is passed to the TerserPlugin compress option:

{
  ecma: terserEcma,
  global_defs: angularGlobalDefinitions,
  keep_fnames: true,
}

However, according to the TerserPlugin's docs, most compress flags default to true, so this effectively causes the server code to be minified.

In addition, unsetting the scripts optimizations in angular.json causes other side effects, namely ngDevMode no longer being explicitly set to false, causing the server code to run in dev mode by default.

"optimization": {
  "scripts": false,
  "styles": true
},

One workaround is to set the NG_BUILD_DEBUG_OPTIMIZE flag, which does turn off compress, but my concern is that it would get removed & renamed at some point since it's undocumented.

I think compress should be set to false for server builds, as per the code comment currently reads, as working with minified code on the server is a pain. It would cause server-side bundles to jump in size, e.g. for my (fairly large) app is goes from 20 MB (with optimization: true) to 32 MB (with optimization: true but compress: false), but is definitely worth it IMO.

I can look into drafting a PR if you guys agree with that.

🔬 Minimal Reproduction

$ npm install -g @angular/cli@latest
$ ng new ssr-minify-test
$ cd ssr-minify-test/
$ ng add @nguniversal/express-engine
$ npm run build:ssr

Manually inspect dist/ssr-minify-test/server/main.js -> code is minified / unreadable

🌍 Your Environment

     _                      _                 ____ _     ___
    / \   _ __   __ _ _   _| | __ _ _ __     / ___| |   |_ _|
   / △ \ | '_ \ / _` | | | | |/ _` | '__|   | |   | |    | |
  / ___ \| | | | (_| | |_| | | (_| | |      | |___| |___ | |
 /_/   \_\_| |_|\__, |\__,_|_|\__,_|_|       \____|_____|___|
                |___/


Angular CLI: 9.1.1
Node: 12.4.0
OS: darwin x64

Angular:
...
Ivy Workspace:

Package                      Version
------------------------------------------------------
@angular-devkit/architect    0.901.1
@angular-devkit/core         9.1.1
@angular-devkit/schematics   9.1.1
@schematics/angular          9.1.1
@schematics/update           0.901.1
rxjs                         6.5.4

[alan-agius4]

Hi @laurentgoudet,

This was one of the changes in version 9 where server production code is minified, one of the main reasons behind this is to speed up server cold starts and reduce deployment times.

What I suggest is to generate sourcemaps and attach them, which will provide a better debug experience.

That being said, in the future we should probably provide different levels of optimizations as per #15761.

[alan-agius4]

Hi, lets continue tracking this in #15761

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