面试题答案
一键面试图片压缩
- 构建工具集成压缩插件:
- 在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 } } } ], // 其他已有配置项... } }
- 在Angular项目中,通常使用
- 在线工具预压缩:
- 在将图片放入项目前,使用在线图片压缩工具,如TinyPNG、Compressor.io等。这些工具能直观地对图片进行压缩,且效果较好,无需复杂配置。将压缩后的图片再添加到项目资源中。
选择合适的图片格式
- JPEG:
- 适用场景:用于色彩丰富的照片等图像。它采用有损压缩,能在较小的文件大小下保持较好的视觉质量。
- 配置:在构建时,可通过上述
image - webpack - loader
配置JPEG压缩参数,如设置quality
来调整压缩程度。
- PNG:
- 适用场景:适合有透明度需求的图像或简单的图标等。对于色彩简单且有透明部分的图像,PNG能提供较好的展示效果。
- 配置:同样通过
image - webpack - loader
的pngquant
配置项调整PNG图片的压缩质量。
- 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>
图片懒加载
- Angular内置懒加载:
- 模块懒加载:在Angular路由中,可以配置模块懒加载,这间接优化了包含图片的组件的加载时机。在
app - routing.module.ts
中配置:
const routes: Routes = [ { path: 'feature', loadChildren: () => import('./feature/feature.module').then(m => m.FeatureModule) } ];
- 这样当用户访问到
/feature
路由时,才会加载该模块及其包含的图片等资源。
- 模块懒加载:在Angular路由中,可以配置模块懒加载,这间接优化了包含图片的组件的加载时机。在
- 图片组件懒加载:
- 使用
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">
- 使用