Question

我已将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文件中的正确方法是什么。

Answer 1

正如您提到的，Angular 8带来了新的差异加载功能。现在，ng build正在为每个JS包构建2个版本。旧的ES5语法和新的现代ES2015版本（JS模块）已针对最新版本的浏览器进行了优化。

为什么有2个版本？ 因为旧的浏览器将忽略ES2015捆绑软件，而仅下载并执行“旧的”捆绑软件。（标记为nomodule）。

您应该考虑在开发模式下使用ng serve，将为此优化构建，减少生成的文件（不再有ES5 + ES2015）。然后ng build --prod进行部署。

您可以在Angular Official docs

中阅读更多详细信息

对于发现此新功能的任何人：斯蒂芬·弗林（Stephen Fluin）的Version 8 of Angular — Smaller bundles, CLI APIs, and alignment with the ecosystem。

您可以通过将tsconfig.json中的目标设置回es5来退出此更改。

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

Answer 2

如果需要在文件更改时重新构建角度代码，则可以使用--watch子句。

来自documentation：

--watch=true|false在文件更改时运行构建。默认值：false

Answer 3

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

由于差异加载功能，Angular 8会为传统浏览器（ES5捆绑包）和现代浏览器（ES2015捆绑包）生成捆绑包。如果生成了这些捆绑包，则取决于您在tsconfig.json（如前所述）和browserslist文件中的设置。
See details in the documentation。

简而言之，tsconfig.json的target属性定义了应该支持的上限（目前仅 es2015 ），browserslist文件中的配置定义了下限。根据这些信息以及所选择的运行代码的方法（ng serve / ng build /...），CLI会确定要创建的捆绑软件。

对于ng build --watch，您的情况与ng serve相同，只是出于性能原因而制作了ES2015捆绑包，并使调试更加容易。

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

如前所述，CLI自动配置您的index.html。对于Angular CLI不会更改的其他文件，您必须手动添加脚本标签。

<script src="...-es5.js" nomodule></script>
由于“ nomodule”属性，这只会由旧版浏览器使用。
<script src="...-es2015.js" type="module"></script>
由于type="modlue"属性

ng build和ng build --watch

3 个答案: