Несоответствующий вывод пакета между ng build и ng build --watch

Question

Как получается, что angular создает разные связки при запуске обычного ng build против ng build --watch?

Я подтвердил это, запустив ng build & ng build --watch в приложении, созданном с помощью ng new.

Мне нужно заранее знать, какие имена пакетов, потому что они будут обслуживаться с помощью BundleConfig в ASP.NET, поэтому я хотел бы, чтобы выходные данные сборки были согласованы между обычной сборкой и сборкой с флагом наблюдения.

Я использую Angular 8.

Как вы можете видеть ниже, ng build --watch производит вывод сборки, к которому не добавляется 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]

Answer 1

У меня был похожий вопрос , опубликованный в StackOverflow.Я заметил, что при работе ng build пакеты отличались от ng build --watch.На случай, если вам интересно, почему они отличаются ... Версии комплектов ES5, выводимые ng build, поддерживают новую функцию дифференциальной загрузки Angular 8.Оказывается, что дифференциальная загрузка отключена для ng serve и ng build --watch по умолчанию из соображений производительности.В этом обсуждении Github дается хорошее объяснение причин и способов их решения в случае, если вам необходимо использовать дифференциальную загрузку в этих сценариях.

Answer 2

Для другой цели я столкнулся с такой же проблемой: после сборки мне пришлось написать файл для 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.

Answer 3

Я решил это, используя только BundleConfig в не-dev средах. Мне нужен только BundleConfig в среде, отличной от dev, потому что пакеты именуются хешами.

Я должен использовать ng build --watch вместо ng build при разработке.

Не лучшее решение, но это будет работать для меня, пока мы не проведем рефакторинг приложение, поэтому мы можем использовать вместо нг служить.

    @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}.*");
        }
    }