3

ng build运行常规vs时，角度如何产生不同的捆绑包ng build --watch？

我已经通过在使用创建的应用程序上运行ng build&来验证这一点。ng build --watchng new

我需要事先知道包名称是什么，因为它们将与 ASP.NET 的 BundleConfig 一起提供，这就是为什么我希望构建输出在常规构建和带有监视标志的构建之间保持一致。

我正在使用 Angular 8。

正如您在下面看到的ng build --watch，除了 polyfill 之外，没有将 es5/es2015 附加到包名称的生成构建输出。

$ 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]
4

3 回答 3

4

我在 StackOverflow 上发布了一个类似的问题。我注意到运行时捆绑包ng build与ng build --watch.. 如果您想知道为什么它们不同... ES5 版本的 bundle 输出ng build支持新的 Angular 8 差异加载功能。事实证明，由于性能原因，默认情况下ng serve禁用差异加载。ng build --watch这个Github 讨论很好地解释了原因和解决方法，以防您需要在这些场景中使用差异加载。

于 2019-06-11T15:00:05.117 回答
1

出于不同的目的，我遇到了同样的问题：一旦构建，我必须为 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.
于 2019-06-05T07:24:01.657 回答
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}.*");
        }
    }
于 2019-06-05T08:49:01.900 回答