Que dois-je faire si le mode de développement Angular13+ est trop lent ? Causes et solutions

Que dois-je faire si le mode de développement Angular13+ est trop lent ? L'article suivant vous présentera les raisons pour lesquelles le mode de développement d'Angular 13+ est trop lent et comment optimiser les performances de build. J'espère qu'il vous sera utile !

1 Raisons et solutions pour le mode de développement lent d'Angular 13+

Récemment, après la mise à niveau d'un projet Angular avec des itérations à haute fréquence pendant sept ans vers Angular 13, son mode de développement a été lent à construire et occupé ressources élevées. , l’expérience de développement est assez pauvre. Lorsque je lance une version sur un Macbook air que je n'utilise qu'occasionnellement pour des réunions (et qui est récemment devenu mon principal outil de productivité pendant la période de travail à domicile), ses ventilateurs tournent et le processeur est au maximum. . Une fois la construction terminée, une mise à jour à chaud prend plus d'une minute. [Recommandation de tutoriel associée : "tutoriel angulaire"]Macbook air（近期居家办公期间转换为了主要生产力工具） 中启动构建时，它的风扇会呼呼作响，CPU 负荷被打满，而在构建完成后，热更新一次的时间在一分钟以上。【相关教程推荐：《angular教程》】

在经过各种原因分析与排查后，最终在 angular.json 的 schema(./node_modules/@angular/cli/lib/config/schema.json) 中发现了问题，再结合 Angular 12 release 文档定位到了具体原因： Angular 12 一个主要的改动是将 aot、buildOptimizer、optimization 等参数由默认值 false 改为了 true。

A number of browser and server builder options have had their default values changed. The aim of these changes is to reduce the configuration complexity and support the new "production builds by default" initiative.

可以看到 Angular 12 后的默认生产模式，对于跨版本升级来说是比较坑爹的。我们可以从这个提交中了解变动细节：656f8d7

1.1 解决 Angular 12+ 开发模式慢的问题

解决办法则是在 development 配置中禁用生产模式相关的配置项。示例：

{
  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
  "projects": {
    "front": {
      "architect": {
        "build": {
          "configurations": {
            "development": {
              "tsConfig": "./tsconfig.dev.json",
              "aot": false,
              "buildOptimizer": false,
              "optimization": false,
              "extractLicenses": false,
              "sourceMap": true,
              "vendorChunk": true,
              "namedChunks": true
            }
          }
        },
    }
  },
  "defaultProject": "front"
}

需注意 aot 开启与关闭时，在构建结果表现上可能会有一些差异，需视具体问题而分析。

1.2 问题：开启 aot 后 pug 编译报错

该项目中使用 pug 开发 html 内容。关闭 aot 时构建正常，开启后则会报错。

根据报错内容及位置进行 debugger 调试，可以看到其编译结果为一个 esModule 的对象。这是由于使用了 raw-loader，其编译结果默认为 esModule 模式，禁用 esModule 配置项即可。示例（自定义 webpack 配置可参考下文的 dll 配置相关示例）：

{
  test: /\.pug$/,
  use: [
    {
      loader: 'raw-loader',
      options: {
        esModule: false,
      },
    },
    {
      loader: 'pug-html-loader',
      options: {
        doctype: 'html',
      },
    },
  ],
},

2 进一步优化：Angular 自定义 webpack 配置 dll 支持

该项目项目构建上有自定义 webpack 配置的需求，使用了 @angular-builders/custom-webpack 库实现，但是没有配置 dll。

Angular 提供了 vendorChunk 参数，开启它会提取在 package.json 中的依赖等公共资源至独立 chunk 中，其可以很好的解决热更新 bundles 过大导致热更新太慢等的问题，但仍然存在较高的内存占用，而且实际的对比测试中，在存在 webpack5 缓存的情况下，其相比 dll 模式的构建编译速度以及热更新速度都稍微慢一些。故对于开发机器性能一般的情况下，给开发模式配置 dll 是会带来一定的收益的。

2.1 Angular 支持自定义 webpack 配置

首先需要配置自定义 webpack 配置的构建支持。执行如下命令添加依赖：

npm i -D @angular-builders/custom-webpack

修改 angluar.json 配置。内容格式参考：

{
  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
  "cli": {
    "analytics": false,
    "cache": {
      "path": "node_modules/.cache/ng"
    }
  },
  "version": 1,
  "newProjectRoot": "projects",
  "projects": {
    "front": {
      "root": "",
      "sourceRoot": "src",
      "projectType": "application",
      "prefix": "app",
      "schematics": {
        "@schematics/angular:component": {
          "style": "less"
        }
      },
      "architect": {
        "build": {
          "builder": "@angular-builders/custom-webpack:browser",
          "options": {
            "customWebpackConfig": {
              "path": "./webpack.config.js"
            },
            "indexTransform": "scripts/index-html-transform.js",
            "outputHashing": "media",
            "deleteOutputPath": true,
            "watch": true,
            "sourceMap": false,
            "outputPath": "dist/dev",
            "index": "src/index.html",
            "main": "src/app-main.ts",
            "polyfills": "src/polyfills.ts",
            "tsConfig": "./tsconfig.app.json",
            "baseHref": "./",
            "assets": [
              "src/assets/",
              {
                "glob": "**/*",
                "input": "./node_modules/@ant-design/icons-angular/src/inline-svg/",
                "output": "/assets/"
              }
            ],
            "styles": [
              "node_modules/angular-tree-component/dist/angular-tree-component.css",
              "src/css/index.less"
            ],
            "scripts": []
          },
          "configurations": {
            "development": {
              "tsConfig": "./tsconfig.dev.json",
              "buildOptimizer": false,
              "optimization": false,
              "aot": false,
              "extractLicenses": false,
              "sourceMap": true,
              "vendorChunk": true,
              "namedChunks": true,
              "scripts": [
                {
                  "inject": true,
                  "input": "./dist/dll/dll.js",
                  "bundleName": "dll_library"
                }
              ]
            },
            "production": {
              "outputPath": "dist/prod",
              "baseHref": "./",
              "watch": false,
              "fileReplacements": [
                {
                  "replace": "src/environments/environment.ts",
                  "with": "src/environments/environment.prod.ts"
                }
              ],
              "optimization": {
                "scripts": true,
                "styles": {
                  "minify": true,
                  "inlineCritical": false
                },
                "fonts": true
              },
              "outputHashing": "all",
              "sourceMap": false,
              "namedChunks": false,
              "aot": true,
              "extractLicenses": false,
              "vendorChunk": false,
              "buildOptimizer": true
            }
          },
          "defaultConfiguration": "production"
        },
        "serve": {
          "builder": "@angular-builders/custom-webpack:dev-server",
          "options": {
            "browserTarget": "front:build",
            "liveReload": false,
            "open": false,
            "host": "0.0.0.0",
            "port": 3002,
            "servePath": "/",
            "publicHost": "localhost.gf.com.cn",
            "proxyConfig": "config/ngcli-proxy-config.js",
            "disableHostCheck": true
          },
          "configurations": {
            "production": {
              "browserTarget": "front:build:production"
            },
            "development": {
              "browserTarget": "front:build:development"
            }
          },
          "defaultConfiguration": "development"
        },
        "test": {
          "builder": "@angular-builders/custom-webpack:karma",
          "options": {
            "customWebpackConfig": {
              "path": "./webpack.test.config.js"
            },
            "indexTransform": "scripts/index-html-transform.js",
            "main": "src/ngtest.ts",
            "polyfills": "src/polyfills.ts",
            "tsConfig": "./tsconfig.spec.json",
            "karmaConfig": "./karma.conf.js",
            "assets": [
              "src/assets/",
              {
                "glob": "**/*",
                "input": "./node_modules/@ant-design/icons-angular/src/inline-svg/",
                "output": "/assets/"
              }
            ],
            "styles": [
              "node_modules/angular-tree-component/dist/angular-tree-component.css",
              "src/css/index.less"
            ],
            "scripts": []
          }
        }
      }
    }
  },
  "defaultProject": "front",
  "schematics": {
    "@schematics/angular:module": {
      "routing": true,
      "spec": false
    },
    "@schematics/angular:component": {
      "flat": false,
      "inlineStyle": true,
      "inlineTemplate": false
    }
  }
}

该示例中涉及多处自定义配置内容，主要需注意 webpack 相关的部分， 其他内容可视自身项目具体情况对比参考。一些细节也可参考以前的这篇文章中的实践介绍：lzw.me/a/update-to…

2.2 为 Angular 配置 webpack dll 支持

新建 webpack.config.js 文件。内容参考：

const { existsSync } = require('node:fs');
const { resolve } = require('node:path');
const webpack = require('webpack');

// require('events').EventEmitter.defaultMaxListeners = 0;

/**
 * @param {import('webpack').Configuration} config
 * @param {import('@angular-builders/custom-webpack').CustomWebpackBrowserSchema} options
 * @param {import('@angular-builders/custom-webpack').TargetOptions} targetOptions
 */
module.exports = (config, options, targetOptions) => {
  if (!config.devServer) config.devServer = {};

  config.plugins.push(
    new webpack.DefinePlugin({ LZWME_DEV: config.mode === 'development' }),
  );

  const dllDir = resolve(__dirname, './dist/dll');
  if (
    existsSync(dllDir) &&
    config.mode === 'development' &&
    options.scripts?.some((d) => d.bundleName === 'dll_library')
  ) {
    console.log('use dll:', dllDir);
    config.plugins.unshift(
      new webpack.DllReferencePlugin({
        manifest: require(resolve(dllDir, 'dll-manifest.json')),
        context: __dirname,
      })
    );
  }

  config.module.rules = config.module.rules.filter((d) => {
    if (d.test instanceof RegExp) {
      // 使用 less，移除 sass/stylus loader
      return !(d.test.test('x.sass') || d.test.test('x.scss') || d.test.test('x.styl'));
    }
    return true;
  });

  config.module.rules.unshift(
    {
      test: /\.pug$/,
      use: [
        {
          loader: 'raw-loader',
          options: {
            esModule: false,
          },
        },
        {
          loader: 'pug-html-loader',
          options: {
            doctype: 'html',
          },
        },
      ],
    },
    {
      test: /\.html$/,
      loader: 'raw-loader',
      exclude: [helpers.root('src/index.html')],
    },
    {
      test: /\.svg$/,
      loader: 'raw-loader',
    },
    {
      test: /\.(t|les)s/,
      loader: require.resolve('@lzwme/strip-loader'),
      exclude: /node_modules/,
      options: {
        disabled: config.mode !== 'production',
      },
    }
  );

  // AngularWebpackPlugin，用于自定义 index.html 处理插件
  const awPlugin = config.plugins.find((p) => p.options?.hasOwnProperty('directTemplateLoading'));
  if (awPlugin) awPlugin.pluginOptions.directTemplateLoading = false;

  // 兼容上古遗传逻辑，禁用部分插件
  config.plugins = config.plugins.filter((plugin) => {
    const pluginName = plugin.constructor.name;
    if (/CircularDependency|CommonJsUsageWarnPlugin/.test(pluginName)) {
      console.log('[webpack][plugin] disabled: ', pluginName);
      return false;
    }

    return true;
  });
  // console.log('[webpack][config]', config.mode, config, options, targetOptions);
  return config;
};

新建 webpack.dll.mjs

Après diverses raisons Après analyse et dépannage, le problème a finalement été trouvé dans le schéma (./node_modules/@angular/cli/lib/config/schema.json) de angular.json, puis Combiné avec Le document de version d'Angular 12 localise les raisons spécifiques : Un changement majeur dans Angular 12 consiste à remplacer aot et buildOptimizer< /code>, <code>optimisation et d'autres paramètres ont été modifiés de la valeur par défaut false à true. 🎜

🎜Un certain nombre d'options de navigateur et de générateur de serveur ont vu leurs valeurs par défaut modifiées. Le but de ces modifications est de réduire la complexité de la configuration et de prendre en charge la nouvelle initiative de "versions de production par défaut".🎜

🎜Oui Étant donné que le mode de production par défaut après Angular 12 est assez délicat pour les mises à niveau entre versions. Nous pouvons connaître les détails du changement à partir de ce commit : 656f8d7🎜

🎜1.1 Résoudre le problème du mode de développement lent d'Angular 12+ 🎜

🎜La solution consiste à désactiver les éléments de configuration liés au mode production dans la configuration développement. Exemple : 🎜

import { join } from 'node:path';
import webpack from 'webpack';

const rootDir = process.cwd();
const isDev = process.argv.slice(2).includes('--dev') || process.env.NODE_ENV === 'development';

/** @type {import('webpack').Configuration} */
const config = {
  context: rootDir,
  mode: isDev ? 'development' : 'production',
  entry: {
    dll: [
      '@angular/common',
      '@angular/core',
      '@angular/forms',
      '@angular/platform-browser',
      '@angular/platform-browser-dynamic',
      '@angular/router',
      '@lzwme/asmd-calc',
      // more...
    ],
  },
  output: {
    path: join(rootDir, 'dist/dll'),
    filename: 'dll.js',
    library: '[name]_library',
  },
  plugins: [
    new webpack.DllPlugin({
      path: join(rootDir, 'dist/dll/[name]-manifest.json'),
      name: '[name]_library',
    }),
    new webpack.IgnorePlugin({
      resourceRegExp: /^\.\/locale$/,
      contextRegExp: /moment$/,
    }),
  ],
  cache: { type: 'filesystem' },
};

webpack(config).run((err, result) => {
  console.log(err ? `Failed!` : `Success!`, err || `${result.endTime - result.startTime}ms`);
});

🎜 Veuillez noter que lorsque aot est activé et désactivé, il peut y avoir des différences dans les performances des résultats de construction, qui doivent être analysées en fonction du problème spécifique. 🎜

🎜1.2 Problème : Après avoir activé aot, pug compile et signale une erreur🎜

🎜 est utilisé dans ce projet carlin développe du contenu html. La construction est normale lorsque aot est désactivé, mais une erreur sera signalée après son activation. 🎜🎜 Effectuez le débogage du débogueur en fonction du contenu et de l'emplacement de l'erreur, et vous pouvez voir que le résultat de la compilation est un objet esModule. Cela est dû à l'utilisation de raw-loader, dont le résultat de compilation est par défaut en mode esModule. Désactivez simplement l'élément de configuration esModule. Exemple (la configuration personnalisée du webpack peut faire référence aux exemples de configuration de dll ci-dessous) : 🎜

{
    "scripts": {
        "ng:serve": "node --max_old_space_size=8192 node_modules/@angular/cli/bin/ng serve",
        "dll": "node config/webpack.dll.mjs",
        "dev": "npm run dll -- --dev && npm run ng:serve -- -c development",
    }
}

🎜2 Optimisation supplémentaire : prise en charge des dll de configuration de webpack personnalisée angulaire 🎜🎜🎜Ce projet est construit là-dessus Il est nécessaire de personnaliser la configuration du webpack, qui est implémentée à l'aide de la bibliothèque @angular-builders/custom-webpack, mais aucune DLL n'est configurée. 🎜🎜Angular fournit le paramètre vendorChunk. Son activation extraira les ressources publiques telles que les dépendances dans package.json en morceaux indépendants, ce qui peut le faire. est une bonne solution au problème selon lequel les bundles de mise à jour à chaud sont trop volumineux, ce qui rend la mise à jour à chaud trop lente, etc., mais il y a toujours une utilisation élevée de la mémoire, et dans le test de comparaison réel, en présence du cache webpack5, il est meilleur que la construction et la compilation en mode DLL. La vitesse ainsi que la vitesse de mise à jour à chaud sont légèrement plus lentes. Par conséquent, lorsque les performances de la machine de développement sont moyennes, configurer la dll en mode développement apportera certains avantages. 🎜

🎜2.1 Angular prend en charge la configuration personnalisée du webpack🎜

🎜Vous devez d'abord configurer la prise en charge de la build pour la configuration personnalisée du webpack. Exécutez la commande suivante pour ajouter des dépendances : 🎜rrreee🎜Modifiez la configuration angluar.json. Référence du format de contenu : 🎜rrreee🎜Cet exemple implique de nombreux contenus de configuration personnalisés. Vous devez principalement faire attention aux parties liées au webpack. D'autres contenus peuvent être comparés et référencés en fonction de la situation spécifique de votre propre projet. Pour plus de détails, veuillez vous référer à l'introduction pratique de cet article précédent : lzw.me/a/update-to…🎜

🎜2.2 Configurer la prise en charge des dll webpack pour Angular🎜

🎜Créez un nouveau fichier webpack.config.js. Référence du contenu : 🎜rrreee🎜Créez un nouveau fichier webpack.dll.mjs pour la création de dll. Exemple de contenu : 🎜

import { join } from 'node:path';
import webpack from 'webpack';

const rootDir = process.cwd();
const isDev = process.argv.slice(2).includes('--dev') || process.env.NODE_ENV === 'development';

/** @type {import('webpack').Configuration} */
const config = {
  context: rootDir,
  mode: isDev ? 'development' : 'production',
  entry: {
    dll: [
      '@angular/common',
      '@angular/core',
      '@angular/forms',
      '@angular/platform-browser',
      '@angular/platform-browser-dynamic',
      '@angular/router',
      '@lzwme/asmd-calc',
      // more...
    ],
  },
  output: {
    path: join(rootDir, 'dist/dll'),
    filename: 'dll.js',
    library: '[name]_library',
  },
  plugins: [
    new webpack.DllPlugin({
      path: join(rootDir, 'dist/dll/[name]-manifest.json'),
      name: '[name]_library',
    }),
    new webpack.IgnorePlugin({
      resourceRegExp: /^\.\/locale$/,
      contextRegExp: /moment$/,
    }),
  ],
  cache: { type: 'filesystem' },
};

webpack(config).run((err, result) => {
  console.log(err ? `Failed!` : `Success!`, err || `${result.endTime - result.startTime}ms`);
});

在 angular.json 中添加 dll.js 文件的注入配置，可参考前文示例中 development.scripts 中的配置内容格式。

在 package.json 中增加启动脚本配置。示例：

{
    "scripts": {
        "ng:serve": "node --max_old_space_size=8192 node_modules/@angular/cli/bin/ng serve",
        "dll": "node config/webpack.dll.mjs",
        "dev": "npm run dll -- --dev && npm run ng:serve -- -c development",
    }
}

最后，可执行 npm run dev 测试效果是否符合预期。

3 小结

angular-cli 在升级至 webpack 5 以后，基于 webpack 5 的缓存能力做了许多编译优化，一般情况下开发模式二次构建速度相比之前会有大幅的提升。但是相比 snowpack 和 vite 一类的 esm no bundles 方案仍有较大的差距。其从 Angular 13 开始已经在尝试引入 esbuild，但由于其高度定制化的构建逻辑适配等问题，对一些配置参数的兼容支持相对较为复杂。在 Angular 15 中已经可以进行生产级配置尝试了，有兴趣也可作升级配置与尝试。

更多编程相关知识，请访问：编程教学！！

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!