Angular 13+开发模式慢的原因及构建性能优化解析

 更新时间:2022年12月20日 09:02:41   作者:任侠  
这篇文章主要为大家介绍了Angular 13+开发模式慢的原因及构建性能优化解析,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪

1 Angular 13+ 开发模式太慢的原因与解决

近期在某个高频迭代七年的 Angular 项目升级至 Angular 13 后,其开发模式的构建速度慢、资源占用高,开发体验相当差。在一台仅在开会时偶尔使用的 Macbook air(近期居家办公期间转换为了主要生产力工具) 中启动构建时,它的风扇会呼呼作响,CPU 负荷被打满,而在构建完成后,热更新一次的时间在一分钟以上。

在经过各种原因分析与排查后,最终在 angular.json 的 schema(./node_modules/@angular/cli/lib/config/schema.json) 中发现了问题,再结合 Angular 12 release 文档定位到了具体原因: Angular 12 一个主要的改动是将 aotbuildOptimizeroptimization 等参数由默认值 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 文件,用于 dll 构建。内容示例:

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

以上就是Angular 13+开发模式慢的原因及构建性能优化解析的详细内容,更多关于Angular 13+性能优化的资料请关注脚本之家其它相关文章!

相关文章

  • 详解用webpack2搭建angular2的项目

    详解用webpack2搭建angular2的项目

    本篇文章主要介绍了详解用webpack2搭建angular2的项目 ,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-06-06
  • Angular 4依赖注入学习教程之InjectToken的使用(八)

    Angular 4依赖注入学习教程之InjectToken的使用(八)

    这篇文章主要给大家介绍了关于Angular 4依赖注入之InjectToken使用的相关资料,文中介绍的非常详细,对大家学习或者使用Angular4具有一定的参考学习价值,需要的朋友们下面来跟着小编一起学习学习吧。
    2017-06-06
  • angular中的observable问题

    angular中的observable问题

    这篇文章主要介绍了angular中的observable问题,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-10-10
  • Angular4开发解决跨域问题详解

    Angular4开发解决跨域问题详解

    本篇文章主要介绍了Angular4开发解决跨域问题详解。小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-08-08
  • Angular2下使用pdf插件的方法详解

    Angular2下使用pdf插件的方法详解

    这篇文章主要给大家介绍了在Angular2下使用pdf插件的方法,使用这个插件是要实现一个pdf显示的功能,文中介绍的非常详细,对大家具有一定的参考价值,需要的朋友们下面来一起看看吧。
    2017-04-04
  • AngularJS入门教程之AngularJS表达式

    AngularJS入门教程之AngularJS表达式

    AngularJS应用表达式是纯javascript表达式,并输出它们被使用的数据在那里。本文给大家介绍AngularJS入门教程之AngularJS表达式,对angularjs表达式相关知识感兴趣的朋友一起学习吧
    2016-04-04
  • Angular 2父子组件数据传递之@ViewChild获取子组件详解

    Angular 2父子组件数据传递之@ViewChild获取子组件详解

    这篇文章主要给大家介绍了关于Angular 2父子组件数据传递之@ViewChild获取子组件的相关资料,文中通过示例代码介绍的非常详细,对大家具有一定参考学习价值,需要的朋友们下面来一起看看吧。
    2017-07-07
  • 详解AngularJS中的表单验证(推荐)

    详解AngularJS中的表单验证(推荐)

    AngularJS自带了很多验证,什么必填,最大长度,最小长度...,这里记录几个有用的正则式验证。本文给大家介绍的非常详细,对angularjs中表单验证知识感兴趣的朋友一起学习吧
    2016-11-11
  • angular+ionic 的app上拉加载更新数据实现方法

    angular+ionic 的app上拉加载更新数据实现方法

    这篇文章主要介绍了angular+ionic 的app上拉加载更新数据实现方法,需要的的朋友参考下
    2017-01-01
  • Angluar+zorro实现无限级菜单

    Angluar+zorro实现无限级菜单

    这篇文章主要为大家详细介绍了Angluar+zorro实现无限级菜单,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2022-03-03

最新评论