MST
星途 面试题库

面试题:Angular生产版本构建中如何配置优化图片资源加载

在Angular生产版本构建时,图片资源的加载优化对性能提升至关重要。请阐述你会如何配置以优化图片资源加载,比如如何进行图片压缩、选择合适的图片格式以及使用懒加载等相关配置方法。
48.7万 热度难度
前端开发Angular

知识考点

AI 面试

面试题答案

一键面试

图片压缩

  1. 构建工具集成压缩插件
    • 在Angular项目中,通常使用@angular - cli。可以通过安装相关图片压缩插件来实现压缩。例如,对于PNG图片,可使用imagemin - pngquant。先安装imagemin - pngquant依赖:
    npm install imagemin - pngquant --save - dev
    
    • 然后在angular.json文件的architect.build部分配置:
    {
        "builder": "@angular - cli:browser",
        "options": {
            "plugins": [
                {
                    "name": "@angular - cli/plugin - html - minifier",
                    "options": {
                        "htmlMinifier": {
                            "collapseWhitespace": true,
                            "removeComments": true,
                            "minifyCSS": true,
                            "minifyJS": true
                        }
                    }
                },
                {
                    "name": "image - webpack - loader",
                    "options": {
                        "mozjpeg": {
                            "progressive": true,
                            "quality": 65
                        },
                        "pngquant": {
                            "quality": [0.65, 0.90],
                            "speed": 4
                        },
                        "gifsicle": {
                            "interlaced": false
                        },
                        "webp": {
                            "quality": 75
                        }
                    }
                }
            ],
            // 其他已有配置项...
        }
    }
    
  2. 在线工具预压缩
    • 在将图片放入项目前,使用在线图片压缩工具,如TinyPNG、Compressor.io等。这些工具能直观地对图片进行压缩,且效果较好,无需复杂配置。将压缩后的图片再添加到项目资源中。

选择合适的图片格式

  1. JPEG
    • 适用场景:用于色彩丰富的照片等图像。它采用有损压缩,能在较小的文件大小下保持较好的视觉质量。
    • 配置:在构建时,可通过上述image - webpack - loader配置JPEG压缩参数,如设置quality来调整压缩程度。
  2. PNG
    • 适用场景:适合有透明度需求的图像或简单的图标等。对于色彩简单且有透明部分的图像,PNG能提供较好的展示效果。
    • 配置:同样通过image - webpack - loaderpngquant配置项调整PNG图片的压缩质量。
  3. WebP
    • 适用场景:具有更好的压缩比,在现代浏览器中支持度逐渐提高。可用于替换JPEG和PNG以进一步减小文件大小。
    • 配置:在image - webpack - loader中配置webp相关参数,如quality。同时,为了兼容不支持WebP的浏览器,可以使用<picture>标签:
    <picture>
        <source type="image/webp" srcset="image.webp">
        <source type="image/png" srcset="image.png">
        <img src="image.png" alt="description">
    </picture>
    

图片懒加载

  1. Angular内置懒加载
    • 模块懒加载:在Angular路由中,可以配置模块懒加载,这间接优化了包含图片的组件的加载时机。在app - routing.module.ts中配置:
    const routes: Routes = [
        {
            path: 'feature',
            loadChildren: () => import('./feature/feature.module').then(m => m.FeatureModule)
        }
    ];
    
    • 这样当用户访问到/feature路由时,才会加载该模块及其包含的图片等资源。
  2. 图片组件懒加载
    • 使用ng - lazyload - image库来实现图片的懒加载。首先安装:
    npm install ng - lazyload - image --save
    
    • app.module.ts中导入:
    import { LazyLoadImageModule } from 'ng - lazyload - image';
    @NgModule({
        imports: [
            LazyLoadImageModule
        ],
        // 其他配置项...
    })
    export class AppModule {}
    
    • 在模板中使用:
    <img [lazyLoad]="'path/to/image.jpg'" alt="description">
    
    这样图片只有在进入视口时才会加载,从而优化性能。