时间戳

首页 > 解决方案 > ng build 和 ng build --watch 的区别

angular - ng build 和 ng build --watch 的区别

问题描述

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

标签： angularwebpackangular-cliangular8

解决方案

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

为什么是 2 个版本？ 因为旧浏览器会忽略 ES2015 包，只下载并执行“旧”包。（标记为nomodule）。

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

您可以在Angular 官方文档中阅读更多详细信息

也适用于任何发现此新功能的人：Angular 8 版——更小的捆绑包、CLI API 以及Stephen Fluin 与生态系统的一致性。

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

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

推荐阅读