ng build 和 ng build --watch 之间的包输出不一致
Inconsistent bundle output between ng build and ng build --watch
当 运行 常规 ng build 与 ng build --watch 时，angular 为什么会产生不同的捆绑包？
我已经通过 运行 ng build & ng build --watch 在使用 ng new 创建的应用程序上验证了这一点。
我需要事先知道包名称是什么，因为它们将与 ASP.NET 的 BundleConfig 一起提供，这就是为什么我希望构建输出在常规构建和构建之间保持一致手表标志。
我正在使用 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]
为了不同的目的，我遇到了一个相同的问题：构建后，我不得不为 ASP.NET 编写一个文件来总结这些包，这样它就可以在index.cshtml 文件。
我只是做了一个小节点脚本，需要在每次构建后使用 --stats-json 标志 运行。在这里：
const fs = require('fs');
// Don't do if dist not existing
if (!fs.existsSync('./dist')) return;
if (!fs.existsSync('./dist/myProject/stats.json')) return;
// Remove previous file
if (fs.existsSync('./dist/myProject/bundle-chunks.json')) fs.unlinkSync('./dist/myProject/bundle-chunks.json');
// Read file, parse to JSON
const statsStr = fs.readFileSync('./dist/myProject/stats.json').toString();
const statsJson = JSON.parse(statsStr);
// Get corresponding property
const assets = statsJson.assetsByChunkName;
// Transform the object into an array with more information
const payload = Object.keys(assets).reduce((pk, nk) => {
const key = nk;
const ext = assets[nk].split('.').pop();
const path = assets[nk];
pk.push({ key, ext, path });
return pk;
}, []);
// Reduce the array to build a JSON object of typ { scripts: [], styles: [] }
const metas = payload.reduce((p, n) => {
if (n.ext === 'js')
p.scripts.push(`<script type="text/javascript" src="./${n.path}" ${n.path.includes('polyfill') ? 'nomodule' : ''}></script>`);
if (n.ext === 'css')
p.styles.push(`<link rel="stylesheet" href="./${n.path}">`);
return p;
}, { styles: [], scripts: [] });
// Save in file
fs.writeFileSync('./dist/myProject/bundle-chunks.json', JSON.stringify(metas, null, 2));
// Notify
console.log('Bundle chunks written to bundle-chunks.json file');
// Scripts files are to be added to the end of the body (to incread load time and let the page display itself while loading)
// Style files are to be added to the head of the application.
我通过在 non-dev 环境中仅使用 BundleConfig 解决了这个问题。我只需要在 non-dev 环境中使用 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}.*");
}
}
我有一个 similar question posted on Whosebug. I noticed that the bundles were different when running ng build vs. ng build --watch. In case you were wondering why they are different... The ES5 versions of bundles output by ng build support the new Angular 8 differential loading feature. It turns out that differential loading is disabled for ng serve and ng build --watch by default for performance reasons. This Github discussion 很好地解释了原因和解决方法，以防您需要在这些情况下使用差异加载。
当 运行 常规 ng build 与 ng build --watch 时，angular 为什么会产生不同的捆绑包？
我已经通过 运行 ng build & ng build --watch 在使用 ng new 创建的应用程序上验证了这一点。
我需要事先知道包名称是什么，因为它们将与 ASP.NET 的 BundleConfig 一起提供，这就是为什么我希望构建输出在常规构建和构建之间保持一致手表标志。
我正在使用 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]
为了不同的目的，我遇到了一个相同的问题：构建后，我不得不为 ASP.NET 编写一个文件来总结这些包，这样它就可以在index.cshtml 文件。
我只是做了一个小节点脚本，需要在每次构建后使用 --stats-json 标志 运行。在这里：
const fs = require('fs');
// Don't do if dist not existing
if (!fs.existsSync('./dist')) return;
if (!fs.existsSync('./dist/myProject/stats.json')) return;
// Remove previous file
if (fs.existsSync('./dist/myProject/bundle-chunks.json')) fs.unlinkSync('./dist/myProject/bundle-chunks.json');
// Read file, parse to JSON
const statsStr = fs.readFileSync('./dist/myProject/stats.json').toString();
const statsJson = JSON.parse(statsStr);
// Get corresponding property
const assets = statsJson.assetsByChunkName;
// Transform the object into an array with more information
const payload = Object.keys(assets).reduce((pk, nk) => {
const key = nk;
const ext = assets[nk].split('.').pop();
const path = assets[nk];
pk.push({ key, ext, path });
return pk;
}, []);
// Reduce the array to build a JSON object of typ { scripts: [], styles: [] }
const metas = payload.reduce((p, n) => {
if (n.ext === 'js')
p.scripts.push(`<script type="text/javascript" src="./${n.path}" ${n.path.includes('polyfill') ? 'nomodule' : ''}></script>`);
if (n.ext === 'css')
p.styles.push(`<link rel="stylesheet" href="./${n.path}">`);
return p;
}, { styles: [], scripts: [] });
// Save in file
fs.writeFileSync('./dist/myProject/bundle-chunks.json', JSON.stringify(metas, null, 2));
// Notify
console.log('Bundle chunks written to bundle-chunks.json file');
// Scripts files are to be added to the end of the body (to incread load time and let the page display itself while loading)
// Style files are to be added to the head of the application.
我通过在 non-dev 环境中仅使用 BundleConfig 解决了这个问题。我只需要在 non-dev 环境中使用 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}.*");
}
}
我有一个 similar question posted on Whosebug. I noticed that the bundles were different when running ng build vs. ng build --watch. In case you were wondering why they are different... The ES5 versions of bundles output by ng build support the new Angular 8 differential loading feature. It turns out that differential loading is disabled for ng serve and ng build --watch by default for performance reasons. This Github discussion 很好地解释了原因和解决方法，以防您需要在这些情况下使用差异加载。