- NX框架提供了一套可扩展的模块系统,允许用户开发或使用现有模块。
- 使用
npm install @next/image --save-dev
来安装image模块。 - 安装后,需要在项目配置文件(nx.json)中添加
modules
属性,并配置image模块相关设置,如允许优化的域名。 - 通过创建页面并使用
img
标签显示图片,可以观察到安装image模块前后图片大小的变化。 nx-img
是image模块提供的组件,可直接使用并通过设置quality
和width
属性来优化图像质量和大小。- 图像优化后,页面上显示的图像大小由2.2MB降低到155KB,显示了优化效果。