面试题：优化基于Node.js搭建的Angular开发环境的性能

包管理

精简依赖：
- 仔细检查package.json文件，删除项目中未使用的依赖包。通过npm list --depth=0命令查看项目安装的所有依赖，手动删除不需要的依赖，然后运行npm install重新安装依赖，避免冗余包带来的性能开销。
- 使用工具如depcheck自动检测并提示未使用的依赖，方便清理。
优化安装过程：
- 使用npm ci代替npm install进行安装。npm ci会根据package - lock.json精确安装依赖，不会生成新的package - lock.json，安装速度更快且可重复性更高，适合在CI/CD环境中使用。
- 选择合适的镜像源，如使用淘宝镜像源npm config set registry https://registry.npm.taobao.org，可以加快下载速度。也可以使用nrm工具方便地切换镜像源。

构建工具

Webpack优化：
- 代码拆分：利用Webpack的splitChunks插件，将代码按路由、功能模块等进行拆分，避免生成过大的bundle文件。例如，对于Angular应用，可以将公共模块、第三方库等拆分出来，实现按需加载，提升页面加载速度。
- 优化Loader配置：
  - 对于babel-loader，配置cacheDirectory: true，启用缓存，下次构建时如果代码未改变则直接使用缓存中的结果，加快构建速度。
  - 在ts-loader中设置transpileOnly: true，只进行类型检查而不进行完整的编译，在开发阶段可显著提升构建速度。但要注意在生产环境关闭该选项以确保代码质量。
- 压缩代码：在生产构建时，使用terser-webpack-plugin对JavaScript代码进行压缩，去除冗余代码、注释等，减小bundle文件大小。配置parallel: true选项，开启多线程压缩，进一步提高压缩速度。
Angular CLI优化：
- 开启AOT编译：在angular.json文件中，将architect.build.aot设置为true。AOT（ Ahead - of - Time）编译在构建时将TypeScript代码编译为JavaScript，而不是在浏览器中动态编译，可显著提升应用的启动速度和运行性能。
- 优化构建缓存：Angular CLI从8.0版本开始支持构建缓存，通过设置architect.build.cache: true，在后续构建中如果文件未改变，会复用之前的构建结果，加快构建速度。

运行时配置

优化Node.js运行环境：
- 启用多进程：对于Node.js应用，可以使用cluster模块开启多进程，充分利用多核CPU的优势，提高应用的并发处理能力。例如，在启动Node.js服务器时：

const cluster = require('cluster');
const http = require('http');
const numCPUs = require('os').cpus().length;

if (cluster.isMaster) {
    console.log(`Master ${process.pid} is running`);
    for (let i = 0; i < numCPUs; i++) {
        cluster.fork();
    }

    cluster.on('exit', (worker, code, signal) => {
        console.log(`worker ${worker.process.pid} died`);
        cluster.fork();
    });
} else {
    http.createServer((req, res) => {
        res.writeHead(200);
        res.end('Hello World\n');
    }).listen(8000);
    console.log(`Worker ${process.pid} started`);
}

调整Node.js内存限制：通过设置NODE_OPTIONS环境变量，如export NODE_OPTIONS="--max - old - space - size = 4096"（将堆内存限制调整为4GB），避免因内存不足导致的性能问题，尤其是在处理大量数据或复杂计算的应用中。

Angular应用运行时优化：
- 懒加载模块：在Angular应用中，对路由模块使用懒加载。在app - routing.module.ts中，使用loadChildren属性配置懒加载，例如：

const routes: Routes = [
    {
        path: 'feature',
        loadChildren: () => import('./feature/feature.module').then(m => m.FeatureModule)
    }
];

优化Change Detection策略：对于组件，根据组件的特性选择合适的ChangeDetectionStrategy。对于数据变化不频繁的组件，可以设置changeDetection: ChangeDetectionStrategy.OnPush，当输入属性或接收到Observable通知时才触发变化检测，减少不必要的变化检测周期，提升性能。

星途面试题库

面试题：优化基于Node.js搭建的Angular开发环境的性能

知识考点

面试题答案

包管理

构建工具

运行时配置