您可以在构建时压缩角度图像资源吗？

Question

我想要的是

\n

我的资源中有很大的图像，这会导致网络速度较慢时网站速度大大减慢。（您可以在此灯塔链接页面上阅读有关该主题的更多信息）

\n

\n
• 我想在构建时压缩它们（ng build --prod）。
\n
• 对于本地发展来说，这是无关紧要的（ng serve）。
\n
• 最好我想为不同的屏幕尺寸生成多个版本（example.jpg\xe2\x86\x92 应该变成：example_x265.jpg, example_x128.jpg, ...）
\n

\n

---

\n

我尝试过的

\n

我找到的最有前途的指南是这里的指南，它描述了如何将imagemin包与ngx-build-plus包结合使用。

\n

不幸的是，按照教程进行操作后，我收到以下错误：

\n

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

\n

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

\n

Angular Version: 13.1.0\n

\n

\n

注意：我不想知道如何将图像上传到第三方存储解决方案。
\n我特别想在构建时创建静态资源的压缩版本。

\n

\n

Answer 1

您可以将 gulpfile 与 或gulp-responsive一起使用gulp-sharp-responsive。我个人使用后者，因为它支持该AVIF格式。

要将其与您的 Angular 项目完美集成，您可以按照以下步骤操作：

1. 安装依赖项：npm i --save-dev gulp gulp-sharp-responsive
2. 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,
};

3. 在项目根目录中创建一个文件夹，其中包含未压缩的图像文件（在本示例中称为images）
4. 将预安装脚本添加到您的 中package.js，以便在每次构建时调用您的 gulpfile

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

如果您npm run build现在调用，它会在实际运行之前压缩您的图像并将它们移动到指定的资源文件夹中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>