Differences between ng build and ng build --watch

问题

I have updated my Angular application to Angular 8 and now I want to try "Differential Loading". In the tsconfig.json the target is set to es2015.

Now if I build the application using ng build, I get the following output from Angular-CLI:

Date: 2019-07-02T15:50:56.861Z
Hash: 33c0be7176e97a0b4271
Time: 35935ms
chunk {main} main-es5.js, main-es5.js.map (main) 3.3 MB [initial] [rendered]
chunk {polyfills} polyfills-es5.js, polyfills-es5.js.map (polyfills) 762 kB [initial] [rendered]
chunk {runtime} runtime-es5.js, runtime-es5.js.map (runtime) 6.08 kB [entry] [rendered]
chunk {scripts} scripts.js, scripts.js.map (scripts) 104 kB [entry] [rendered]
chunk {styles} styles-es5.js, styles-es5.js.map (styles) 30.5 kB [initial] [rendered]
chunk {vendor} vendor-es5.js, vendor-es5.js.map (vendor) 4.84 MB [initial] [rendered]

Date: 2019-07-02T15:51:25.559Z
Hash: dbbb4a6cfe77900eb200
Time: 28589ms
chunk {main} main-es2015.js, main-es2015.js.map (main) 2.92 MB [initial] [rendered]
chunk {polyfills} polyfills-es2015.js, polyfills-es2015.js.map (polyfills) 378 kB [initial] [rendered]
chunk {runtime} runtime-es2015.js, runtime-es2015.js.map (runtime) 6.08 kB [entry] [rendered]
chunk {scripts} scripts.js, scripts.js.map (scripts) 104 kB [entry] [rendered]
chunk {styles} styles-es2015.js, styles-es2015.js.map (styles) 30.5 kB [initial] [rendered]
chunk {vendor} vendor-es2015.js, vendor-es2015.js.map (vendor) 4.74 MB [initial] [rendered]

If I build the application using ng build --watch (same bundles as ng serve), I get this output:

Date: 2019-07-02T15:55:06.631Z
Hash: 123299dcdc0cbcb1c386
Time: 36614ms
chunk {main} main.js, main.js.map (main) 2.92 MB [initial] [rendered]
chunk {polyfills} polyfills.js, polyfills.js.map (polyfills) 375 kB [initial] [rendered]
chunk {polyfills-es5} polyfills-es5.js, polyfills-es5.js.map (polyfills-es5) 503 kB [initial] [rendered]
chunk {runtime} runtime.js, runtime.js.map (runtime) 6.08 kB [entry] [rendered]
chunk {scripts} scripts.js, scripts.js.map (scripts) 104 kB [entry] [rendered]
chunk {styles} styles.js, styles.js.map (styles) 30.5 kB [initial] [rendered]
chunk {vendor} vendor.js, vendor.js.map (vendor) 4.74 MB [initial] [rendered]

Why aren't the same bundles generated? I ask this because I don't know what the correct way is to embed those script to the html-files.

回答1:

As you mentioned, Angular 8 brings a new differential loading feature. Now, ng build is building 2 versions of each JS bundle. A old ES5 syntax, and a new modern ES2015 version (JS module) optimized for recent version of browsers.

Why 2 versions ? Because old browser will ignore ES2015 bundles, and just download and execute "old" ones. (marked as nomodule).

You should consider to use ng serve in development mode, build will be optimized for that, less files will be generated (no more ES5 + ES2015). And ng build --prod for deployment.

You can read more details in Angular Official docs

Also for anyone who discover this new feature : Version 8 of Angular — Smaller bundles, CLI APIs, and alignment with the ecosystem by Stephen Fluin.

You may opt-out of this change by setting your target back to es5 in your tsconfig.json

{
 ...
 "compilerOptions": {
     "target": "es5"
  }
}

回答2:

You can use the clause --watch if you need to rebuild the angular code on file changes.

From documentation:

--watch=true|false Run build when files change. Default: false

回答3:

Yes I know, maybe I was a bit unclear, but I want to know why different bundles are generated.

Because of the Differential Loading feature, Angular 8 produces bundles for legacy browsers (ES5 bundles) and modern browsers (ES2015 bundles). If those bundles are generated, depends on your settings in tsconfig.json (as you mentioned) and the browserslist file.
See details in the documentation.

Im short, the target property of the tsconfig.json defines the upper bound that should be supported (only es2015 at the moment) and the configuration in the browserslist file defines the lower bound. Out of this information and the chosen method to run the code (ng serve / ng build /...) the CLI determines which bundles to create.

In your case for ng build --watch it is the same as for ng serve, only an ES2015 bundle is produced out of performance reasons and to make debugging easier.

I don't know what the correct way is to embed those script to the html-files.

As already mentioned, the CLI automatically configures your index.html. For the other files that don't get changed by the Angular CLI, you have to manually add the script tags.

• <script src="...-es5.js" nomodule></script>
  This will only be consumed by legacy browsers because of the 'nomodule' attriubte.
• <script src="...-es2015.js" type="module"></script>
  This will only be consumed by modern browsers because of the type="modlue" attribute

来源：https://stackoverflow.com/questions/56856341/differences-between-ng-build-and-ng-build-watch