javascript - 您可以在构建时压缩 Angular 图像 Assets 吗？

Question

我想要的是
我的 Assets 中有非常大的图像，对于较慢的网络，这会大大降低网站的速度。 (you can read more about the topic on this lighthouse linked page)

我想在构建时压缩它们( ng build --prod )。

对于本地发展，它是无关紧要的(ng serve)。

理想情况下，我想为不同的屏幕尺寸生成多个版本( example.jpg → 应该变成: example_x265.jpg ， example_x128.jpg ，...)

我试过的
我找到的最有希望的指南是 this one here ，其中描述了如何使用 imagemin与 ngx-build-plus 结合使用的软件包包裹。
不幸的是，在按照教程进行操作后，我收到以下错误:

[error] TypeError: Cannot assign to read only property 'main.977fe6373cfd108d.js' of object '#<Object>'
    at ImageminPlugin._callee2$ (/.../node_modules/imagemin-webpack-plugin/dist/index.js:264:48)
    at tryCatch (/.../node_modules/babel-runtime/node_modules/regenerator-runtime/runtime.js:62:40)
     // ...

有没有办法在构建时压缩 Assets 图像？

Angular Version: 13.1.0

Note: I do not want to know how to upload images to third party storage solutions.
I specifically want to create a compressed version of my static assets on build time.

Answer 1

您可以使用带有 gulp-responsive 的 gulpfile或 gulp-sharp-responsive .
我个人使用后者，因为它支持 AVIF格式。
要将它与您的 Angular 项目很好地集成，您可以按照以下步骤操作:

安装依赖:npm i --save-dev gulp gulp-sharp-responsive

创建 gulpfile.js在您的项目根目录中包含以下内容

const { src, dest } = require("gulp");
const sharpResponsive = require("gulp-sharp-responsive");

const compress = () =>
  src("images/*.{png,jpg}")
    .pipe(
      sharpResponsive({
        formats: [
          // jpeg
          { width: 256, format: "jpeg", rename: { suffix: "-256" } },
          { width: 512, format: "jpeg", rename: { suffix: "-512" } },
          { width: 1024, format: "jpeg", rename: { suffix: "-1024" } },
          // webp
          { width: 256, format: "webp", rename: { suffix: "-256" } },
          { width: 512, format: "webp", rename: { suffix: "-512" } },
          { width: 1024, format: "webp", rename: { suffix: "-1024" } },
          // avif
          { width: 256, format: "avif", rename: { suffix: "-256" } },
          { width: 512, format: "avif", rename: { suffix: "-512" } },
          { width: 1024, format: "avif", rename: { suffix: "-1024" } },
        ],
      })
    )
    .pipe(dest("src/assets/compressed"));

module.exports = {
  compress,
};

在您的项目根目录中创建一个文件夹，您的未压缩图像文件所在的位置(在此示例中称为 images)

将预安装脚本添加到您的 package.js , 这样你的 gulpfile 就会在每次构建时被调用

"scripts": {
  "prebuild": "gulp compress",
  // ...
},

如果您调用 npm run build现在，它将压缩您的图像并将它们移动到指定的 Assets 文件夹中，然后实际运行 ng build .
现在您可以使用带有 picture 的图像文件。/ source像下面的代码片段一样组合。请记住，源标签的顺序很重要。

<!-- {{image}} is the image name -->
<picture *ngIf="image">
  <!-- avif -->
  <source
    srcset="assets/compressed/{{image}}-256.avif"
    media="(max-width: 512px)"
    type="image/avif"
  />
  <source
    srcset="assets/compressed/{{image}}-512.avif"
    media="(max-width: 1024px)"
    type="image/avif"
  />
  <source
    srcset="assets/compressed/{{image}}-1024.avif"
    media="(max-width: 2048px)"
    type="image/avif"
  />
  <!-- webp -->
  <source
    srcset="assets/compressed/{{image}}-256.webp"
    media="(max-width: 512px)"
    type="image/webp"
  />
  <source
    srcset="assets/compressed/{{image}}-512.webp"
    media="(max-width: 1024px)"
    type="image/webp"
  />
  <source
    srcset="assets/compressed/{{image}}-1024.webp"
    media="(max-width: 2048px)"
    type="image/webp"
  />
  <!-- jpeg -->
  <source
    srcset="assets/compressed/{{image}}-256.jpg"
    media="(max-width: 512px)"
    type="image/jpeg"
  />
  <source
    srcset="assets/compressed/{{image}}-512.jpg"
    media="(max-width: 1024px)"
    type="image/jpeg"
  />
  <source
    srcset="assets/compressed/{{image}}-1024.jpg"
    media="(max-width: 2048px)"
    type="image/jpeg"
  />
  <!-- original -->
  <img src="assets/compressed/{{ image }}-1024.jpg" />
</picture>