Angular ng构建和ng构建之间的差异——请注意

我已经将Angular应用程序更新为Angular 8，现在我想尝试“差异加载”。在

tsconfig.json

中，将

target

设置为

es2015

现在，如果我使用

ng build

构建应用程序，我将从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]

如果我使用

ng build--watch

（与

ng serve

相同的捆绑包）构建应用程序，我会得到以下输出：

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]

---

为什么不生成相同的包？我这样问是因为我不知道将这些脚本嵌入

html

-文件的正确方法。

如果需要在文件更改时重新生成角度代码，可以使用

--watch

子句

发件人：

--watch=true | false

在文件更改时运行构建。默认值：

false

---

如果需要在文件更改时重新生成角度代码，可以使用子句

--watch

发件人：

--watch=true | false

在文件更改时运行构建。默认值：

false

---

正如您所提到的，Angular 8带来了一个新的差异加载功能。现在，

ngbuild

正在构建每个JS包的2个版本。旧的ES5语法和新的现代ES2015版本（JS模块）针对最新版本的浏览器进行了优化

为什么有两个版本？ 因为旧的浏览器将忽略ES2015捆绑包，而只下载并执行“旧”捆绑包。（标记为

nomodule

）

你应该考虑在开发模式中使用<代码> NG Service < /代码>，生成将被优化，更少的文件将被生成（不再有ES5+ES2015）。 和

ng build--prod

用于部署

您可以在中阅读更多详细信息

同样适用于发现这一新功能的任何人：斯蒂芬·弗林

您可以通过在

tsconfig.json

---

正如您所提到的，Angular 8带来了一个新的差异加载功能。现在，

ngbuild

正在构建每个JS包的2个版本。旧的ES5语法和新的现代ES2015版本（JS模块）针对最新版本的浏览器进行了优化

为什么有两个版本？ 因为旧的浏览器将忽略ES2015捆绑包，而只下载并执行“旧”捆绑包。（标记为

nomodule

）

你应该考虑在开发模式中使用<代码> NG Service < /代码>，生成将被优化，更少的文件将被生成（不再有ES5+ES2015）。 和

ng build--prod

用于部署

您可以在中阅读更多详细信息

同样适用于发现这一新功能的任何人：斯蒂芬·弗林

您可以通过在

tsconfig.json

---

是的，我知道，也许我有点不清楚，但我想知道为什么会生成不同的包

由于差异加载特性，Angular 8为传统浏览器（ES5捆绑包）和现代浏览器（ES2015捆绑包）生成捆绑包。 如果生成这些捆绑包，则取决于您在

tsconfig.json

（如您所述）和

浏览器列表

文件中的设置。

简而言之，

tsconfig.json

的target属性定义了应该支持的上限（目前只有es2015），而

browserslist

文件中的配置定义了下限。根据这些信息和选择的运行代码的方法（ng serve/ng build/…），CLI将确定要创建的捆绑包

对于

ng build--watch

来说，它与

ng serve

的情况相同，出于性能原因，为了使调试更容易，只生成了一个ES2015捆绑包

我不知道将这些脚本嵌入html文件的正确方法是什么

如前所述，CLI会自动配置

index.html

。 对于Angular CLI未更改的其他文件，必须手动添加脚本标记

• 
  由于“nomodule”属性，这只会被传统浏览器使用

• 
  由于

  type=“modlue”

  属性，这只会被现代浏览器使用

---

是的，我知道，也许我有点不清楚，但我想知道为什么会生成不同的包

由于差异加载特性，Angular 8为传统浏览器（ES5捆绑包）和现代浏览器（ES2015捆绑包）生成捆绑包。 如果生成这些捆绑包，则取决于您在

tsconfig.json

（如您所述）和

浏览器列表

文件中的设置。

简而言之，

tsconfig.json

的target属性定义了应该支持的上限（目前只有es2015），而

browserslist

文件中的配置定义了下限。根据这些信息和选择的运行代码的方法（ng serve/ng build/…），CLI将确定要创建的捆绑包

对于

ng build--watch

来说，它与

ng serve

的情况相同，出于性能原因，为了使调试更容易，只生成了一个ES2015捆绑包

我不知道将这些脚本嵌入html文件的正确方法是什么

如前所述，CLI会自动配置

index.html

。 对于Angular CLI未更改的其他文件，必须手动添加脚本标记

• 
  由于“nomodule”属性，这只会被传统浏览器使用

• 
  由于

  type=“modlue”

  属性，这只会被现代浏览器使用

---

我不知道将这些脚本嵌入html文件的正确方法是什么。注意：CLI会为您这样做。不，我有很多html页面使用不同配置的应用程序。这些f

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