4

我正在尝试配置我的 Angular 8 项目构建以保留函数和类名（我需要我的类名来使用反射和其他基于类名的东西）。为了管理这个，我使用@angular-builders/custom-webpackwhich 允许覆盖 webpack 配置。

"architect": {
    "build": {
        "builder": "@angular-builders/custom-webpack:browser",
        "options": {
            "customWebpackConfig": {
                "path": "./extra-webpack.config.js",
                "mergeStrategies": {
                    "externals": "replace",
                }
            },

我的extra-webpack.config.js：

console.log('Custom webpack config');
const TerserPlugin = require('terser-webpack-plugin');

module.exports = {
    optimization: {
        minimizer: [
            new TerserPlugin({
                terserOptions: {
                    keep_classnames: true,
                    keep_fnames: true,
                }
            })
        ]
    }
};

正如Terser 文档中所说，keep_classnames用于保留类名称并keep_fnames用于保留函数名称。

问题是我的类名和函数名不见了，我在 main.XXXX.js 构建文件中找不到它们，并且我的应用程序无法正常工作，因为反射不起作用。

我确定我extra-webpack.config.js的不会被忽略，因为我可以"Custom webpack config"在控制台上看到日志。

我应该配置其他东西来保留我的函数和类名吗？

4

1 回答 1

0

你可以覆盖它，我在生产中为自己节省了 50 秒的编译时间，尽管我建议只将它用于调试。您还必须为 prodbuild 覆盖 customWebpackConfig，如下所示：

"production": {
          "customWebpackConfig": {
            "path": "./webpack.config.js"
          },
          "fileReplacements": [
            {
              "replace": "/apps/shared/src/environments/environment.ts",
              "with": "/apps/shared/src/environments/environment.prod.ts"
            }
          ],
          "optimization": true,
          "outputHashing": "none",
          "deleteOutputPath": false,
          "extractLicenses": false,
          "statsJson": false,
          "sourceMap": false,
          "extractCss": true,
          "namedChunks": false,
          "vendorChunk": true,
          "buildOptimizer": true,
          "watch": false,
          "budgets": [
            {
              "type": "initial",
              "maximumWarning": "12mb",
              "maximumError": "15mb"
            },
            {
              "type": "anyComponentStyle",
              "maximumWarning": "6kb",
              "maximumError": "10kb"
            }
          ]
        },

同样在您的 webpack 配置中，您可以这样做：

optimization: {
concatenateModules: false,
minimizer: [
  new TerserPlugin({
    terserOptions: {
      keep_classnames: environment.optimizeTerser ? true : '/./',
      keep_fnames: environment.optimizeTerser ? true : '/./',
    },
  }),
],
},

根据这篇文章，出于明显的原因，将其设置为 true 并不好： https ://medium.com/@omril321/fixing-overly-aggressive-optimization-with-terser-f07309761b50

保持包大小 这还不够好，我们仍然希望我们的包尽可能地缩小。如果我们使用“keep_fnames: true”，那么我们的函数名称不会被缩小，因此我们的包大小会增加。TerserPlugin 接受正则表达式作为 keep_fnames 的参数。我们使用了正则表达式“keep_fnames: /./”，这意味着——如果函数的名称为 1 个字符，则不要更改它的名称（你打算如何处理它？）这样问题就解决了，而将包大小保持在最小。

于 2020-10-06T09:43:19.053 回答