在运行常规ng build
与ng build --watch
时,角度如何产生不同的束?
我已通过在使用ng build
创建的应用程序上运行ng build --watch
和ng new
对此进行了验证。
我需要事先知道包名称是什么,因为它们将与ASP.NET的BundleConfig一起使用,这就是为什么我希望生成的输出在常规生成和带有watch标志的生成之间保持一致的原因。
我正在使用Angular 8。
如您在ng build --watch
下方看到的那样,生成的输出没有将es5 / es2015附加到包名称中,除了polyfills。
$ ng build
Date: 2019-06-05T06:48:01.672Z
Hash: 36c34ee221d2ae159bb9
Time: 6625ms
chunk {main} main-es5.js, main-es5.js.map (main) 10.4 kB [initial] [rendered]
chunk {polyfills} polyfills-es5.js, polyfills-es5.js.map (polyfills) 546 kB [initial] [rendered]
chunk {runtime} runtime-es5.js, runtime-es5.js.map (runtime) 6.08 kB [entry] [rendered]
chunk {styles} styles-es5.js, styles-es5.js.map (styles) 16.7 kB [initial] [rendered]
chunk {vendor} vendor-es5.js, vendor-es5.js.map (vendor) 3.7 MB [initial] [rendered]
Date: 2019-06-05T06:48:06.348Z
Hash: efd3de5e2da11726f422
Time: 4639ms
chunk {main} main-es2015.js, main-es2015.js.map (main) 10.1 kB [initial] [rendered]
chunk {polyfills} polyfills-es2015.js, polyfills-es2015.js.map (polyfills) 250 kB [initial] [rendered]
chunk {runtime} runtime-es2015.js, runtime-es2015.js.map (runtime) 6.08 kB [entry] [rendered]
chunk {styles} styles-es2015.js, styles-es2015.js.map (styles) 16.7 kB [initial] [rendered]
chunk {vendor} vendor-es2015.js, vendor-es2015.js.map (vendor) 3.61 MB [initial] [rendered]
$ ng build --watch
Date: 2019-06-05T06:48:44.350Z
Hash: 55cc7c8d13a9047850cc
Time: 7073ms
chunk {main} main.js, main.js.map (main) 10.1 kB [initial] [rendered]
chunk {polyfills} polyfills.js, polyfills.js.map (polyfills) 248 kB [initial] [rendered]
chunk {polyfills-es5} polyfills-es5.js, polyfills-es5.js.map (polyfills-es5) 380 kB [initial] [rendered]
chunk {runtime} runtime.js, runtime.js.map (runtime) 6.08 kB [entry] [rendered]
chunk {styles} styles.js, styles.js.map (styles) 16.7 kB [initial] [rendered]
chunk {vendor} vendor.js, vendor.js.map (vendor) 3.61 MB [initial] [rendered]
答案 0 :(得分:2)
我在StackOverflow上发布了similar question。我注意到,运行ng build
与ng build --watch
时,捆绑包是不同的。如果您想知道为什么它们不一样... ng build
输出的捆绑软件的ES5版本支持新的Angular 8差分加载功能。事实证明,出于性能原因,默认情况下ng serve
和ng build --watch
的差异加载被禁用。 Github discussion很好地解释了在这种情况下需要使用差异加载的原因和解决方法。
答案 1 :(得分:1)
出于不同的目的,我遇到了一个相同的问题:建立之后,我必须为ASP.NET编写一个文件,将其汇总,以便可以手动将其写入{{1} }文件。
我只是做了一个小节点脚本,需要在每次构建后使用index.cshtml
标志运行该脚本。这是:
--stats-json
答案 2 :(得分:0)
我仅在非开发环境中使用BundleConfig解决了该问题。我只需要在非开发环境中使用BundleConfig,因为这些捆绑包是用哈希命名的。
开发时,我必须使用ng build --watch而不是ng build。
这不是最好的解决方案,但这将对我有用,直到我们重构 该应用程序,因此我们可以改用ng serve。
@if (Model.IsDev)
{
@{ /* These are produced when running ng build --watch }
<script src="/Static/dist/runtime.js"></script>
<script src="/Static/dist/polyfills-es5.js" nomodule></script>
<script src="/Static/dist/polyfills.js"></script>
<script src="/Static/dist/scripts.js"></script>
<script src="/Static/dist/vendor.js"></script>
<script src="/Static/dist/main.js"></script>
}
else
{
@{ /* These are produced when running ng build or ng build --prod }
@Scripts.RenderFormat("<script src='{0}' type='module'></script>", "~/scripts/runtime-es2015")
@Scripts.RenderFormat("<script src='{0}' type='module'></script>", "~/scripts/polyfills-es2015")
@Scripts.RenderFormat("<script src='{0}' nomodule></script>", "~/scripts/runtime-es5")
@Scripts.RenderFormat("<script src='{0}' nomodule></script>", "~/scripts/polyfills-es5")
@Scripts.Render("scripts")
@Scripts.RenderFormat("<script src='{0}' type='module'></script>", "~/scripts/vendor-es2015")
@Scripts.RenderFormat("<script src='{0}' type='module'></script>", "~/scripts/main-es2015")
@Scripts.RenderFormat("<script src='{0}' nomodule></script>", "~/scripts/vendor-es5")
@Scripts.RenderFormat("<script src='{0}' nomodule></script>", "~/scripts/main-es5")
}
我的BundleConfig看起来像这样:
public class BundleConfig
{
public static void RegisterBundles(BundleCollection bundles, bool isDevEnv)
{
// Already minified by angular-cli
BundleTable.EnableOptimizations = false;
if (!isDevEnv)
{
bundles.Add(new StyleBundle("~/styles")
.Include("~/Static/dist/styles.*"));
bundles.Add(CreateScriptBundle("runtime-es2015"));
bundles.Add(CreateScriptBundle("polyfills-es2015"));
bundles.Add(CreateScriptBundle("runtime-es5"));
bundles.Add(CreateScriptBundle("polyfills-es5"));
bundles.Add(CreateScriptBundle("scripts"));
bundles.Add(CreateScriptBundle("vendor-es2015"));
bundles.Add(CreateScriptBundle("main-es2015"));
bundles.Add(CreateScriptBundle("vendor-es5"));
bundles.Add(CreateScriptBundle("main-es5"));
}
}
private static Bundle CreateScriptBundle(string name)
{
return new ScriptBundle($"~/scripts/{name}")
.Include($"~/Static/dist/{name}.*");
}
}