如何最小化Angular 8 Dev Build

问题描述

默认情况下，Angular CLI（ver-8）不会删除注释并最小化js dev构建生成的文件。 （main.js，vendor.js，scripts.js等）。

我们正在导入JitCompiler，因此需要具有优化生成的输出文件（vendor.js，main.js ect）的Dev Build

我添加了自己的webpack文件webpackext.config.js。并通过“ @ angular-builders / custom-webpack：browser”使用它。我能够使用以下配置从生成的文件中删除注释。我还需要使用某些插件来缩小生成的文件。我们该怎么做，需要有关插件的信息和配置方法。

const UglifyJsPlugin = require('uglifyjs-webpack-plugin');
const path = require("path");

module.exports = {
  entry: './src/main.js',output: {
    filename: '[name].bundle.js',path: path.resolve(__dirname,'dist')
  },plugins: [
    new UglifyJsPlugin({
      uglifyOptions: {
     
        output: {
          comments: false
        }

      }
    })
  ]
}  

为什么需要这个：我们正在使用Require JS加载延迟加载的模块。延迟加载的模块（sample.module.js）由最终用户放置。他们从应用程序生成延迟加载的模块。由于将jit编译器导入我们的系统以按需创建最终用户的组件，因此我们无法进行生产构建。我们已将系统从angular 4升级到angular8。在Angular 4上，所有js文件都已缩小。但是在Angular 8中，js文件的大小增加了一倍。

    require.ensure(
          ["assets/samples/sample.module.js"],(require) => {
            let SampleCo = require(assets/samples/sample.module.js");
            this._compiler
              .compileModuleAndAllComponentsAsync(
                SampleCo.SampleCustomModule
              ).then((compiled) => {
                const component1 = compiled.componentFactories.find(
                  (m) => m.selector == "sample-comp1"
                );    });
              //here we create component with ViewContainerRefr
          },"custom/sampleLib" 
}

使用UglifyJsPlugin后，将生成的js文件缩小。但是在加载系统时出现错误，错误如下

Uncaught Error: Can't resolve all parameters for hC: (?).
    at Li (vendor.js:1)
    at n_._getDependenciesMetadata (vendor.js:1)
    at n_._getTypeMetadata (vendor.js:1)
    at n_.getNgModuleMetadata (vendor.js:1)
    at n_.getNgModuleSummary (vendor.js:1)
    at vendor.js:1
    at Array.forEach (<anonymous>)
    at n_.getNgModuleMetadata (vendor.js:1)
    at n_.getNgModuleSummary (vendor.js:1)
    at vendor.js:1

解决方法

您为什么需要取消开发版本？开发人员构建永远都不能移到您的开发箱之外。

所有QA / prod版本均应为prod版本，并会自动摇晃和丑化。

因此，您希望不调试调试代码，以便浏览器工具中的“源”选项卡可读。

,

我现在通过将其添加到 configurations 文件的 angular.json 部分解决了这个问题：

"configurations": {
            "dev": {
              "optimization": true,"outputHashing": "all","sourceMap": false,"extractCss": true,"namedChunks": false,"extractLicenses": true,"vendorChunk": false,"buildOptimizer": true,"budgets": [
                {
                  "type": "initial","maximumWarning": "2mb","maximumError": "5mb"
                },{
                  "type": "anyComponentStyle","maximumWarning": "6kb","maximumError": "10kb"
                }
              ]
            }
}

然后运行：ng build -c=dev