如何缩小 Angular 8 Dev Build答案

【问题标题】：How to minify Angular 8 Dev Build如何缩小 Angular 8 Dev Build
【发布时间】：2020-12-01 22:37:46
【问题描述】：

默认情况下，Angular CLI (ver-8) 不会删除 cmets 并缩小 js dev build 生成的文件。（main.js、vendor.js、scripts.js 等）。

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

我添加了自己的 webpack 文件 webpackext.config.js。并通过“@angular-builders/custom-webpack:browser 使用它。我可以使用以下配置从生成的文件中删除 cmets。我还需要使用一些插件来缩小生成的文件。我们如何做到这一点，需要有关插件的信息以及配置方法。

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 升级到了 Angular 8。在 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

【问题讨论】：

标签： angular build compression webpack-4

【解决方案1】：

为什么需要丑化开发版本？开发版本不应该去任何地方，除了你的开发盒。

所有 QA/prod 版本都应该是自动进行 tree-shaking 和 uglified 的 prod 版本。

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

【讨论】：

我们的页面在 DEV 上打开速度很慢。我们还没有在 PROD 上部署，并且需要一些时间才能在 PROD 上。所以我们想在DEV上测试一下，如果打开慢的原因是文件没有缩小。这不是希望在 DEV 上缩小它的正当理由吗？
不应期望开发环境中的性能达到生产级别。非缩小和非摇树构建（根据定义）不是优化的代码，因此不会像它一样运行。如果您担心速度，请进行产品构建并再次对该输出进行性能测试。

【解决方案2】：

我现在通过将其添加到angular.json 文件中的configurations 部分来解决它：

"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

【讨论】：